1

I created a widget, that retrieves filenames from the database and am now trying to output the filenames as options in a select tag inside the admin widget menu(the form function in the widget class).

This is how it looks at the moment:

function form($instance) {
    ?> <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
                    retrievedImagenames = JSON.parse(response);
                    for(var i = 0; i < retrievedImagenames.imagenamestoreturn.length; i++){
                            filename = retrievedImagenames.imagenamestoreturn[i]['filename'];
                            jQuery("<?php echo $this->get_field_id( 'filenames' );?>").html('<option value="'+filename+'">'+filename+'</option>');
                        }
                    }); 
            });

                    </script>

        <select id="<?php echo $this->get_field_id( 'filenames' ); ?>" name="<?php echo $this->get_field_id( 'filenames' ); ?>" size="10" multiple="multiple" tabindex="1"></select>

        <?php

The plan is to get the filenames via AJAX (works, I tested it) and then append them to the select tag with jQuery.

The problem is, that nothing happens...and it is not a problem with the server or AJAX, filename is set, I can see the returned JSON objects in the console and I can even output them using jQuery. But it doesn't append them to the select tag and I don't know why.

0

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
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.