What is the best way to update the UI right after database update (ASP.NET & JQuery)

Question

I have a jQuery ajax service call like the one below, this is called when a user clicks ok on an Edit dialog. The dialog contains a textbox which the user should use to edit the content of a paragraph section on the webform.

//Example of my real call
function testService(test) {
var person = {};
person.ID = 1;
person.name = "Albert";
$.ajax({
    type: "POST",
    url: "WebService1.asmx/HelloWorld",
    dataType: "json",
    data: "{person:" + JSON.stringify(person) + "}",
    contentType: "application/json; charset=utf-8",
    success: function (response) {

    },
    error: function(response) {
        alert(response.d);
    }
});
}

1. So user click's edit button on the web page in order to edit a paragraph on the webform.
2. Dialog opens with the content of the paragraph.
3. User clicks ok to commit changes.
4. Service is called via jQuery ajax call.
5. Changes are committed to the database via the webmethod.

The problem is the webform paragraph section isn't updated with the newly updated value, because I have not carried out a client update.

The question is: what is the best approach in getting the refreshing the client with the newly updated string from the DB. Should I make another web service call to get the value from the DB ? I know that can take a long time and be unnecessary, is there a jQuery trick to doing this? And I only want to refresh that paragraph section, not the whole page

Answer 1

On a POST you should return the complete object you have updated to the client. Then use the response from the server to update the webpage.

With this approch so can the DB be responsible for adding some information to the object like ID creation date etc. And you will have the updated object on the clientside when the POST has succeeded.