Modal Dialogs in Sequential Code

Unlike the complicated rewrite required when you want to insert a lightbox into the middle of a loop, the changes that need to be made to your code to insert the call into the middle of a function where the statements need to run sequentially is a lot less complicated. In fact the changes required are simple enough that we can actually get JavaScript to make them for us so that we don't have to.

The working example of my modal dialog / lightbox script contains three statements that update part of the content of the page to represent the rest of the code in the function that we want to insert two custom alert dialogs into. The code in the sample function actually looks like this:

afunc = function() {
  document.getElementById('text').innerHTML = 'first message';
  alert('one');
  document.getElementById('text').innerHTML = 'message the second';
  alert('two');
  document.getElementById('text').innerHTML = 'last message';
}
afunc();

Of course with the custom alert lightbox the page uses to display the alerts the code can't actually run like that as the statements after the alert('one') call would not wait for the alert to return before they run. The built in debugging alert dialog would wait but we are not using that one here, we have overridden the built in alert call with our own custom version.

The code for the custom alert uses my modal dialog / lightbox script to display a custom lightbox defined as follows:

JavaScript

The alert function there overwrites the one built into JavaScript with one that takes two parameters instead of one. The second parameter is needed to tell the script what function it should run after the OK button in the dialog is pressed and all of the code after each call to alert() needs to be moved into that function so that the alert call is the last statement in the current process. The alert is set up to return without actually displaying anything if the second parameter is omitted.

I haven't rewritten the function to split it into the three that would be needed to allow the custom alert to function that way though. I have only added one extra statement in between defining the function that calls the alerts and the statement that calls that function:

afunc = function() {
  document.getElementById('text').innerHTML = 'first message';
  alert('one');
  document.getElementById('text').innerHTML = 'message the second';
  alert('two');
  document.getElementById('text').innerHTML = 'last message';
}
afunc.allowAlert('afunc');
afunc();

What this extra statement does is to rewrite the function for us so that we don't have to. The allowAlert() method can be run on any function containing alert statements that occur in sequential code to rewrite it into multiple functions for you. You can have loops between the alerts just as long as there are no alerts inside of loops and simply by using the above code that defines a custom alert box you can replace the debugging alert statements that shouldn't be used in live code due to the additional options for turning off JavaScript or the built in dialogs and substitute this lightbox version just by adding to the existing code without having to rewrite the functions that contain the alerts you are replacing.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate