0

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?

Sanfly
  • 1,021
  • 1
  • 11
  • 19

2 Answers2

0

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.

nurdyguy
  • 2,876
  • 3
  • 25
  • 32
  • This is what I have ended up doing, however I have an issue where if someone is using a cookie/add blocker it never gets to the point in the script where I call the 'hide' function... so working on that now :) – Sanfly Aug 05 '15 at 19:48
  • Are you putting the .hide inside of the success portion or the complete portion? – nurdyguy Aug 05 '15 at 19:51
  • Yes, there is actually 3 different positions where the JS goes depending on the data that is returned in the Web Data Lookup. I've started a new question to try and figure this out: http://stackoverflow.com/questions/31841759/modify-javascript-to-detect-when-eloqua-js-file-fails-to-load – Sanfly Aug 05 '15 at 20:01
  • I'd recommend placing the .hide inside the complete phase. The reason is that no matter what happens, the complete gets run last (even if there is an error). That way the .hide always runs (unless there is an actual js error thrown which will completely interrupt all js). – nurdyguy Aug 05 '15 at 20:06
0

When the page loads you can have the submit button be disabled. This still allows the user to start entering data into the form, but prevents them from submitting until the page finishes loading.

$('.button-class').prop("disabled", true);
$('.button-class').prop("value", "Loading...");

Then if you have some sort of a callback when all of the background data finished loading, call

$('.button-class').prop("disabled", false);
$('.button-class').prop("value", "Submit");
Mike G
  • 668
  • 1
  • 6
  • 17