making javascript block from execution

[tony waria]

I'm having trouble finding a way to get javascript block from execution.

I have a html form where a user enters email and password

I want to do basic validation in javascript
(1) email is entered
(2) password is entered

If both are not NULL then I call ajax (jquery - model) make a call to backend php to validate if the email and password is correct - During this period of time - I want the javascript to block from further execution.

Once the response comes from backend php, I want to unblock javascript.

Also, I want a timeout - incase backend php doesn't respond - so that I can throw a message - "server is busy. please try again later"

Could someone tell me how this can be achieved using javascript, jquery.

Much thanks in advance.
Tony

[Jyoti Ballabh]

One of the methods would be to block script execution by using a loop, which will also lock up the browser and prevent any interaction with your web page. You could write simple codes in narrative javascript.

username/ password.onload = new EventNotifier();
username/ password.onload.wait->();

Once you preprocess it you get the pure javascript.

[Jyoti Ballabh]

The whole point is that you do not want to block script execution completely, as that could make the browser slow down, or even alert the user that a script is taking too long to execute. You could 'linearize' your code by using events to finish work. You will need to add a time out to the function, as the password may never load.

var _password = null; 
var _passwordDelay = 0;
var _finished = false;

function startWork(){
   _password = document.createElement('password');
   _password.onload = onPasswordLoaded;
   _password.src = 'yourpassword.png';

   // append password tag to parent element here

   // this is a time out function in case the password never loads,
   // or the onload event never fires (which can happen in some browsers) 
   passwordTimeout();   
}

function passwordTimeout(){
   if (_password.complete){
      // password is really done loading
      finishWork();
   }
   else{
      // calls recursively waiting for the img to load
      // increasing the wait time with each call, up to 12s
      _passwordDelay += 3000;

      if (_passowrdDelay <= 12000){ // waits up to 30 seconds
         setTimeout(passwordTimeout, _passwordDelay);
      }
      else{
         // password never loaded, recover here.
      }
   }
}

function onPasswordLoaded(){
   finishWork();
}

function finishWork(){
   if (!_finished){
      // continue here
      _finished = true;
   }
}

[iohos]

@ Spettro- ok, for time being let's forget about all this javascript blocking and password/ email validation. Let's say I have this entirely different problem where I have execute a piece of code, where I start to upload an image and while it's being done block the script execution and the image is fully loaded resume the execution. Then I go on to finish executing the rest of the code. I know the first thing that you might say is the best approach would be to assign a function on the onload event of the image and then execute the rest of the code in the function, but if it's possible I want to have a "linear" behaviour blocking the script execution and then resume it. What would you recommend?

[Jyoti Ballabh]

I would say follow the same approach as I had listed earlier. The function related to image and video upload could have applications but again do not lay so much stress on the "linearity" of the script or using the narrative javascript. After all, it's only a small extension to the JavaScript language that enables blocking capabilities for asynchronous event callbacks.

[gits]

except with using syncronous calls it is useless to try to make a 'linear' code execution with 'non-linear' behaving async requests. the only and useful way to make use of ajax-calls is to use its events with associated callbacks. by just blocking some execution you could even make sync calls - and when that really is to be used ... then use them sync instead of creating a probably unreliable and overhead-creating logic for something that is much easier done with just a sync call - but as i said already: async usage is much to prefer and when you use async requests - the code is non-linear - at least written - chaining everything correctly through the event-chain will make it linear ... that is the real purpose of the thing called AJAX ...

[Frinavale]

I might be wrong here but isn't @tony waria looking for a modular control that blocks access to the page while the page is processing?

This would force the user to wait while Ajax calls (or full post-back requests)are occurring...ess entially informing the user that processing is taking place and forcing them to wait before doing something else.

This is pretty easy to achieve and can be used very nicely when Ajax calls are involved.

If this is what you're looking for, say so and I can elaborate.


Aside: @iohos who is Spettro?????

-Frinny

[iohos]

Spettro is JB's nickname. I am sorry, I shouldn't have used it here. I just do it out of compulsiveness.