I am building a type of RSS Feed reader using Google's Feed API. After much trial and error, I have been able to instantiate a connection to a given RSS URL via PHP, and return the JSON object. The problem I run into is that I am attempting to validate multiple URLs from an array, but due to the asynchronous nature of AJAX, and loading time lag through the Google API, the results code fires off before the validation can complete. I have tried things like: forcing synchronicity, setTimeouts, .promise on objects that call the validation, ect but I'm getting no where. Any help at all would be immensely appreciated.
My Code:
PHP
$feed = $_POST['feed'];
$url = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=&q=" . $feed;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, www.mywebsiteurl.com);
$body = curl_exec($ch);
curl_close($ch);
echo $body;
This snippet successfully creates a connection to the given Feed URL, and returns a JSON object containing the feed data. I am calling this external php script with the following AJAX call:
AJAX:
var conn = $.ajax({
url : "php/feedlog.php",
type : "post",
data : {feed: feed_a[i]}
});
conn.done(function (data){
var err = eval('(' + data + ')' ).responseStatus;
if (err==200){
console.log("Success");
} else if (err==400){
console.log("Failure with: " + err);
}
});
This code works flawlessly for a single connection attempt, but I need to linearly step through an array of feeds, testing a feed, waiting for the connection result, then proceeding to the next feed in the array, or breaking on a successful connection.
I have attempted to use an $.each statement for feed_a[], but the loop fires faster than the results can be returned. I think I need to operate a buffer, but I'm not sure how to implement it.
As always, if needed I can provide additional code, previous attempts, or greater clarification upon request. If needed I can host the code live at my website for demo purposes.
More direct question: How can I force a loop ($.each, for loop, or a recursive function) to wait for results from an AJAX call?
Also, in an attempt to make my questions better in the future, could someone explain why my question may have been marked down?
Edit: Thanks for the speedy response everyone! The following code appears to resolve my issue:
$.each(v_feed, function(_,url){
$.ajax("php/feedlog.php",{
type: "POST",
data: { feed: url }
}).done(function(data){
var err = eval('(' + data + ')' ).responseStatus;
if (err == 200){
console.log("success with: " + data);
} else if (err == 400){
console.log("fail with: " + data);
console.log("removing from valid array");
v_feed.splice(v_feed.length - _, 1);
}
//console.log(err);
}).fail(function(){
console.log("Fail");
}).complete(function(){
console.log(v_feed);
});
});
Loop through with $.each, creating the wrapper for each feed in the html before you send the ajax request, storing a reference to the wrapper. On done, populate the wrapper with the feed. This will allow you to retrieve them all at once while still adding them to the page in the correct order without having to wait for them all to complete.
$.each(feedArr, function(_,url){
var wrapper = $("<div>").appendTo(someel);
$.ajax("feed.php",{
type: "POST",
data: { url: url }
}).done(function(data){
// process data...
wrapper.append(generateFeedHTML(data));
}).fail(function(){
wrapper.remove();
});
});
Try that:
var arrayOfPromises = [];
//inside each/for loop, push request in array
arrayOfPromises.push($.ajax({
url : "php/feedlog.php",
type : "post",
data : {feed: feed_a[i]}
}));
And then outside of loop:
$.when.apply($, arrayOfPromises).done(function(data){
//all requests are done
});
I don't remember exactly which data will be passed to done(), check it.
Fire off the next call only on success:
var worked = {status:true},
conn = function(successLogic){
if(feed_a[i]) // I assume this is the loop end condition...
$.ajax({
url : "php/feedlog.php",
type : "post",
data : {feed: feed_a[i]},
success: function(data){
if(successLogic(data));
worked.status = worked.status && conn(successLogic); // Recursion instead of iteration!
},
error: function(err){
worked.status = false;
// your error code
}
});
else
return worked;
};
var completedRecusionPromise = conn(function(data){
var obj;
try{
obj = JSON.parse(data);
}catch(e){ console.log(e); }
return !!obj; // Assuming you just want valid JSON??
});
Related
I don't how to ask this question but if their are duplicates send me that. Their are several .php files i have made
content.php, show.php and showFilteredResult.php .
content.php sends the start date and end date to the show.php and it returns the the orderIds which are of that date
$(document).ready(function () {
var srt = $("#cal1Date1").val();
var end = $("#cal1Date2").val();
$.ajax({
url: "http://localhost/show.php",
data: {
srt: srt,
end: end
},
type: "POST",
dataType: "json",
complete: function (response) {
$rtndata = response.responseText;
var dat1a = jQuery.parseJSON($rtndata);
var result = dat1a.OrderID;
console.log(result[0]); // send this result
}
});
});
now I want to send this $result with orderids to showFilteredResult.php where then i can make tables etc.
I'd skip the AJAX and just use request parameters (GET or POST).
cal1Date1 and cal1Date2 are input fields I assume. Wrap them in a form and post the values to a PHP form handler that could handle the lookup and display. No need for the AJAX middle-man here.
Just make a similar Ajax request to showFilteredResult.php I would have them in a separate function.
function showFilteredResult($result){
$.ajax({
url:"http://localhost/showFilteredResult.php",
data: {
result:$result
},
type:"POST",
dataType: "json",
complete:function(response){
$rtndata=response.responseText;
var dat1a=jQuery.parseJSON($rtndata);
var result=dat1a.OrderID;
console.log(result[0]);// do something with the data returned from showFilteredResult.php
}
});
}
and from the request that you have just call that funciton like
... $rtndata=response.responseText;
var dat1a=jQuery.parseJSON($rtndata);
var result=dat1a.OrderID;
console.log(result[0]);// send this result
showFilteredResult(result[0]);
}
});
Instead making another request to server , you have another option to do that. Let's say you get orderId from show.php before sending back , right ? Then you can use this orderId to do what u want such as query which u have written in showFilteredResult.php . then return back to client for final result . In that way you can eliminate the unnecessary http request.
I am more of a java developer and am having difficulty with javascript callback. I am wondering if any experts here would help me out of my struggle with this code.
I am trying to pull our locations from db and populating in an array. On first load i am trying to refresh all locations and I am having trouble to control the flow of execution and loading values. Below is the code and I have put in the output at the end.
JQUERY CODE:
// load all locations on first load.
refreshLocations();
$("#locInput").autocomplete({source: locationData});
}); // end of document.ready
// function to refresh all locations.
function refreshLocations() {
getLocationArray(function(){
console.log("firing after getting location array");
});
}
// function to get the required array of locations.
function getLocationArray() {
getJsonValues("GET", "getLocalityData.php", "", getLocalityFromJson);
}
// function to pick up localities from json.
function getLocalityFromJson(json){
if (!json) {
console.log("====> JSON IS NOT DEFINED !! <====");
return;
} else {
console.log("json is defined so processing...");
var i = 0;
$.each(json.listinginfo, function() {
var loc = json.listinginfo[i].locality;
locationArray[i] = loc;
console.log("added location ->" + locationArray[i]);
i++;
});
}
//return locationArray;
}
// function to get raw json from db.
function getJsonValues(type, url, query, getLocalityFromJson) {
var json;
// if the previous request is still pending abort.
if (req !== null)
req.abort();
var searchString = "";
if (query !== "") {
searchString = "searchStr" + query;
}
console.log("searchString : (" + query + ")");
req = $.ajax({
type: type,
url: url,
data: searchString,
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function(result) {
json = JSON.parse(result);
console.log("========start of json
return============");
console.log(JSON.stringify(json));
console.log("========end of json
return============");
//return json;
}
});
getLocalityFromJson(json);
return json;
}
the output from above code is as follows:
searchString : () (18:25:36:473)
at locality1.php:74
====> JSON IS NOT DEFINED !! <==== (18:25:36:518)
at locality1.php:48
========start of json return============ (18:25:37:606)
at locality1.php:83
{"listinginfo":[{"listing":"1","locality":"birmingham"},
{"listing":"2","locality":"oxford"}]} (18:25:37:624)
at locality1.php:84
========end of json return============ (18:25:37:642)
at locality1.php:85
>
Help will be greatly appreciated.
call getLocalityFromJson(json); inside your success callback
function getJsonValues(type, url, query, getLocalityFromJson) {
var json;
// if the previous request is still pending abort.
if (req !== null)
req.abort();
var searchString = "";
if (query !== "") {
searchString = "searchStr" + query;
}
console.log("searchString : (" + query + ")");
req = $.ajax({
type: type,
url: url,
data: searchString,
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function(result) {
json = JSON.parse(result);
console.log("========start of json return============");
console.log(JSON.stringify(json));
console.log("========end of json return============");
//return json;
getLocalityFromJson(json);
}
});
}
You need to call getLocalityFromJson(json) and return json inside your ajax success function. Ajax requests are asynchronous, there's no guarantee that the request will be finished by the time you get to the lines getLocalityFromJson(json); return(json); where they are currently.
The call back functions from a jquery ajax call is complete, failure, success, etc..
Success is called after a request is successful,
Failure is called if theres something like an error 500, or a 404, or w/e.
Complete is Always called after a ajax call.
If you want your code to just follow sequence like in java, throw async: false into your ajax call.. but I wouldnt' recommend this as it defeats the purpose of using this method, and also locks up your browser.
You should make sure you are waiting for the request to finish before moving on - so put code in the success function that you want to run AFTER the request has finished fetching your data.
I think you need to remember Ajax is running async, so you need to follow this thread to execute your refresh.
I am querying salesforce database to get some data. The query result will return a max of 2000 records in one response and will also return the "nextRecordsUrl" parameter, using which we can fetch the next set of results. So I am able to achieve this by calling the same method again in the done function of the $.ajax(). I wanted to know if there was any better way to do it?
function stringSearch(queryParam){
var sessionCookie = getCookie('sid');
var currentDomain = window.location.host;
queryParam = queryParam== undefined || queryParam =='' ? "/services/data/v28.0/query/?q=SELECT+Name+from+Account" : queryParam;
$.ajax({
url : "https://"+currentDomain+queryParam,
headers : {"Authorization": "Bearer "+ sessionCookie},
contentType : "application/json"
}).done(function(res){
//do some processing with the result
processingFunction(res.records);
if(res.nextRecordsUrl){
//call the same method with different parameters
stringSearch(res.nextRecordsUrl);
}else{
//Done with all the processing proceed to final actions
}
}).fail(function(err){
alert('Oops!! We were unable to fetch the data you requested!\n'+JSON.stringify(err)+'\n ');
});
}
function processingFunction(){
//use the array and do some processing.
}
I'm a beginner in ajax and json so I'm sorry if this question is a bit stupid. I'm retrieving the data(city id and name) and put them in an array then use json_encode. Then I call the getCities function but I'm not sure if I'm getting the correct cities. I tried using document.write but there's no output. How can I know if I'm getting the correct ones? Thank you for your help.
Here's the getCities.php:
$json = array();
$query = "SELECT cityID, cityName FROM city";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$coord = array('id' => $row['cityID'],'city' => $row['cityName']);
array_push($json, $coord);
}
$jsonstring = json_encode($json);
And here's the javascript part:
function getCities(){
var string = $.ajax ({
url: "getCities.php",
dataType: 'json'
}).responseText;
return JSON.parse(string);
}
$(document).ready(function (){
var city = getCities();
while (city.length > 0) {
document.write(city.pop + "<br/>");
}
});
There are 2 easy ways to do this. First of all I use Google Chrome (or Firefox) to facilitate testing. Look at the docs and you will see that your $.ajax call will also accept a success function. You could put it in the ajax call under dataType like this:
var string = $.ajax ({
url: "getCities.php",
dataType: 'json',
success: function(data) {
console.log(data);
}
});
string.done();
Notice how I changed the end of the ajax call. It is now saying, when this call is done, call the success function. You can also put an error function in the ajax call if you want to have something print out in case of an error. The success function will then be called when the data returns. It will print in the console of your Chrome debugger. Google that term to find out how to show it, super easy stuff. You can also put a break point on the console.log function call (Google how to do that also) and you will be able to inspect the object that is returning from your ajax call.
Also, the console.log will not work in IE as far as I know.
Have fun.
function getCities(callback){
var string = $.ajax ({
url: "getCities.php",
dataType: 'json',
success:callback
});
}
$(document).ready(function (){
getCities(function(data){
console.log(data);
var city = JSON.parse(data);
if (city.length > 0) {
document.write(city.pop + "<br/>");
}
});
});
Ajax is asyn, you cannot use var city = getCities();. Because when you call that, ajax response has not arrived yet. You need to pass in a callback function, and when ajax response has arrived, call that function to get the response.
OK, so I cannot seem to be able to change the global variable of systemPath after it goes through the ajax.It will work inside of ajax, but I need that updated variable outside of ajax. basically I'm trying to create an array of paths from xml and use them to locate other xml files that I can generate a table from.
Does anyone know what's going on here? Does ajax run before the variable is set and that is why I get an array length of 0 after the ajax?
var systemPath = new Array();
var techDigestArr = new Array();
var addToArray = function(thisarray, toPush){
thisarray.push(toPush);
}
$.ajax({
url: fullPath+"technical/systems/systems.xml",
dataType: ($.browser.msie) ? "text" : "xml",
success: function(data){
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find("system").each(function(){
var urlString = fullPath + "technical/system_" + $(this).attr("id") + "/" + $(this).attr("id") + "tech-digest.xml <br />";
//alert(urlString);
$("#td-articles").append(systemPath.length + urlString);
addToArray(systemPath,urlString);
//systemPath.push(urlString);
});
$("#msg-output").append("total - " +systemPath.length);//Returns 48
},//END SUCCSESS
error: function(){
alert("Sorry - ");
history.go(-1);
}
});//END AJAX CALL
$(document).ready(function(){
//$("#msg-output").append("total - " + systemPath.length); Returns 0
});
The ajax is ran asynchronously. Things execute in this order in your code.
stuff before $.ajax()
$.ajax() initiates an ajax call (while waiting for the response it continues to run the rest of the code)
stuff after $.ajax()
success callback
Note that depending on how fast the call is 3 and 4 might occur in reverse order (not the case here)
So when $(document).ready() is executed the ajax call might not have returned yet, so the code in the success callback didn't have a chance to execute. If you are lucky and have a fast connection than maybe the response will come before document ready, but it's unlikely.
Just so you can see that the global variable gets updated you can set a timeout:
$(document).ready(function(){
setTimeout(function(){
$("#msg-output").append("total - " + systemPath.length);
//if the delay set below is more than the time between the ajax request and the server response than this will print the correct value
},2000);
});