PDA

View Full Version : jQuery - multiple ajax calls on one page.


Adam_C
01-09-2011, 01:58 AM
Hi, I have a webpage which calls two Ajax requests using jQuery. This works fine on Chrome and Safari - I'm guessing the Webkit browsers somehow handle this - however in other browsers like opera and IE it only calls the first Ajax call and not the second.

Is there a way to get round this? i.e. a plugin or something I haven't done / don't know about, I would be very grateful! p.s I have tried searching the web but nothing I can find solves the issue (evidently).

Thanks in advance! :D

ranjan
01-09-2011, 06:45 PM
The best way to do this is to upload the page and its dependent files, and to post a link to this uploaded page. A poor second alternative would be to paste your code into your post using the double chevron icon on the toolbar, and selecting Syntax Highlighting > Plain Text.

Without knowing what you have in your code, we cannot possibly answer anything other than a very simple question. Save us the trouble of engaging in twenty questions to find out what you have done and just show us the code. After all, it's what determines what happens on the page, not your screenshot or your description.

Please?

Also, if your question is one that involves database use or server-scripting, please tell us what server model (PHP, CF, etc.) and database you are using (MySQL, SQL Server, etc.), as well as the operating system and platform. All of those details are necessary for complete troubleshooting and will help us help you through the process!

note: credit goes to Murray of Dreamweaver Forums for the above

Adam_C
01-09-2011, 06:51 PM
Can i just give you a link to the source code of the website? Wouldnt that be the same thing? If so its here: http://daily.adamscarter.co.uk/

ranjan
01-10-2011, 01:40 AM
Remove console.log from your scripts. Hopefully that should fix things in IE and Opera.

PS: if this solves your problem then, it had nothing to do with your ajax calls and had you not posted your code page would have been impossible to debug so please please please remember to always POST YOUR CODE. All browsers support multiple ajax calls

domedia
01-10-2011, 04:20 PM
note: credit goes to Murray of Dreamweaver Forums for the above I even remember that name from the Adobe forums 10(!) years ago. :mrgreen:

Adam_C
01-10-2011, 04:47 PM
Remove console.log from your scripts. Hopefully that should fix things in IE and Opera.

PS: if this solves your problem then, it had nothing to do with your ajax calls and had you not posted your code page would have been impossible to debug so please please please remember to always POST YOUR CODE. All browsers support multiple ajax calls

Thanks, however I removed the console.log from the page and even the entire site. Still no luck. As for the code, I will add it below and I need to remember to add it in future posts!

Script 1
<script>
$(window).load(function(){
//LOAD THE NEWS
//Build the news URL using the default category
function buildNewsURL(newsCategory){
var newsURL = "http://daily.adamscarter.co.uk/proxy.php?url=http://feeds.bbci.co.uk/news/" + newsCategory + "/rss.xml";
doNewsAjax(newsURL);
}

//AJAX REQUEST - Using the built URL, call the news and get the main and subheadlines, then show them in the 'newspaper'
function doNewsAjax(newsURL){
$.ajax({
url: newsURL,
dataType: "xml",
cache: true,
success: function(newsData){
//MainHeadlines
var newsItems = $(newsData).find("item")[0];

$(newsItems).find("title");
var title = $(newsItems).find("title").text();
var linkURL = $(newsItems).find("link").text();
var headlineImage = $(newsItems).find("[nodeName=media:thumbnail]")[1];
var headlineImageURL = $(headlineImage).attr("url");

var mainHeadline = ("<a href='" + linkURL + "'><div id='cls-newsMainHeadlineImage' style='background-image:url(" + headlineImageURL + ");'></div><div id='cls-newsMainHeadlineHeadline'>" + title + "</div></a>");
$("#cls-newsMainHeadline").html(mainHeadline);

//SubHeadlines
var subHeadlines = new Array();
for (var i = 1; i <= 6; i++){
var newsItems = $(newsData).find("item")[i];

$(newsItems).find("title");
var title = $(newsItems).find("title").text();
var linkURL = $(newsItems).find("link").text();

subHeadlines.push("<div class='cls-newsSubHeadline'><a href='" + linkURL + "'>" + title + "</a></div>");
}
$("#cls-subHeadlineHolder").html(subHeadlines.join(""));
}

});
}

//Get defualt category and load that news
var getCategory = $("#cls-newsCategorySection").find(".defaultNewsCategory").attr("data-category");
buildNewsURL(getCategory);

//find all newsCategory classes and on click, build news after getting its category
$("#cls-newsCategorySection").find(".cls-newsCategory").click(function(){
var getCategory = $(this).attr("data-category");
buildNewsURL(getCategory);

//Get the category name and show it as a news header
var getCategoryName = $(this).attr("data-category-name");
$("#cls-newsNewsHeader").html(getCategoryName);

//Close the categories expander
collapseCategories();
});
});
</script>

