Ajax.Request onComplete

[Sebarry]

Hi,

I have a Javascript function that creates an Ajax Request object in order to retrieve data from a database using a PHP script. The Javascript function is invoked by another Javascript function and should return to the caller only once the request is complete. Currently the function that creates the Ajax.Request object returns to the caller then initiates the request.

Maybe it's easier to understand with a code sample.

function called()
{
      new Ajax.Request( readDatabase.php', {
             method: 'get',
             parameters: 'primaryKey=' + primaryKey,
             onComplete: function( transport ){
 
                 xmlDoc = transport.responseXML;
                 ...
                 ...
             }
       });
 
      alert( "Returning from called function" );
}
 
function caller()
{
      called();
      alert( "Returned to caller" );
}
 

Whilst onComplete ensures that the code that processes data returned from the data must wait I really want the called function to only return to the caller function when it is complete. The caller function carries out further processing on the database data and can only do that when the called function completes the Ajax Request.

Hope that's clear.

Thanks,

Sean

[acoder]

You posted in the Articles section. Moved to Forums section.

[acoder]

Either put that functionality into the function that you call onComplete, or use a synchronous (as opposed to an asynchronous) request. The first option is obviously better because the second option would freeze the browser until the processing is complete.

[Sebarry]

Hi,

Yes I was thinking it would have to be synchronous because the code that it goes off to execute (whilst its waiting) is in another function for a reason. I don't to duplicate or move the code there because the function is invoked independently of the function with the Ajax.Request.

Cheers,

Sean

Either put that functionality into the function that you call onComplete, or use a synchronous (as opposed to an asynchronous) request. The first option is obviously better because the second option would freeze the browser until the processing is complete.

[pbmods]

Heya, Sean.

In this situation, it looks like you'll want to make your XMLHttpRequest synchronous.

You could do this, though outside of the context of your example, I don't know if it would work:

function called(callback)
{
    new Ajax.Request( readDatabase.php', {
         method: 'get',
         parameters: 'primaryKey=' + primaryKey,
         onComplete: function( transport ){
 
             xmlDoc = transport.responseXML;
             ...
             ...
             callback(xmlDoc);
         }
     });
 
    alert( "Returning from called function" );
}
 
function caller()
{
    called(
        function()
        {
            alert( "Returned to caller" );
        }
    );
}
 

[Sebarry]

Hi, I think you're right. I've coded around it at the moment, but it's a bit of a fudge. In your code sample what is the callback function you refer to? I tried setting options in the Ajax.Request to asynchronous = false but that doesn't seem to work. Also people have said that synchronous mode doesn't work in Firefox and can cause browsers to hang indefinately.

Heya, Sean.

In this situation, it looks like you'll want to make your XMLHttpRequest synchronous.

You could do this, though outside of the context of your example, I don't know if it would work:

function called(callback)
{
    new Ajax.Request( readDatabase.php', {
         method: 'get',
         parameters: 'primaryKey=' + primaryKey,
         onComplete: function( transport ){
 
             xmlDoc = transport.responseXML;
             ...
             ...
             callback(xmlDoc);
         }
     });
 
    alert( "Returning from called function" );
}
 
function caller()
{
    called(
        function()
        {
            alert( "Returned to caller" );
        }
    );
}
 

[pbmods]

Heya, Sean.

The callback is passed as an anonymous function to called() inside of caller().

[acoder]

I tried setting options in the Ajax.Request to asynchronous = false but that doesn't seem to work. Also people have said that synchronous mode doesn't work in Firefox and can cause browsers to hang indefinately.

Ajax.Request must be a library function call or something. What are you using for Ajax? As for the synchronous mode causing problems, that can obviously happen. If it is likely to happen, don't use Ajax. You could also consider using a progress image or show a div indicating to the user that something is happening.