Instagram grabbing photos based on hashtag - javascript

setInterval(function () {
$("ul").empty();
var tag = $("#add").data('tag'), maxid = $("#add").data('maxid');
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('ul#photos').append('<li><img src="' + src + '"></li>');
});
// Store new maxid
$('#add').data('maxid', data.next_id);
}
});
}, 20000);
I'm trying to load 1 picture at a time in an interval of 20s. However for a certain hashtag with only 27 photos. It loads well until the last 20, which loads all at one even though I'm limiting it to just one. It's always the last 20.
How do I load it 1 at a time for the last 20?

It's difficult to say exactly without looking at your PHP script, but what I can say is that you are iterating over an array of returned photos (using $.each) and appending each photo from the array of returned photos to your DOM.
So one thing would be, don't iterate over the array of photos and just access the first index of the array of photos (data.images[0]). If you can't figure out why your server side code is returning more photos than you want (which you should investigate), just grab all the photos and set a timeout that adds one of the returned photos every 20s after you've made the network request for all of them. This would mean less network requests as well, so maybe it would be a good solution for you.
If you want to make up to 20 ajax requests (maybe not an optimal solution), and you are getting more images back than you want, then your PHP needs to be investigated and right now you're only showing us the client side code.

Related

How do I parse data from a json api that has multiple pages

