ajax - Javascript output now showing in custom widget|Programmer puzzle solving

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

Share Improve this question asked Jan 4, 2019 at 16:33 Kevin 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>');

Programmer puzzle solving

ajax - Javascript output now showing in custom widget

1 Answer 1

Articles related to this article

comment list (0)