PDA

View Full Version : load multiple js ajax functions onload


Adam_C
12-17-2010, 03:13 PM
Hi, does anyone know the most efficient way of calling multiple functions (which load xml pages (they work fine seperately)) when the pages loads?

I have tried putting all the functions in one function then only calling that but it doesn't load the xml content?

thanks a lot :)

ranjan
12-17-2010, 03:26 PM
Cant help without seeing whats done

Adam_C
12-17-2010, 03:29 PM
Cant help without seeing whats done

both js files i use are here:
http://daily.adamscarter.co.uk/js/newsSection.js
http://daily.adamscarter.co.uk/js/photosSection.js

i want to load both the 'loadNews(0)' and 'loadPhotos()' when the page loads

ranjan
12-17-2010, 05:08 PM
I really cannot help if I just look at the functions.

I need to see where the function calls are made.

Most common way of debugging ajax calls is as below:

1. when data is recd. (ready state) log the xml to your console. this will show you if your data is fetched as expected.

2. make sure you begin to populate html only when the data is recd and not before (delays are expected of server that sends data)

Adam_C
12-17-2010, 05:13 PM
I really cannot help if I just look at the functions.

I need to see where the function calls are made.

Most common way of debugging ajax calls is as below:

1. when data is recd. (ready state) log the xml to your console. this will show you if your data is fetched as expected.

2. make sure you begin to populate html only when the data is recd and not before (delays are expected of server that sends data)

I simply just made a new js page, made a function within there called 'onPageLoad' then put the functions to load, in there.

I then attached the js to the main php page, then called that function called 'onPageLoad' in the body tag, in the 'onload' attribute.

ranjan
12-17-2010, 05:56 PM
no page url? sorry cant help

but this is how i would do it using jquery and yql


<div id="bbcNews"></div>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var urlBBCUK = 'http://query.yahooapis.com/v1/public/yql?q=select%20title%2C%20description%2C%20link%20 from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.b bci.co.uk%2Fnews%2Fuk%2Frss.xml%22&format=json&diagnostics=true';
$.ajax({
url: urlBBCUK,
dataType: "jsonp",
success: function(data) {
var newsItems = data.query.results.item;
var ml = [];
for(var i=0, l=newsItems.length; i<l; i++){
var tmpML = '<div class="item"><h3><a href="'+newsItems[i].link+'">'+newsItems[i].title+'</a></h3><p>'+newsItems[i].description+'</p></div>';
ml.push(tmpML);
}
$('#bbcNews').html(ml.join(''))
}
});
</script>

Adam_C
12-17-2010, 06:09 PM
my page url is simply: daily.adamscarter.co.uk and i use a proxy instead of yql, i used daily.adamscarter.co.uk/proxy.php

ranjan
12-17-2010, 07:26 PM
Question: Since you are already using jquery, I was wondering why are you not using jquerys ajax methods and write your own?

If you use jquery xml parsing is easier


$.ajax({
url: 'http://daily.adamscarter.co.uk/proxy.php?url=http://feeds.bbci.co.uk/news/" + categories[categoryNumber] + "/rss.xml',
dataType: "xml",
success: function(xml) {
$(xml).find("item").each(function(){
var eachItem = $(this);
console.log(eachItem)
});
}
});

Adam_C
12-17-2010, 08:13 PM
ok thanks, in answer to your question literally this website has been my first using jquery and i am trying to learn it, thanks again for the pointer :)

ranjan
12-17-2010, 09:22 PM
No worries, ask if you get stuck

Adam_C
12-17-2010, 11:41 PM
in my site i use an array and a function called 'loadNews' with a parameter of 'categoryNumber', that parameter loads the necessary news category. how would i do this in jQuery?

ranjan
12-18-2010, 07:50 PM
Continue to use this


var categories = new Array("world", "business", "politics", "health", "uk", "entertainment_and_arts", "science_and_environment", "technology", "education");
var newsURL = "http://daily.adamscarter.co.uk/proxy.php?url=http://feeds.bbci.co.uk/news/" + categories[categoryNumber] + "/rss.xml";


and in your ajax call


$.ajax({
url: newsURL,
dataType: "xml",
success: function(xml) {
$(xml).find("item").each(function(){
var eachItem = $(this);
console.log(eachItem)
});
}
});

Adam_C
12-18-2010, 10:40 PM
could you please explain what is happening in this code? sorry to be a pain in the ass.

also, how do you load multiple functions when the page loads?

Adam_C
12-19-2010, 10:20 PM
I still cannot get the loadNews function to work, with the parameter of 'categoryNews', as I am trying to convert it to jQuery.

$(document).ready(function(){
var newsURL = "http://daily.adamscarter.co.uk/proxy.php?url=http://feeds.bbci.co.uk/news/world/rss.xml";

console.log("AJAX");

$.ajax({
url: newsURL,
dataType: "xml",
success: function loadNews(categoryNumber) {
var categoryNumber;

var categories = new Array("world", "business", "politics", "health", "uk", "entertainment_and_arts", "science_and_environment", "technology", "education");
var newsURL = "http://daily.adamscarter.co.uk/proxy.php?url=http://feeds.bbci.co.uk/news/" + categories[categoryNumber] + "/rss.xml";

var newsItems = loadNews(0).query.results.item;
//var newsItems = data.query.results.item;

console.log(newsItems);

//Load and set mainheadlines
var tmpMainheadlines = "<a href='" + newsItems[0].link + "'><div id='newsMainHeadlineImage' style='background-image:url(" + ");'></div><div id='newsMainHeadlineHeadline'>" + newsItems[0].title + "</div></a>";
$("#newsMainHeadline")[0].innerHTML += tmpMainheadlines;

//Load and set subheadlines
for (var i = 1; i <= 6; i++){
var tmpSubheadlines = '<h3><a href="' + newsItems[i].link + '">' + newsItems[i].title + '</a></h3>';
$(".newsSubHeadline")[i].innerHTML += tmpSubheadlines;
}
}
});
});


for the full code you cand view the source code here: http://daily.adamscarter.co.uk/

note, it is on line 124 (at the end of 'columnOne' div id).

thanks in advance.

ranjan
12-21-2010, 12:15 AM
http://ranjandatta.com/whims/bbcnews.html

this is how I would do it

notes:
1. i used yql as proxy to generate xml, you can use your own proxy (commented in code)

2. i did not use array for category, i used html5 data attribute instead.

I cannot test your code since I am blocked against accessing your proxy(cross domain ajax policy)

Adam_C
12-21-2010, 12:50 AM
Thanks so much! It works perfectly :D