and Script 2 (contains 2 ajax requests)
<script>
$(window).load(function(){
//Build a weather URL and get todays weather, then loop through the following two days weather
function buildWeatherURL(settingsWeatherLocation){
var settingsWOEID;

$.ajax({
url: "http://where.yahooapis.com/v1/places.q('" + settingsWeatherLocation + "')?appid=GOjK.GbIkY0vafiXi.QUdmsIM.DtD.O7Uzf0Gz.5u hsHptzt",
dataType: "xml",
success: function(getWOEID){
settingsWOEID = $(getWOEID).find("woeid").text();
doWeatherAjax(settingsWOEID);
}
});
}

//doWeatherAjax(settingsWOEID)
function doWeatherAjax(settingsWOEID){
$.ajax({
url: "http://daily.adamscarter.co.uk/proxy.php?url=http://weather.yahooapis.com/forecastrss?w=" + settingsWOEID + "&u=c",
dataType: "xml",

success: function(weatherData){
//Create weather header
var weatherLocation = $(weatherData).find("[nodeName=yweather:location]").attr("city");
$("#cls-weatherTitle").html(weatherLocation);

//Get today's weather
var todaysTemperature = $(weatherData).find("[nodeName=yweather:condition]").attr("temp");
var todaysWeather = $(weatherData).find("[nodeName=yweather:condition]").attr("text");
var todaysWeatherImageCode = Number($(weatherData).find("[nodeName=yweather:condition]").attr("code"));
//Work out what image should be shown
var weatherLargeImageURLPrefix = "http://daily.adamscarter.co.uk/images/local/weather/large-icons/";
if (todaysWeatherImageCode == 0 || todaysWeatherImageCode == 1 || todaysWeatherImageCode == 2 || todaysWeatherImageCode == 3 || todaysWeatherImageCode == 4 || todaysWeatherImageCode == 37 || todaysWeatherImageCode == 38 || todaysWeatherImageCode == 39 || todaysWeatherImageCode == 45 || todaysWeatherImageCode == 47){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "thunder.png"; //THUNDER
} else if (todaysWeatherImageCode == 5 || todaysWeatherImageCode == 6 || todaysWeatherImageCode == 7 || todaysWeatherImageCode == 8 || todaysWeatherImageCode == 10 || todaysWeatherImageCode == 13 || todaysWeatherImageCode == 14 || todaysWeatherImageCode == 15 || todaysWeatherImageCode == 42 || todaysWeatherImageCode == 46){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "snow-shower.png"; //SNOW SHOWER
} else if (todaysWeatherImageCode == 9 || todaysWeatherImageCode == 11 || todaysWeatherImageCode == 12 || todaysWeatherImageCode == 40){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "rain-shower.png"; //RAIN SHOWER
} else if (todaysWeatherImageCode == 16 || todaysWeatherImageCode == 17 || todaysWeatherImageCode == 18 || todaysWeatherImageCode == 41 || todaysWeatherImageCode == 43){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "snow-heavy.png"; //SNOW HEAVY
} else if (todaysWeatherImageCode == 35){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "rain-heavy.png"; //RAIN HEAVY
} else if (todaysWeatherImageCode == 32 || todaysWeatherImageCode == 36){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "sun.png"; //SUN
} else if (todaysWeatherImageCode == 26 || todaysWeatherImageCode == 28 || todaysWeatherImageCode == 30){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "white-cloud.png"; //CLOUDY
} else if (todaysWeatherImageCode == 19 || todaysWeatherImageCode == 20 || todaysWeatherImageCode == 21 || todaysWeatherImageCode == 22 || todaysWeatherImageCode == 23 || todaysWeatherImageCode == 24 || todaysWeatherImageCode == 25){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "windy.png"; //WINDY
} else if (todaysWeatherImageCode == 33 || todaysWeatherImageCode == 34 || todaysWeatherImageCode == 44){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "white-cloud-with-sun.png"; //WHITE CLOUD WITH SUN
} else if (todaysWeatherImageCode == 27 || todaysWeatherImageCode == 29){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "white-cloud.png"; //NIGHT
$(".cls-weatherTopSectionImage").css("background-colour", "#000");
} else if (todaysWeatherImageCode == 31){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "white-cloud.png"; //NIGHT
$(".cls-weatherTopSectionImage").css("background-colour", "#000");
} else if (todaysWeatherImageCode == 3200){
var weatherLargeImageURL = weatherLargeImageURLPrefix + "unknown.png"; //NIGHT
$(".cls-weatherTopSectionImage").css("background-colour", "#FFF");
}

//Set today's weather
//DEGREES
$(".cls-weatherTopSectionDegrees").html(todaysTemperature + "C");
//DESCRIPTION
if (todaysWeatherImageCode != 3200){
$(".cls-weatherTopSectionDescription").html(todaysWeather);
} else {
$(".cls-weatherTopSectionDescription").html("N/A");
}
//ICON
if (weatherLargeImageURL != null){
$(".cls-weatherTopSectionImage").html("<img border='0' width='100px' height='60px' src='" + weatherLargeImageURL + "' />");
}

//Get future weather
var subWeathers = new Array();
var dayNames = new Array("Tomorrow:", "Two Days:");

for (var i = 0; i < 2; i++){
var futureWeather = $(weatherData).find("[nodeName=yweather:forecast]")[i];
var futureTemperatureLowest = $(futureWeather).attr("low");
var futureTemperature = "Low: " + futureTemperatureLowest;

var futureWeatherImageCode = Number($(futureWeather).attr("code"));
var futureWeather = $(futureWeather).attr("text");

//Work out what image should be shown
var weatherIconImageURLPrefix = "http://daily.adamscarter.co.uk/images/local/weather/icons/";
if (futureWeatherImageCode == 0 || futureWeatherImageCode == 1 || futureWeatherImageCode == 2 || futureWeatherImageCode == 3 || futureWeatherImageCode == 4 || futureWeatherImageCode == 37 || futureWeatherImageCode == 38 || futureWeatherImageCode == 39 || futureWeatherImageCode == 45 || futureWeatherImageCode == 47){
var weatherIconImageURL = weatherIconImageURLPrefix + "thunder.png"; //THUNDER
} else if (futureWeatherImageCode == 5 || futureWeatherImageCode == 6 || futureWeatherImageCode == 7 || futureWeatherImageCode == 8 || futureWeatherImageCode == 10 || futureWeatherImageCode == 13 || futureWeatherImageCode == 14 || futureWeatherImageCode == 15 || futureWeatherImageCode == 42 || futureWeatherImageCode == 46){
var weatherIconImageURL = weatherIconImageURLPrefix + "snow-shower.png"; //SNOW SHOWER
} else if (futureWeatherImageCode == 9 || futureWeatherImageCode == 11 || futureWeatherImageCode == 12 || futureWeatherImageCode == 40){
var weatherIconImageURL = weatherIconImageURLPrefix + "rain-shower.png"; //RAIN SHOWER
} else if (futureWeatherImageCode == 16 || futureWeatherImageCode == 17 || futureWeatherImageCode == 18 || futureWeatherImageCode == 41 || futureWeatherImageCode == 43){
var weatherIconImageURL = weatherIconImageURLPrefix + "snow-heavy.png"; //SNOW HEAVY
} else if (futureWeatherImageCode == 35){
var weatherIconImageURL = weatherIconImageURLPrefix + "rain-heavy.png"; //RAIN HEAVY
} else if (futureWeatherImageCode == 32 || futureWeatherImageCode == 36){
var weatherIconImageURL = weatherIconImageURLPrefix + "sun.png"; //SUN
} else if (futureWeatherImageCode == 26 || futureWeatherImageCode == 28 || futureWeatherImageCode == 30){
var weatherIconImageURL = weatherIconImageURLPrefix + "white-cloud.png"; //CLOUDY
} else if (futureWeatherImageCode == 19 || futureWeatherImageCode == 20 || futureWeatherImageCode == 21 || futureWeatherImageCode == 22 || futureWeatherImageCode == 23 || futureWeatherImageCode == 24 || futureWeatherImageCode == 25){
var weatherIconImageURL = weatherIconImageURLPrefix + "windy.png"; //WINDY
} else if (futureWeatherImageCode == 33 || futureWeatherImageCode == 34 || futureWeatherImageCode == 44){
var weatherIconImageURL = weatherIconImageURLPrefix + "white-cloud-with-sun.png"; //WHITE CLOUD WITH SUN
} else if (futureWeatherImageCode == 27 || futureWeatherImageCode == 29){
var weatherIconImageURL = weatherIconImageURLPrefix + "white-cloud.png"; //NIGHT
$(".cls-weatherSubSectionImage").css("background-colour", "#000");
} else if (futureWeatherImageCode == 31){
var weatherIconImageURL = weatherIconImageURLPrefix + "white-cloud.png"; //NIGHT
$(".cls-weatherSubSectionImage").css("background-colour", "#000");
} else if (futureWeatherImageCode == 3200){
var weatherIconImageURL = weatherIconImageURLPrefix + "unknown.png"; //NIGHT
$(".cls-weatherSubSectionImage").css("background-colour", "#FFF");
}

//Set future weather
if (futureWeatherImageCode == 3200){
futureWeather = "N/A";
}

if (weatherIconImageURL != null){
futureWeatherIconURL = "<img border='0' width='80px' height='48px' src='" + weatherIconImageURL + "' />";
}
subWeathers.push("<div class='cls-weatherSubSection'><div class='cls-weatherSubSectionLeft'><div class='cls-weatherSubSectionTitle'>" + dayNames[i] + "</div><div class='cls-weatherSubSectionImage'>" + futureWeatherIconURL + "</div></div><div class='cls-weatherSubSectionRight'><div class='cls-weatherSubSectionDegrees'>" + futureTemperature + "C" + "</div><div class='cls-weatherSubSectionDescription'>" + futureWeather + "</div></div></div>");
}
$("#cls-weatherSubSections").html(subWeathers.join(""));
}
});
}

//call buildWeatherURL(settingsWeatherLocation)
buildWeatherURL(settingsWeatherLocation);

//Click on the title, to change the location
$("#cls-weatherHeader").click(function(){
$(this).html("<form name='locationSettingsForm' onsubmit='weatherLocationStorage()'><input type='text' name='settingsWeatherLocation' id='locationSettingsForm' style='margin: 10px; margin-top: 40px; margin-bottom: 0px; font-size: 20px; font-family: Gentium Basic; font-weight: bold; width: 200px;' /></form>");
$("input[name=settingsWeatherLocation]").focus();

$("input[name=settingsWeatherLocation]").blur(function(){
$("#cls-weatherHeader").html("<div id='cls-weatherTitle' class='weatherLocation' title='Click here to edit your location.'>" + settingsWeatherLocation + "</div>");

weatherLocationStorage();
});
});
});
</script>

Just as a side note, is it possible for IE to understand ajaxStop() events in jQuery? I'm using the latest version (1.4.4) but for some reason it doesn't work...