Instagram API Ajax Attempt Tried To Fix Error

Question

I am trying to fix Ajax pagination for Instagram API

Only 20 photos are shown. The "Download more" button does not work.

In the console:

Uncaught ReferenceError: maxid is not defined 

Here is index.php:

  <script> $(document).ready(function() { $('#more').click(function() { var max_id = $(this).data('nextid'); $.ajax({ type: 'GET', url: 'ajax.php', data: { max_id: maxid }, dataType: 'json', cache: false, success: function(data) { // Output data $.each(data.images, function(i, src) { $('#photos').append('<li><img src="' + src + '"></li>'); }); // Store new maxid $('#more').data('maxid', data.next_id); } }); }); }); </script> <?php require_once 'instagram.class.php'; $instagram = new Instagram(array( 'apiKey' => '*****', 'apiSecret' => '*****', 'apiCallback' => '******' )); // Receive OAuth code parameter $code = $_GET['code']; if (true === isset($code)) { $data = $instagram->getOAuthToken($code); $instagram->setAccessToken($data); $media = $instagram->getUserMedia(); } ?> <ul id="photos"> <?php foreach( $media->data as $data ): ?> <li><img src="<?php echo $data->images->thumbnail->url ?>"></li> <?php endforeach; ?> <?php echo "<br><button id=\"more\" data-maxid=\"{$media->pagination->next_max_id}\">Load more ...</button>"; ?> 

ajax.php:

 require_once 'instagram.class.php'; $instagram = new Instagram(array( 'apiKey' => '****', 'apiSecret' => '*****', 'apiCallback' => '*******' )); // Receive OAuth code parameter $code = $_GET['code']; if (true === isset($code)) { $data = $instagram->getOAuthToken($code); // Initialize class for public requests $instagram->setAccessToken($data); $media = $instagram->getUserMedia(); // Receive AJAX request and create call object $maxID = $_GET['next_max_id']; $clientID = $instagram->getApiKey(); $call = new stdClass; $call->pagination->next_max_id = $maxID; $call->pagination->next_url = "https://api.instagram.com/v1/users/self/media/recent?client_id={$clientID}&max_id={$maxID}"; // Receive new data $media = $instagram->pagination($call); // Collect everything for json output $images = array(); foreach ($media->data as $data) { $images[] = $data->images->thumbnail->url; } echo json_encode(array( 'next_id' => $media->pagination->next_max_id, 'max_id' => $media->pagination->max_id, 'images' => $images )); 

I am using https://github.com/cosenary/Instagram-PHP-API

Thanks!

Answer 1

How can this be clearer than:

 Uncaught ReferenceError: maxid is not defined 

maxid not defined in your code. This line defines max_id :

 var max_id = $(this).data('nextid'); 

Answer 2

There are only 2 locations with maxid :

Here:

$. Ajax ({
...
max_id: maxid
},

and here:

// Save The New Maxid
$ ('# more'). data ('maxid', data.next_id);

When replacing these intros with your specific max_id (thanks @mathieu) it should be fixed.

In ajax.php you have the line:

$ maxID = $ _GET ['next_max_id'];

This does not match your call above where you have max_id . It looks like you mixed some next/max/id . If you review your code and clear these identifiers, it should work.

Answer 3

Similar to

 .data('nextid'); 

is a careless mistake, as this does not exist in your DOM. If it is not somewhere else and you have not posted it.

You meant

 .data('maxid'); 

?

Answer 4

You need to pass an argument to event click and get data from event.target .
Change the first lines of codes to this:

 $('#more').click(function( event ) { var max_id = $(event.target).data('nextid');