Question

I am getting a JSON object from a webMethod by the call below and I set some textBox values based on the returned objects attributes.

Problem is, just for a moment my textBoxes are populated but then immidiately they return back to empty.

Do I make a mistake or I cannot make DOM elements modifications within a success function?

Thanks.

   var ajaxCallOptions = {
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "/JQuery/Chapter16-AJAX/PersonWebServices.asmx/GetPerson",
              context:  document.body,
              data: JSONObject,
              dataType: "json",
              success: function(data, textStatus, XMLHttpRequest){
                  var myPerson = data;

                  jQuery("#"+"<%=txtFirstName.ClientID %>").val(myPerson.d.FirstName);
                  jQuery("#"+"<%=txtLastName.ClientID %>").val(myPerson.d.LastName);

              },
              error: function(XMLHttpRequest, textStatus, errorThrown){
                alert('Error: '+textStatus);
              } };

   jQuery.ajax(ajaxCallOptions);

The returned data is:

Additional Note:
{“d”:{“__type”:”BusinessObjects.Person”,”FirstName”:”Burak”,”Id”:”001″,”LastName”:”Ozdogan”,”Department”:”Information Technologies”}}

and this is a function which is bound to click event in the form:

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

Answer 1

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.