newbee - Opera not reading code from top to bottom, would can I do?

[Gzk2010]

newbee - Opera not reading the below code from top to bottom,would can I do? Basically I am loading in 2 separate files using the $.ajax method, but Opera is the only browser not reading it from top to bottom. I.E. url: "chaps_0_3.xml",
displays out of order not first as it is the first 1 ,atleast from top to bottom in the script, to be displayed. Any suggestions.


$(document).ready(function () {
$.ajax({
type: "GET",
url: "chaps_0_3.xml",
//url: "../../App_Data/MiniChapters/all_of_the_chapters.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('minichapter').each(function () {
var id = $(this).attr('id');
var title = $(this).find('title').text();
var illustrationurl = $(this).find('illustrationurl').text();

$('<div class="title" id="minichapter_' + id + '"></div>').html(title).appendTo('#page-wrap'); //puting up here puts image below the paras
$(this).find('paragraphs').each(function () {
var para1 = $(this).find('para1').text();
var para2 = $(this).find('para2').text();
var para3 = $(this).find('para3').text();
var para4 = $(this).find('para4').text();
var para5 = $(this).find('para5').text();
//putting the image appendTo here line above will not work becuase it is found in the parent xml node
$('<div class="para1"></div>').html(para1).appendTo('#minichapter_' + id);
$('<div class="para2"></div>').html(para2).appendTo('#minichapter_' + id);
$('<div class="para3"></div>').html(para3).appendTo('#minichapter_' + id);
$('<div class="para4"></div>').html(para4).appendTo('#minichapter_' + id);
$('<div class="para5"></div>').html(para5).appendTo('#minichapter_' + id);
if (illustrationurl != "none") {
$('<div class="illustrationurl"></div>').html('<img src="' + illustrationurl + '">').appendTo('#minichapter_' + id);
}

});
});
}
});

//chaps_4_7
$.ajax({
type: "GET",
url: "chaps_4_7.xml",
//url: "../../App_Data/MiniChapters/all_of_the_chapters.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('minichapter').each(function () {
var id = $(this).attr('id');
var title = $(this).find('title').text();
var illustrationurl = $(this).find('illustrationurl').text();

$('<div class="title" id="minichapter_' + id + '"></div>').html(title).appendTo('#page-wrap'); //puting up here puts image below the paras
$(this).find('paragraphs').each(function () {
var para1 = $(this).find('para1').text();
var para2 = $(this).find('para2').text();
var para3 = $(this).find('para3').text();
var para4 = $(this).find('para4').text();
var para5 = $(this).find('para5').text();
//putting the image appendTo here line above will not work becuase it is found in the parent xml node
$('<div class="para1"></div>').html(para1).appendTo('#minichapter_' + id);
$('<div class="para2"></div>').html(para2).appendTo('#minichapter_' + id);
$('<div class="para3"></div>').html(para3).appendTo('#minichapter_' + id);
$('<div class="para4"></div>').html(para4).appendTo('#minichapter_' + id);
$('<div class="para5"></div>').html(para5).appendTo('#minichapter_' + id);
if (illustrationurl != "none") {
$('<div class="illustrationurl"></div>').html('<img src="' + illustrationurl + '">').appendTo('#minichapter_' + id);
}

});
});
}
...
});
</script>

 

[feherke]

Hi

There is absolutely no reason to complete two ( or more ) asynchronous request in the same order they were made.

You can solve it in two ways :
[ul]
[li]Make synchronous requests. See the [tt]async[/tt] property of the [tt]jQuery.ajax()[/tt] method's settings parameter.[/li]
[li]Make the second request from the first request's callback function.[/li]
[/ul]


Feherke.

http://free.rootshell.be/~feherke/