Asp net mvc and javascript response

I had a javascript that needs to do two things: 1. Send data to be updated in database 2. Update my html form place in show mode. 3. Update the row of my table to reflect updated data.

My javascript do only 1 and 2:

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    // I need to do something here to update the html table row...
    return false;
});

I think that a solution is to call another action that will render only the table row elements. How can I do this?

--

The table row was created something like this:

<tr id="h62">
  <td>Ford</td>
  <td>Focus</td>
</tr>

where 62 is the "id" of this record.

---

Working code, but ugly:

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    var handle = $(".form-edit #Handle开发者_如何学C")[0].value;
    var itemLink = this.attributes["edititem"].value;
    var row = $("#grid #h" + handle);

    $.post(this.href,
        sf,
        function (response) {
            $("#form-edit").html(response);
            $.get(itemLink,
                sf,
                function (response) {
                    row.replaceWith(response);
                });
        });

    return false;
});

---

You need to do something like this:

$(".form-commands .save").live("click", function (evt) {
    //Capture the jQuery event object and call preventDefault() to stop the default click action
    evt.preventDefault();
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    //UPDATE THE ROWS
    $('#h62 td:eq(0)').text(newVehicleMakeName);
    $('#h62 td:eq(1)').text(newVehicleModelName);
});

I am not sure from your code where the vehicle data is coming from. If you are passing it back from your controller then you will need to move this line into your success callback.

Also, you should generally never return false, you should capture the jQuery event as a param and call preventDefault(). If your click handler uses return false to prevent browser navigation, it opens the possibility that the interpreter will not reach the return statement and the browser will proceed to execute the anchor tag's default behavior. This is what was causing your problem, not because you were using click vs submit. The benefit to using event.preventDefault() is that you can add this as the first line in the handler, thereby guaranteeing that the anchor's default behavior will not fire.

---

Well I would just reload the page or recall the ajax routine (whichever is applicable) to reload the data, there is no straightforward method to do this. In fact I was not aware of the method you used (f.html(response)), i am still skeptical about that solution :)

Well, if you really just want to update that single row:

1) You need to know to know the updated row's id in your javascript code. This value is "h62" (without quotes) in this example.

2) Give class names to your TDs, e.g.

<tr id="h62">
    <td class="brand">Ford</td>
    <td class="model">Focus</td>
</tr>

3) Update using jquery. Let's say you hold the id of the row in a variable named "rowId":

$('#'+rowId).find('.brand').html(response.brand);
$('#'+rowId).find('.model').html(response.model);

This will conclude the process.