Objective: Parse JSON from an API where results are listed across multiple pages.
I am new to JSON and to working with data in general. I want to know how to write a function that will update the url, outputting the results for each page, and stopping when it reaches one that is empty.
This problem here is from a Shopify url displaying JSON data used for trivial purposes and not part of a real application.
https://shopicruit.myshopify.com/admin/orders.json?page=1&access_token=c32313df0d0ef512ca64d5b336a0d7c6
Each page had 5O objects. I'm making an $.ajax request to the url but the url has page=1 as a query,
$.ajax({
url:"https://shopicruit.myshopify.com/admin/orders.json?page=1&access_token=c32313df0d0ef512ca64d5b336a0d7c6",
method:'get',
dataType:'JSON'
}).done(function(response){
so the response I am only getting back is only for The results of page one (obviously). I know there are more pages b/c if I manually put a 2 in place of the 1 I can see different data. This goes on for multiple pages. I have tried removing the page option, setting it to all and any and these just display page 1.I thought maybe leaving the page option out would cure the problem but it does not.
How do I get all the pages of data with an ajax call?
Is it a function that takes the $.ajaxcall inside of it, that adds page++ and makes a new call for each page? I still don't know how to write that sadly.
The shopify API docs do give some examples on how to display "all data" but I tried to use what they suggested and it did not work so I'm not sure that it's applicable to the problem, but just in case it is–
https://help.shopify.com/api/reference/order
Here is a simplistic answer - this will get pages until there's clearly no more data - i.e. once a page returns less than limit orders
function getAllData(page) {
return $.ajax({
url:"https://shopicruit.myshopify.com/admin/orders.json?page=" + (page || 1) + "&limit=250&access_token=c32313df0d0ef512ca64d5b336a0d7c6",
method:'get',
dataType:'JSON'
}).then(function(response){
if (page && response.orders.length == 250) {
return getAllData(page + 1)
.then(function (more) {
return response.orders.concat(more)
})
}
return response.orders;
});
}
getAllData(1).then(function(orders) {
// orders is an array of orders
});
Note I've used 250 for limit to get 250 at a time
I say this is simplistic because, it does get all the data, however, you need to wait until all the data is retrieved before you can use it - this may take too long for your "user experience" - but this should get you to a place you can start
There's logic in the code such that if page is 0, only the first page will be retrieved regardless of how many items are in it - so you could do something like
getAllData().then(function(page1data) {
// do something with page 1
}).then(function() {
return getAllData(2); // start at page 2
}).then(function(restOfData) {
// do something with restOfData, pages 2+
});
One thing I'm not sure of is
.then(function(response){
you may need to change this to
.then(function(r){
var response = r[0];
I'm not 100% certain of jQuery's .then callback arguments

pagination in jquery in web page

I make search engine based on elastic search and connect it to web page by using ajax and jquery. when someone enters search , all match results are displayed on single web page if less than 30.In most cases I know that total match results are more than 600 but web page only display 30 results.
In console it shows like this
data: Object
hits: Object
hits: Array[10]
max_score : 1.2333
total : 650
here total match results are 650 but web page display only 30 results.
How can I implement pagination. the code I used to display those results on web page is
$.ajax({
url: '/elastic/',
type: 'GET',
data: {"data": text},
success: function (response) {
$('.pagination').remove();
data = JSON.parse(response);
console.log(data);
for (var hit in data.data.hits.hits)
{
var source = data.data.hits.hits[hit]._source;
$('.div').append(source.user_name + ' / ' +
source.name +'<br/>');
}
}, searchText = text; }
Here I should implement pagination and I tried to look for relevant example of pagination here but I didn't found anything. and everytime the search result is different. sometimes there are 500 matching results and sometimes 10.
Can someone please give me a hint/guidance or example that how pagination can be implemented. I am trying from last few days.
You can use from and size parameters (as query parameter or data parameter). On the other hand there is also a Scroll API. You can check it from https://www.elastic.co/guide/en/elasticsearch/reference/2.4/search-request-scroll.html

Updating webpage with real-time database value using AJAX+PHP response

I’m creating a Javascript game and I’m currently trying to write some code that will show the player’s “Gold Balance” in real time on a html webpage.
The Gold amount is contained in my SQL database, so I’m using setInterval with a Javascript function that contains an AJAX call which calls a PHP script that grabs the current balance amount for the player and sends it back as “response”.
I’m able to have this amount appear as a Javascript alert, however I need to have the response appear as text on the webpage inside a <div> instead.
This is my current code:
<script>
setInterval("checkGold()",5000);
function checkGold()
{
$.ajax({
url: 'scripts/checkGold.php',
data: "",
dataType: 'json',
success: function(response){
alert(response);
}});
};
</script>
I have this in my html source code, I would like to place the function in a separate file and call it from there, but when I tried this I wasn't able to send the response back to the html page correctly.
I was wondering if anyone knows how to have this response appear as text on the page inside <div> </div>?
Also, I was wondering if this method will really update the div in real time (ie, will it auto-refresh the div part of the webpage, showing an up to date value (every 5000 milliseconds)?
Thanks in advance!
Since you are using jQuery, you can use text() to alter the contents of an existing div (which id is "yourDiv"):
setInterval("checkGold()",5000);
function checkGold()
{
$.ajax({
url: 'scripts/checkGold.php',
data: "",
dataType: 'json',
success: function(response){
$('div#yourDiv').text(response);
}
});
};
You have two questions here, so I will try to address both
1) How to append to the DOM using jQuery, instead of an alert:
in the success callback function, instead of alerting the response, you can simply call
$('body').append("<div>"+response+"</div>")
2) "Real time" Gold Balance
You should use websockets. Racthet is a good websocket PHP library to help you with this: http://socketo.me/

How can I make an AJAX refresh like Gmail's inbox?

I'm making a messaging system and I am currently reloading the content of the div holding the messages every 10 seconds using jQuery's .load(), but I have a problem: When trying to make a "Select all" button, "Delete selected" button, etc. when that 10 seconds comes up it reloads the buttons and it reloads the messages, so the messages get deselected because of the reload.
What I would like to know is how to make it actually load in new messages, but not actually reload the whole div. I know that Gmail does not reload the whole div because it works properly.
This is my JavaScript function that reloads the div and changes the page title (that has inbox count) so it stays updated:
function title() {
setTimeout("document.title = $('#heading').text();", 500);
}
function ajaxStuff() {
setTimeout("$('#heading').load('/employee/message/inbox.php #h1_head'); $('#messages').load('/employee/message/inbox.php #messages_inner');title();ajaxStuff();", 10000);
}
ajaxStuff();
Here is how I have the inbox set up:
Basically what I want to do is load in new messages with AJAX but somehow not refresh the div. I tried looking at Gmail's source but there's too much to go through and they make it confusing with a bunch of random classes and IDs.
Note: I have searched this on Google for a while now and did not find anything.
In response to comments:
I don't think a tutorial is warranted here. Change your server code to return the "new" messages with a class="new" attribute, then use:
$.ajax({
url: "/employee/message/inbox.php",
success: function(result) {
$(result).find(".new").prependTo("#heading");
}
});
Of course, that code may need some modifications to fit your environment/return data.
When checking for new messages send an ID of the newest message in your request. Then your php will return only everything newer that you add to your existing data.
jQuery.ajax({
type: 'get',
dataType: 'text',
url: "/employee/message/inbox.php",
data: {
from_user : from_user,
to_user: to_user,
message_id: message_id,
something_else_you_need_to_send: its_value
t: Math.random()
},
success: function(data, textStatus){
// whatever you need to do with the result returned from php (server)
}
Then in your sql query you do
select * from table
where user_id=user_id_from_ajax
and message_id > message_id_from_ajax`
update
in your php you use
$from_user = $_REQUEST['from_user'];
$to_user = $_REQUEST['to_user'];
$message_id = $_REQUEST['message_id'];

How do I get the counter of a google plus +1 button?

I have added a google +1 button to a website, but I want to get it's counter so i can do some math over it. is it possible to enter the iframe created by the standard method of creating the +1 button or do I need to make some adjustment?
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
I've tried this link:1 , but this is not very accurate
If you can access curl/file_get_contents/readfile/wget or some way to fetch an external URL, this is quite simple.
Load the following URL: https://plusone.google.com/_/+1/fastbutton?url=URLENCODED_URI (UPDATED URL, see note below *)
URLENCODED_URI is the site you wish to know the number of +1's for, e.g. http://www.google.com (http%3A%2F%2Fwww.google.com)
For example, fetch the URI https://plusone.google.com/_/+1/fastbutton?url=http://www.google.com/ (UPDATED URI) and locate the first occurance of window.__SSR = {'c': 32414.0 ,'si'. Preferably use regexp for this, but I'll leave the implementation to you and your chosen programming language (server side or client side).
The float number following 'c' is the number of +1's the site have. For google.com this is 32,414. Don't worry about the float, you can safely convert it to an integer.
* UPDATE: The URL has been updated as the old URL started to 404. Remember, this is expected as this is an unofficial method. There exist no official method (yet).
Could you use a callback function to grab the value of the div that displays the count?
function count() {
var count = $('#aggregateCount').html();
}
<g:plusone callback="count()"></g:plusone>
I'm basing this off the bubble annotation button, I haven't tested it but something like this should work.
A pure client-side solution that works for me to get the Google Plus counter is as follows. It does not need an API key.
var url = "http://www.yoursite-to-be-counted.com";
var data = {
"method":"pos.plusones.get",
"id": url,
"params":{
"nolog":true,
"id": url,
"source":"widget",
"userId":"#viewer",
"groupId":"#self"
},
"jsonrpc":"2.0",
"key":"p",
"apiVersion":"v1"
};
$.ajax({
type: "POST",
url: "https://clients6.google.com/rpc",
processData: true,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r){
setCount($(".google-plus-count"), r.result.metadata.globalCounts.count);
}
});
var setCount = function($item, count) {
if (count) {
$item.text(count);
}
};
Then I have some html with
<div class="google-plus-count"></div>
Credits here goes to this answer.

Categories