How to pause a script whilst the XML loads

[Techno~]

I'm trying to create a class that gets instantiated and then loads
variables from an xml file.

The problem is that that the subsequent code executes before the xml
has loaded. My code probably explains it better than me.

var Quiz = Class.create({
initialize: function() {
this.module = '';
this.unitTitle = '';
this.unitNum = '';
this.totalQuestions = '';
this.title = '';
},

loadData: function(xmlInput) {

if (xmlInput==undefined) {
alert('No quiz specified\n Unable to load quiz data.');
return;
} else {
targetXML = 'quizzes\/' + xmlInput + '.xml?cb=' + (new
Date()).getTime() ;
}

new Ajax.Request(targetXML, {
onSuccess: function(transport) {
alert('in here')
quizJSON = xml2json.parser(transport.responseText);
this.module = quizJSON.quiz.module;
this.unitTitle = quizJSON.quiz.unittitle;
this.unitNum = quizJSON.quiz.questions.count;
this.totalQuestions = quizJSON.quiz.questions.count;
this.title = quizJSON.quiz.title;
},
onFailure: function() {
alert('Unable to load quiz data')
}
});
}
});

this function gets called from the onLoad event of the page:

function loadQuiz(xml) {
var quiz = new Quiz();
quiz.loadData(xml);
alert ('title:' + quiz.title);
}

I get two alerts the first reads 'title:' and then after that I get
the 'in here'.

Is it possible to make the loadQuiz() function wait until .loadData()
method has finished loading the data?

Thanks,
Techno~

[GarethAtFlignet]

you could make the ajax call synchronous so that javascript waits
until the request has been completed.

new Ajax.Request(targetXML, {
asynchronous: false,

onSuccess: function(transport) {
alert('in here')
quizJSON =
xml2json.parser(transport.responseText);
this.module = quizJSON.quiz.module;
this.unitTitle = quizJSON.quiz.unittitle;
this.unitNum = quizJSON.quiz.questions.count;
this.totalQuestions =
quizJSON.quiz.questions.count;
this.title = quizJSON.quiz.title;
},
onFailure: function() {
alert('Unable to load quiz data')
}
});

Alternatively, get the onSuccess method to call a method to perform
the output so that it happens after the XML is returned. I guess it
depends on what you are trying to achieve. If you want things to
happen in serial then the "asynchronous: false" should be fine.

Best Regards
Gareth

[Techno~]

Gareth

Thanks very much - yep the asynchronous: false works fine as the data
load is pretty small.



On Feb 21, 8:50 am, GarethAtFlignet <garethinwa...@googlemail.com>
wrote:

[Techno~]

Ok - you probably saw this one coming how do I pass the values back to
the defining class?

Because as it stands 'this.module' of the loadData method is a
property of the Ajax.Request but I want to reference the 'this.module'
defined in the initailise method.

Sorry if these are really stupid questions but this is all very new to
me.

TIA

[GarethAtFlignet]

use bind(this) on your anonymous functions.

loadData: function(xmlInput) {
...
...

new Ajax.Request(targetXML, {
...
asynchronous: false,
onSuccess: function() {
...
}.bind(this),
onFailure: function() {
...
}.bind(this)
});

[Techno~]

thankyou thankyou thankyou

On Feb 21, 2:28 pm, GarethAtFlignet <garethinwa...@googlemail.com>
wrote: