Loading a loadable javascript image when making an ajax call

Question

I created a page using jQuery, which uses an asynchronous Ajax call. I am trying to show the gid of the download, but for the life of me I cannot get it to work. The gif is never displayed. Any ideas?

function updateCityList(state) {
        $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
        $.ajax(
            {
                type: "GET",
                async: true,
                url: "/NPA/GetCities/" + state,
                dataType: "json",
                success: function(optionData) {
                    var options = [];
                    $(optionData).each(function(index, optionData) {
                        if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                            options.push(optionData);
                    });
                    $("#cityList").fillSelect(options);
                }
            });
        $("#city-loading").empty();
    };

Answer 1

Your call $.ajax()cancels the request and then continues immediately because you are making an asynchronous call. Consequently, the call $("#city-loading").empty();occurs immediately.

You need to move $("#city-loading").empty();to the end of the function success:so that it is not called until the AJAX request completes.

Answer 2

first you call:

$("#city-loading").empty().html('<img src="/Images/loading.gif" />');

ajax, :

$("#city-loading").empty();

ajax:

function updateCityList(state) {
    $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
    $.ajax(
        {
            type: "GET",
            async: true,
            url: "/NPA/GetCities/" + state,
            dataType: "json",
            success: function(optionData) {
                $("#city-loading").empty();
                var options = [];
                $(optionData).each(function(index, optionData) {
                    if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                        options.push(optionData);
                });
                $("#cityList").fillSelect(options);
            }
        });
};

Answer 3

. HTML DOM (img src). DOM , Javascript. , ajax, .

- . , DOM. ( id , , , ). ajax.

, .