Refresh PartialView via jQuery following Ajax Post

Question

Does anyone have the special sauce for following a jQuery Form ajax post to a controller method forcing a refresh to a PartialView existing on the same page? Does that involve bringing partial HTML back and appending or can I simply somehow cause that PartialView to refresh magically?

Thanks in advance. Doug

Here is my RenderPartial with the form below....want to refresh the RenderPartial from my ajax call below this...

    <% Html.RenderPartial("p_Offers", Model.Offers); %>

<h2>Make an Offer</h2>
<form id="makeOffer" action="/post/makeoffer/<%=Model.Id %>" method="post">
    <div class="grid_2 alpha"><label>Comment</label></div>
    <div class="grid_6 omega"><%= Html.TextBox("Comment")%></div>

    <div class="grid_2 alpha"><label>Payment Terms</label></div>
    <div class="grid_6 omega"><%= Html.TextArea("PaymentTerms")%></div>

    <div class="grid_2 alpha"><label>Amount</label></div>
    <div class="grid_6 omega"><%= Html.TextBox("Amount")%></div>

    <div class="prefix_2">
        <label>Tentative <input type="radio" checked="checked" name="Confirmed" value="Tentative" /></label>
        <label>Confirmed <input type="radio" name="Confirmed" value="Confirmed" /></label>
    </div>

    <div class="prefix_2">
        <input type="submit" value="Make Offer" />
    </div>
</form>

here is the ajax call....

        $(document).ready(function() {
        $('#makeOffer').ajaxForm(function() {
            var f = $("#makeOffer");
            var action = f.attr("#action");
            var serializedform = f.serialize();
            $.post(action,
                serializedform,
                function() {
                    alert("post error");
                });
            // TODO want to refresh Offers partial view  
            return false;
        });

        jQuery().ajaxStart(function() {
            $("#makeOffer").fadeOut("slow");
        });

        jQuery().ajaxStop(function() {
            $("#makeOffer").fadeIn("fast");
        });

Answer 1

If you wrap the partial view in a div and return the partial view markup you can simply use the .post callback to replace/append the new markup.

Note the following replaces the whole partial markup. You can easily change this to use .append() if that is what you want.

$.post(action,
       serializedform,
       function(html) {
          $('#viewWrapperDiv').html( html ); 
          //$('#viewWrapperDiv').append( html ); 
       }
);