Question

I am using the following javascript to detect when a field is changed:

<script type="text/javascript">
    $(document).ready(function () {
        $("select[id^='Status_'], input[id^='Position_']").change(function (e) {
            var type = $(this).attr('id').split('_')[0];
            updateField('Account', $(this), type);
        });
    });
</script>

This then calls the following to updata data in the database:

function updateField(entity, obj, type) {
    var val = obj.val();
    var idArr = obj.attr("id");
    var idTmp = idArr.split("_");
    var id = idTmp[1];
    var pk = $('#Meta_PartitionKey').val();
    var rk = $("div[id='rk_" + id + "']").html();
    $.ajax({
        cache: false,
        url: "/Administration/" + entity + "s/Update",
        data: {
            pk: pk,
            rk: rk,
            fld: type,
            val: val
        }
    });
};

Is there some way that I could provide a visual clue to the user that the update is taking place. Something like changing the cursor and then changing it back.

Also how can I give a message to show if the update failed to my users?

Answer 1

Use this:

function updateField(entity, obj, type) {
    var val = obj.val();
    var idArr = obj.attr("id");
    var idTmp = idArr.split("_");
    var id = idTmp[1];
    var pk = $('#Meta_PartitionKey').val();
    var rk = $("div[id='rk_" + id + "']").html();
    enableLoadingIcon();
    $.ajax({
        cache: false,
        url: "/Administration/" + entity + "s/Update",
        data: {
            pk: pk,
            rk: rk,
            fld: type,
            val: val
        },
        success: function()
        {
            disableLoadingIcon();
        }
    });
};

And then implement the two functions enableLoading and disableLoading to show a loading icon or anything.

For example implement css styled to change the cursor for the whole body:

body.ajaxloading {
    cursor:wait;
}

See here for examples: http://www.w3schools.com/cssref/pr_class_cursor.asp

And then implement the functions like this:

function enableLoadingIcon() {
    $(body).addClass('ajaxloading');
}
function disableLoadingIcon() {
    $(body).addClass('ajaxloading');
}