Question

Basically, I have a form that is handled by a CMS which I cannot edit it’s javascript, but I more or less want to add in a “Loading” or “Sending” message to my users. For example.

Currently, the default form once submitted, will append a html success message to a div called ‘success’ once sent, but basically, I want to run a function on the submit button that keeps checking the ‘success’ for anything other than ” and once it isn’t empty, turn off the loading symbol.

Something like this perhaps:

$('#submitBtn').click(function(){
    $('#loadingDiv').show();
    while (!$('#success').html() == ''){
        $('#loadingDiv').hide();
    }
});

Any help would be greatly appreciated. I’m just not quite sure how to write it, I’m not great with jquery or javascript

Answer 1

You may do this with setInterval. Something like this:

$('#submitBtn').click(function(){
    $('#loadingDiv').show();
    var intervalId = setInterval(function() {
        if($('#success').html() != '') {
            clearInterval(intervalId);
            $('#loadingDiv').hide();
        }
    }, 100);
});

while (!$(‘#success’).html() == ”) will freeze all other operations and will last forever.
But still – it is better to double check if you really can’t add some code into success callback. Possibly ajaxComplete may help you.