I'm using a marketing automation platform (Eloqua) that uses cookies to track users on our website (or our "microsite" on their website).
On a page for my customers to set their mail preferences they have a javascript "Web Data Lookup" I can use to grab the users cookie, then pull down data from their profile in the database. I then use my own added javascript to then populate the form, and to show and hide certain sections based on their data.
The trouble is the web data lookup is quite slow (particularly on slower connections) and I'm getting a few forms submitted where data is missing because the scripts haven't had time to properly populate.
I'd like to add some JavaScript or jQuery to put up a "loading" or some sort of similar message while all the data loads, forms populate, sections hide/unhide in the background.
Any idea where to start?
There are a couple of different ways to inhibit multiple submits. One is to overlay a semi-transparent layer over the page as soon as the first submit is made, then remove it once the server request returns. You can then add a sort of "loading" animation to this page (an animated gif is easiest but progress bars are another but much more complicated option). This will prevent further "click" based events from occurring. If there are any hotkey mnemonics on the page, remember to disable them.
To do this, create an empty div at the bottom of the page:
<div id="waitOverlay"></div>
You can insert the gif inside here or you can set it using css.
In the css:
#waitOverlay{
display:none;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 500;
}
On submit of the form, before the ajax (or however you are communicating with the server) run
$('#waitOverlay').show();
Then, after the server returns, run
$('#waitOverlay').hide();
This is very similar to creating a light box.