Getting a random value in ajax GET url

Question

EDIT: I've managed to address the issues above, but the max_id keeps getting returned as the same for every load, so the same 20 photos keep loading.

I'm trying to pull in Instagram photos from a hashtag, and then using an ajax feed to call the next set of photos when you scroll to the bottom of the page. Problem is, my ajax script is picking up a random value from somewhere and placing it at the end of my GET url, which renders the URL useless.

I've gone over all my code all day and can't find where it's wrong.

index.php

jQuery(document).ready(function(){

$('#imore').bind('click', function(){
    var tag   = $(this).data('tag'),
        maxid = $(this).data('maxid'),
        $c = $('div#instphotos'),
        $newItems = '';

    $.ajax({
      type: 'GET',
      url: 'ajax.php',
      data: {
        tag: tag,
        max_id: maxid
      },
      dataType: 'json',
      success: function(data) {
        // Output data

        $.each(data.images, function(i, src) {

            var $newItems = $('<div class="mblock"><span class="number">1</span><div class=""><a href="'+data.images[i].src+'?loadtype=iframe" class="imagebox fancybox.iframe" ititle="<div class=&quot;posttitle&quot;>@</div><div style=&quot;float:right;margin-right:15px;&quot;></div><div class=&quot;clear&quot;></div>"><img src="'+data.images[i].thumb+'"></div>').css('opacity', 0); 
            $c.isotope( 'insert', $newItems ).fadeTo('fast', 1); 

        });
        $('#imore').data('maxid', data.next_id);

      }

    });
});
});

<?php
/** Instagram PHP API */
require_once 'instagram.class.php';

// Initialize class with client_id
// Register at http://instagram.com/developer/ and replace client_id with your own
$instagram = new Instagram('19a4efd22cc1442d97057bd1083e3385');

// Get latest photos according to geolocation for Växjö
// $geo = $instagram->searchMedia(56.8770413, 14.8092744);

$tag = 'subarulove';

// Get recently tagged media
//$media = $instagram->getTagMedia($tag);

$media = $instagram->getTagMedia('breakfast',$auth=false,array('max_tag_id'=>$maxID));

// Display first results in a <ul>
echo '<div id="instphotos">';

$i = 1;
foreach ($media->data as $data) {
    echo '  <div class="photo mblock"><span class="number">'.$i.'</span><div class=""><a href="'.$data->images->standard_resolution->url.'?loadtype=iframe" class="imagebox fancybox.iframe" ititle="<div class=&quot;posttitle&quot;>@'.$data->user->username.'</div><div style=&quot;float:right;margin-right:15px;&quot;></div><div class=&quot;clear&quot;></div>">'."\n";
    echo '    <span class="roll"></span>'."\n";
    echo '    <img src="'.$data->images->low_resolution->url.'"></a></div></div>'."\n";
$i++;
}
echo '</div>';

echo '<div id="imore" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'"><a href="#">Load more ...</a></div>';
?>

ajax.php

 require_once 'instagram.class.php';

  // Initialize class for public requests
  $instagram = new Instagram('19a4efd22cc1442d97057bd1083e3385');

  // Receive AJAX request and create call object
  $tag = !empty($_GET['tag']) ? $_GET['tag']: null;
  $maxID = !empty($_GET['maxid']) ? $_GET['maxid']: null;
  $clientID = $instagram->getApiKey();

  $call = new stdClass;
  $call->pagination->next_max_id = $maxID;
  $call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

  // Receive new data
  $media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));

  // Collect everything for json output
  $images = array();
  if($media){
    foreach ($media->data as $data) {
      $src = $data->images->standard_resolution->url;  
      $thumb = $data->images->low_resolution->url;  
      $url = $data->link;

      $images = array();
       foreach ($media->data as $data) {
        $images[] = array(
          $data->images->standard_resolution->url,
          $data->images->low_resolution->url,
          $data->link,
          $data->likes->count
        );
      }
    }

    echo json_encode(array(
      'next_id' => $media->pagination->next_max_id,
      'images' => $images
    ));
  }
?>

And in the console whenever it runs the ajax request it returns: GET http://url.com/ajax.php?tag=breakfast&max_id=1400131855765479&_=1400114008166 500 (Internal Server Error)

The bold part is the random value that is getting inserted into the URL.

Answer 1

To add pagination, you will need to call the pagination method and then the subsequent requests use the next_id, also fixed the issue with the Strict Standards: Creating default object from empty value... error

A Cleaned up Example

<?php 
require_once 'instagram.class.php';

// Initialize class for public requests
$instagram = new Instagram('19a4efd22cc1442d97057bd1083e3385');

// Receive AJAX request and create call object
$tag   = !empty($_GET['tag'])     ? $_GET['tag']     : 'subarulove';
$maxID = !empty($_GET['next_id']) ? $_GET['next_id'] : 0;
$clientID = $instagram->getApiKey();

$call = new stdClass;
$call->pagination = new stdClass();
$call->pagination->next_max_id = $maxID;
$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

// Receive new data
$media = $instagram->pagination($call, 8); //max to load

// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
    $images[] = array(
        'url'   => $data->images->standard_resolution->url,
        'thumb' => $data->images->low_resolution->url,
        'url'   => $data->link,
        'likes' => $data->likes->count 
    );
}


if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    header('Content-Type: application/json');
    exit(json_encode(array(
        'next_id' => $media->pagination->next_max_id,
        'images' => $images
    )));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Instagram pagination example using jQuery AJAX</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

    $('#imore').bind('click', function(){

        var request = $.ajax({
            url: "./index.php",
            type: "GET",
            data: { tag: $(this).data('tag'), next_id: $(this).data('next_id') },
            dataType: "json"
        });
        request.done(function( data ) {
            $.each(data.images, function(i, src) {
                $('<img src="'+data.images[i].thumb+'">').appendTo("div#instphotos");
            });

            $('#imore').data('next_id', data.next_id);
        });
        request.fail(function( jqXHR, textStatus ) {
            alert( "Request failed: " + textStatus );
        });

    });

});
</script>
</head>
<body>

<div id="instphotos">
<?php 
foreach ($images as $image){
    echo '<img src="'.$image['thumb'].'">';
}
?>
</div>
<div id="imore" data-next_id="<?php echo $media->pagination->next_max_id; ?>" data-tag="subarulove">
    <a href="Javascript:void(0);">Load more ...</a>
</div>

</body>
</html>