Question

There seems to be others having similar problems but still not finding an answer. Here is the scenario.

The user clicks a button which shows a hidden div containing a textarea where they can make a comment:

//show the div containing the textarea
$('#postTypeContainer').css({ 'display': 'block' });

Next the user enters a comment and clicks a button to submit and the div is hidden and some data is sent to the server:

$("#loading").ajaxStart(function () {
        $(this).show(); //shows a spinner
    }).ajaxComplete(function () {
        $(this).hide(); //hides the spinner

        //hide the div that was opened earlier
        $('#postTypeContainer').fadeOut('fast');
    });

    //send data
    $.ajax({
        type: "POST",
        url: rootUri + "main.aspx/StartNewThread",
        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (markUp) {
           //stuff
        }
    });

This all works as it should.

Now the user opens the div again via a click which works just fine

//show the div containing the textarea
$('#postTypeContainer').css({ 'display': 'block' });

Next the user types some data, in this case an @abc because they want to tag another user and the following occurs using jQuery on ‘keyup’:

//ajax call to find users matching the @abc
$.ajax({
        type: "POST",
        url: rootUri + "main.aspx/GetMatch",
        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {

            //stuff

        }
    });

As soon as this ajax call returns the div that was opened is closed as if the DOM is being reset to what it was prior to the ajax call. So in the middle of trying to interact with the textarea, the div closes on the user which is very frustrating. The only way to fix this is to refresh the page which is obviously what I want to avoid by using ajax. Hoping someone has an idea of what’s wrong. The one thing I have tried unsuccessfully is when entering the function on keyup that makes the ajax call for tagging, I check the state of the div and then try to set it at the end of the ajax call to keep it open but that is not working. Any help is appreciated.

Answer 1

.ajaxComplete() is a global ajax event, fired every time a jQuery ajax event completes. So when your second ajax call completes it also hides the postTypeContainer div. I think you want to bind that hiding to the local complete event for that first ajax call.

$("#loading").ajaxStart(function () {
    $(this).show(); //shows a spinner
}).ajaxComplete(function () {
    $(this).hide(); //hides the spinner
});

//send data
$.ajax({
    type: "POST",
    url: rootUri + "main.aspx/StartNewThread",
    data: jsonText,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (markUp) {
       //stuff
    },
    complete: function() { // DO IT HERE

        //hide the div that was opened earlier
        $('#postTypeContainer').fadeOut('fast');

    }
});