The problem is in your jQuery statement. You pass the get_field_id
but without #
it’s looking for a tag
not and id
. The second thing is even if that worked, you would be replacing the contents with only one filename using html
but you should adding to the list using append
.
Here is a quick test to highlight the areas.
function form_test () {
$field_id = 'test_xyz';
?><select id="<?php echo $field_id; ?>" name="<?php echo $field_id; ?>" size="10" multiple="multiple" tabindex="1"></select>
<script type="text/javascript">
jQuery(document).ready(function($){
var data = ['fileA', 'fileB', 'fileC'];
for(var i = 0; i < data.length; i++){
var filename = data[i];
jQuery( "#<?php echo $field_id; ?>").append('<option value="'+filename+'">'+filename+'</option>');
}
});
</script><?php
}
add_filter ('the_content', function($content){ return $content.form_test(); });
Your code would end up looking more like
function form ($instance) {
$field_id = $this->get_field_id( 'filenames' );
?><select id="<?php echo $field_id; ?>" name="<?php echo $field_id; ?>" size="10" multiple="multiple" tabindex="1"></select>
<script type="text/javascript">
jQuery(document).ready(function($){
var data = { 'action' : 'clc_return_imagefilenames' };
// send ajax request
jQuery.post(ajaxurl, data, function(response) {
// parse response and add slides
var retrievedImagenames = JSON.parse(response);
for(var i = 0; i < retrievedImagenames.imagenamestoreturn.length; i++){
var filename = retrievedImagenames.imagenamestoreturn[i]['filename'];
jQuery( "#<?php echo $field_id; ?>").append('<option value="'+filename+'">'+filename+'</option>');
}
});
});
</script><?php
}