• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2232
  • Last Modified:

JS not waiting for prototype Ajax.Request to complete before proceeding

I am using prototype.js for this process.

I have a script that check a login form and uses JS to go check the form be for submitting. Code below. Problem is the script id not waiting for the result of the Ajax before proceeding so JS returns true before the Ajax request is even finished. In my test code below I get the alert with "HERE" before I get the result form the Ajax. How can I set my tell my script to wait for the result from Ajax.Request?


function check_login(me) {
      var email = $F('loginEmail');
      var password = $F('loginPasswd');
      if(email=='') {
            alert('You must enter a your email address to sign up.');
            return false;
      } else if(password=='') {
            alert('You must enter a your password to sign up.');
            return false;
      } else {
            new Ajax.Request("/ajax/login.php", {
                  method: 'post',
                  parameters: { email: email, passwd: password },
                  afterFinish: function(transport) {
                        var data = transport.responseText;
                        if(data==0) {
                              alert('zero');
                              $('loginError').update('Your email and password are not in our system.');
                              new Effect.Shake($('loginForm'));
                              return false;
                        } else {
                              alert('passed?');
                              return false;                        
                        }
                  }
            });
            alert("HERE");
      }
}


Thanks!
0
td234
Asked:
td234
  • 4
  • 3
1 Solution
 
basicinstinctCommented:
Asynchronous puts the 'A' in AJAX - that's why it's not waiting.

in your ajax request add this:

asynchronous: false,

           new Ajax.Request("/ajax/login.php", {
                  method: 'post',
                  asynchronous: false,
                  ...

Further reading here under "The asynchronous Property":
http://www.wrox.com/WileyCDA/Section/id-306214.html
0
 
td234Author Commented:
I tried your suggestion in my sample above and it did not work. I still get the HERE alert before anything else.
0
 
basicinstinctCommented:
have a look at this:

"The asynchronous Property":
http://www.wrox.com/WileyCDA/Section/id-306214.html
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
td234Author Commented:
Dude, I hear you. I agree that sure sounds like the solution. But it does not work. I added it to the JS and it still submits the form before one of the test alerts are called. I get the test alert HERE immediately, so the script is getting past the "new Ajax.Request" long before it is processed.


0
 
basicinstinctCommented:
one thing that often makes ajax behave strangely is if you run your test page under the 'file:' protocol, ie if you are running it off your local filesystem rather than a webserver...

if you are running off filesystem then try again on a webserver...
0
 
td234Author Commented:
I am running this off the server.
0
 
basicinstinctCommented:
what about using onSuccess: or onComplete: instead of afterFinish:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now