Ajax JSON Not Returning

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)

Try adding an error() handler to your ajax function, and see if it's fired, and what errors occur. And make sure your returned data is actually jsonp, not regular json. — adeneo, Apr 29 '12 at 01:12
error gives a 200. and Error: jQuery1720435445470206538_1335662563183 was not called. Which im guessing is because it is sending other parameters. — Anthony1234, Apr 29 '12 at 01:23
If it's not cross domain, but on your own server, you don't really need jsonp. To make sure the data is jsonp, you would have to make sure the server sends valid data i.e jsonp. The jQuery-bunchOfNumbers not called, is because jQuery added a function to your json to try to make it jsonp, but there is no jsonp callback specified. There's a lot of info on this on the jQuery ajax pages. — adeneo, Apr 29 '12 at 01:35

Xenon · Accepted Answer · 2012-04-29T01:52:45.117

0

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;

edited Apr 29 '12 at 01:52

answered Apr 29 '12 at 01:35

Xenon

3,174
18
37

Thanks man. The first option worked, but for some reason the pulled data did not style very well as expected. Probably my problem. And i tried 2nd option but it gave off errors in the handler. – Anthony1234 Apr 29 '12 at 01:41
Whats the overall difference between json and jsonp? would that affect my layout? – Anthony1234 Apr 29 '12 at 02:02
@anthony1234 [JSONP](http://en.wikipedia.org/wiki/JSONP) is "JSON with padding". It's supposed to be a safe way of making cross-origin requests. Whether you are using JSON or JSONP should make no difference to the actual data you receive. What exactly do you mean by your 'layout'? – Xenon Apr 29 '12 at 02:06
For more info on the difference, see [this Stack Overflow question](http://stackoverflow.com/q/2887209/1166205). – Xenon Apr 29 '12 at 02:14

Ajax JSON Not Returning

1 Answers1