Disable ajax form button on key press

Question

I have a button on an Ajax form that when pressed, indicates to the user that it is "searching" kind of a small "throbber" to keep the user occupied while the DB is being queried.

When the submit button is clicked it goes to a function. That function will disable the button, gather up what is filled out on the form, perform the Ajax call (non-asynchronous - meaning the script is to WAIT on the call to complete before moving on to the next line of code) and then re-enable the button.

Like so:

function CheckForm()
{
    disableButton(document.getElementById("save"));


    ....... lots of instructions in here ........
    ....... Loops through every form el .........


    //Ajax called
    CallAjax(sUrls, sParams);

    enableButton(document.getElementById("save"));

}


function disableButton(element)
{
    try
    {
        disabledEl = element.id
        disabledElOrigTxt = element.value;
        element.value = '    Loading...'

        addClass(element, "pleaseWait");
        addClass(document.myForm.reset, "resetWait");

        element.disabled = true;
        document.myForm.reset.disabled = true;

        //return true;
    }
    catch(e)
    {
        ////SHHHHHH
    }   
} 

function enableButton(element, timer)
{
    try
    {
        if(element.value == '  Loading...')
            element.value = disabledElOrigTxt;  

        removeClass(element, "pleaseWait");
        removeClass(document.myForm.reset, "resetWait");
        element.disabled = false;
        document.myForm.reset.disabled = false;
        clearTimeout(timer);
        return true;
    }
    catch(e)
    {
         ////SHHHHHH
    }
}


function hasClass(element, className)
{
    var classes = element.className.split(' ');
    var len = classes.length;
    for (var i=0; i<len; i++) 
    {
    if (classes[i] == className)
        return true;
    }
    return false;
}

function addClass(element, className)
{
    if (!hasClass(element, className))
        element.className = (element.className == '' ? className : element.className + ' ' + className);
}

function removeClass(element, className)
{
    var newValue = '';
    var classes = element.className.split(' ');
    var len = classes.length;
    for (var i=0; i<len; i++)
    {
    if (classes[i] != className)
            newValue += newValue.length ? ' ' + classes[i] : classes[i];
    }
    element.className = newValue;
}

This works in Mozilla, IE, but NOT CHROME. Anyone have any idea why?

If I modify disableButton() and make it alert("hi") on the last line of the try, in Chrome I can observe the button change.... but ONLY if I throw an alert in there to stop the script. Obviously that is not what I want to do.

True, I have revised this, but because it was so different, and now never works, I created a different question here: [link]http://stackoverflow.com/questions/12480768/trying-to-invoke-dimmer-throbber-before-during-ajax[/link] — ManovrareSoft, Sep 18 '12 at 16:07

score 0 · Answer 1 · answered Aug 30 '12 at 21:33

0

Maybe your CallAjax() function works asynchronously in Chrome?

Another possibility, maybe Chrome processes it so fast you don't notice the changes?

answered Aug 30 '12 at 21:33

Gras Double

15,901
8
56
54

I truly believe there is no honoring of the async : false in Chrome. I have observed it branching off in code and continue to process instructions before the response was evaluated. – ManovrareSoft Sep 18 '12 at 17:07

Disable ajax form button on key press

1 Answers1