Question

I execute an ajax function that takes 3 seconds + so in this time I would like the text of the a link (code below, and 1 in image) to change to “Please wait…”. I tried the JavaScript code below but what happens is the text does not change and the function executes as normal. Please if someone could point out my mistake.

HTML :

<a id="emailGarageList" href="javascript:EmailGarageList(347)">Email Garage List...</a>

Screenshot :

Javascript :

function EmailGarageList(fId) {
    $('#emailGarageList').text('Please wait...');
    $.ajax({
        type: "POST",
        url: "Default.aspx/EmailGarageList",
        data: "{'fId':" + fId + ",'userId':" + userId + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert("Garage List Emailed!");
        },
        error: function () {
            alert("Error :(");
        }
    });
    $('#emailGarageList').text('Email Garage List...');
};

Answer 1

Move $('#emailGarageList').text('Email Garage List...'); inside $.ajax call back function. $.ajax is an async call and your text below is updated right away before completing the ajax call.

function EmailGarageList(fId) {
    $('#emailGarageList').text('Please wait...');
    $.ajax({
        type: "POST",
        url: "Default.aspx/EmailGarageList",
        data: "{'fId':" + fId + ",'userId':" + userId + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert("Garage List Emailed!");
            $('#emailGarageList').text('Email Garage List...');
        },
        error: function () {
            alert("Error :(");
        }
    });    
};