ajax - Javascript output now showing in custom widget

I have an issue with Javascript that I created for my custom widget.

Here is the code:

    var wrapper = $('#wrapper'), container;

    $.ajax({
    method: "POST",
    url: "",
    contentType: "application/json",
    headers: {
    Authorization: "bearer ******"
  },
 data: JSON.stringify({
    query: "query  { allProducts { id title } }"
  })
}).done(function(data) {

for( var key in data ) {

     for (var i = 0; i<data[key].allProducts.length; i++)
     {
         console.log(data[key].allProducts[i]);
         container = $('<div id="data" class="container"></div>');
         wrapper.appendTo(container);
         container.appendTo('<input type=checkbox name="id" value=' + data[key].allProducts[i].id + '>' + data[key].allProducts[i].title  );             
     }   

}

});

Here is how I'm calling the Jquery in my functions.php file for the template:

  function jquery_import() {

          wp_deregister_script('jquery');
          wp_register_script('jquery',.3.1/jquery.min.js', array(), '3.3.1', true);  
           wp_enqueue_script('jquery');

     }
     add_action( 'wp_enqueue_scripts', 'jquery_import' );

Here is how I'm calling my custom javascript file:

     function custom_wp_enqueue_scripts() {

        wp_register_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js', array( 'jquery' ), NULL, false );
         wp_enqueue_script( 'custom' );

       }    
      add_action('wp_enqueue_scripts', 'custom_wp_enqueue_scripts');

Finally, in my widget here is the following div statement:

      <div id="wrapper"> </div>

Based on my javascript, data is coming in, however, the information is not displayed in my widget. Why it isn't showing in my widget?

Thank you, Kevin Davis

I have an issue with Javascript that I created for my custom widget.

Here is the code:

    var wrapper = $('#wrapper'), container;

    $.ajax({
    method: "POST",
    url: "https://api.graphcms/simple/v1/SampleAPI",
    contentType: "application/json",
    headers: {
    Authorization: "bearer ******"
  },
 data: JSON.stringify({
    query: "query  { allProducts { id title } }"
  })
}).done(function(data) {

for( var key in data ) {

     for (var i = 0; i<data[key].allProducts.length; i++)
     {
         console.log(data[key].allProducts[i]);
         container = $('<div id="data" class="container"></div>');
         wrapper.appendTo(container);
         container.appendTo('<input type=checkbox name="id" value=' + data[key].allProducts[i].id + '>' + data[key].allProducts[i].title  );             
     }   

}

});

Here is how I'm calling the Jquery in my functions.php file for the template:

  function jquery_import() {

          wp_deregister_script('jquery');
          wp_register_script('jquery',https://ajax.googleapis/ajax/libs/3.3.1/jquery.min.js', array(), '3.3.1', true);  
           wp_enqueue_script('jquery');

     }
     add_action( 'wp_enqueue_scripts', 'jquery_import' );

Here is how I'm calling my custom javascript file:

     function custom_wp_enqueue_scripts() {

        wp_register_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js', array( 'jquery' ), NULL, false );
         wp_enqueue_script( 'custom' );

       }    
      add_action('wp_enqueue_scripts', 'custom_wp_enqueue_scripts');

Finally, in my widget here is the following div statement:

      <div id="wrapper"> </div>

Based on my javascript, data is coming in, however, the information is not displayed in my widget. Why it isn't showing in my widget?

Thank you, Kevin Davis

• ajax
• jquery
• javascript

Share Improve this question asked Jan 4, 2019 at 16:33 Kevin DavisKevin Davis 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try changing...

var wrapper = $('#wrapper'), container;

To just...

var wrapper = $('#wrapper');

then add var in front of container

var container = $('<div id="data" class="container"></div>');