Question

I have the following code in my main page, trying to pull AJAX JSON.
It simply has to show 10 extra products on each page scroll. and at the moment it only shows the loader Circle div which should remove after loading – but nothing is loading.

     var handler = null;
     var page = 1;
     var isLoading = false;
     var apiURL = 'ajax/api.php'    

    function onScroll(event) {
      // Only check when we're not still waiting for data.
      if(!isLoading) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var closeToBottom = ($(window).scrollTop() + $(window).height() > 
    $(document).height() - 100);
        if(closeToBottom) {
          loadData();
        }
      }
    };

    function loadData() {
      isLoading = true;
      $('#loaderCircle').show();

      $.ajax({
        url: apiURL,
        dataType: 'jsonp',
        data: {page: page}, // Page parameter to make sure we load new data
        success: onLoadData
      });
    };

    // Receives data from the API, creates HTML for images 
    function onLoadData(data) {
      isLoading = false;
      $('#loaderCircle').hide();

      // Increment page index for future calls.
      page++;

      // Create HTML for the images.
       var html = '';
      var i=0, length=data.length, image;
      for(; i<length; i++) {
        image = data[i];
        html += '<li>';

        // Image tag
        html += '<img src="products/200/'+p_id+'.jpg" ">';

        // Image title.
        html += '<p>'+p_name+'</p>';

        html += '</li>';
      }

      // Add image HTML to the page.
      $('#tiles').append(html);

    };

And my PHP JSON call

<?php require_once('../inc/config.php');
    $page = $_REQUEST['page'];
    $items = '10';
    $start = (($page * $items) - $items);
    $end = ($page * $items);

    $result = mysql_query("SELECT p_id, p_name FROM products ORDER BY p_id ASC LIMIT $start, $end");


    $products = array();
    while($product = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $products[] = ($product);
    }

    $output = json_encode($products);

    echo $output;
    ?>

The JSON that the php displays is as follows (example data):

[{"p_id":"1","p_name":"ASOS Pleated Swing Mac"},{"p_id":"2","p_name":"ASOS Midi Belted Coat"},{"p_id":"3","p_name":"ASOS Zig Zag Coat"},{"p_id":"4","p_name":"Collarless Quilted Leather Biker with Ribbed Sleeve"},{"p_id":"6","p_name":"TFNC Dress with Wrap Front in Flocked Heart"},{"p_id":"7","p_name":"Striped Skater Dress"},
{"p_id":"8","p_name":"Metallic Wrap Dress"},{"p_id":"9","p_name":"Strapless Dress With Neon Belt"},{"p_id":"10","p_name":"Darling Floral Border Print Dress"},{"p_id":"11","p_name":"Dip Hem Chiffon Dress With Printed Top"}]

So overall it doesnt load the data into the html. Can someone please explain what I might have to do or what I might be doing wrong. (this is using the wookmark plugin – but shouldnt affect anything)

Answer 1

The problem is that you’ve set the jQuery AJAX dataType to jsonp, but your api.php is outputting JSON, not JSONP.

To solve this, either change the dataType to json:

$.ajax({
    url: apiURL,
    dataType: 'json',
    data: {page: page}, // Page parameter to make sure we load new data
    success: onLoadData
});

Or change your api.php file to output JSONP data:

$json = json_encode($products);
$output = isset($_GET['callback']) ? "{$_GET['callback']}($json)" : $json;