4

I'm trying to fix Ajax pagination for Instagram API

Shown only 20 photos. "Load more" button didn't work.

In 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

Thank You!

4 Answers 4

0

How can it be clearer than:

Uncaught ReferenceError: maxid is not defined

maxid is not defined in your code. What is defined is max_id in this line:

var max_id = $(this).data('nextid');
1
  • This error when clicking "load more" button in index.php: > Uncaught ReferenceError: maxid is not defined So what I need to put instead of maxid ? There are max_id and next_max_id from responce: { "pagination": { "next_url": "api.instagram.com/v1/users********/media/recent?access_token=33174964.1fb234f.707411a10e624f13b6b08dd806df1eab&max_id=278169081097328255_33174964", "next_max_id": "278169081097328255_33174964" },
    – nuttelko
    Oct 31, 2012 at 21:03
0

It looks like

.data('nextid');

is a careless error as that doesn't exist in your DOM. Unless it's somewhere else and you haven't posted it.

Did you mean to have

.data('maxid');

?

2
  • Ok that is certainly a problem in your code. It might just be one of a few or many. Now log the value of maxid to the console (or use an alert) right after you set it. If it is undefined then your selector is getting nothing and you need to look at your HTML. You should post the generated HTML, not the server code that creates it.
    – Tony
    Oct 31, 2012 at 22:52
  • I would also inspect the data coming into your success handler on the ajax call. That may show your error is on the server side.
    – Tony
    Oct 31, 2012 at 22:58
0

There are just 2 locations with maxid:

Here:

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

and here:

// Store new maxid
$('#more').data('maxid', data.next_id);

When you replace these occurences with your defined max_id (thanks to @mathieu) it should be fixed.

In your ajax.php you have a line:

$maxID = $_GET['next_max_id'];

This doesn't correspond to your call above, where you have a max_id. Seems like you mixed some next/max/id. If you look through your code and clean up these ids, it should work.

2
  • Can you tell more in detail please what to do? I tried to change max_id from maxid to nextid. What did You mean "When you replace these occurences with your defined max_id..."?
    – nuttelko
    Oct 31, 2012 at 21:31
  • 1
    You have maxid, nextid, max_id and next_max_id in those two sources. It's just a guess, but probably these names mean all the same thing. You should know, since this is your code. If these are the same, you can just replace all of them with max_id. As a rule of thumb: if you use something, give it just one name everywhere, otherwise you or your colleagues will become confused, sooner or later. Oct 31, 2012 at 21:36
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.