How to force DOM modifications done in success function persist within a jQuery.Ajax() call?

Answer 1

I suggest use of FireBug or similar to examine the content being returned by the AJAX call. Failing this, try alerting the data which is returned.

Is the data returned the expected data?

Answer 2

If your $.ajax() is fired via a submit the default behavior is likely happening, and reloading the page.

Use return false; or event.preventDefault() at the end of your submit handler if that is the case.

$('.mySubmitButton').submit(function() {
    // Send ajax request
    return false;
});

or:

$('.mySubmitButton').submit(function( event ) {
    event.preventDefault()
    // Send ajax request
});

This same technique is used for links created from <a href=''> elements when you want to prevent the default behavior, or for any other element that has a default behavior for that matter.

Answer 3

Thanks Patrick.

It worked after this modification:

<asp:Button ID="btnSearch" runat="server" Text="Search" 
OnClientClick="loadPerson($('.personId'), event); return false;"/>