Question

It would appear that ajaxStart in my MVC 3 project is working but not ajaxStop or ajaxComplete. The problem is not browser specific as I’ve tested this in IE9, Mozilla and Chrome.

My project is just taking a series of letters and finding the combinations/permutations and displaying them to the user. The ajax function is initiated, the ajaxStart is fired and the “please wait” indicator appears. When the ajax call is complete (I would assume) the table is populated but the ajaxStop/ajaxComplete is never fired and the “please wait” indicator never goes away.

Here’s the javascript I use:

$(document).ready(function () {
    $(document).ajaxStart(function () {
        $('#ajaxBackground').show();
        $('#ajaxProgress').show();
    });

    $(document).ajaxStop(function () {
        $('#ajaxBackground').hide();
        $('#ajaxProgress').hide();
    });

    $('#submit').click(function () {
        var p = $('#prefix').val();
        var l = $('#letters').val();
        var s = $('#suffix').val();

        $.ajax({
            url: '@Url.Action("Search", "Home")',
            type: 'POST',
            dataType: 'json',
            data: { prefix: p, letters: l, suffix: s },
            success: function (jsonresults) {
                $('#searchResults').find('tr').remove().end();
                for (var i = 0; i <= jsonresults.length; i++) {
                    $('#searchResults').append('<tr><td>' + jsonresults[i].word + '</td><td>' + jsonresults[i].length + '</td><td>' + jsonresults[i].score + '</td></tr>');
                }
            },
            error: function () {
                alert('error');
            }
        });
    });
});

Is there something I missed. Any help would be greatly appreciated. Thanks.

Answer 1

Normally this should work. I suspect that your #submit is either a form submit button or an anchor. You have subscribed to the click event of this element which is where you fire the AJAX request. But you do not cancel the default action of this element because you didn’t return false at the end of your function. So your AJAX request is trigerred and then the browser is redirected away and doesn’t have time to finish the processing of this AJAX request.

So try returning false just after the $.ajax function.