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!
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');
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.
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');
?
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.