How to submit form via jQuery and refresh PartialView

Question

Stackoverflow does it so well, submit a comment and it gets refreshed on the screen using jQuery. How is it done?

I was dissecting the code to learn.

Looks like it is happening here: in the html below, the link click event is bound by jQuery to load a textarea to a dynamic form. How is the submit button wired and how is the data sent to the server?

<div class="post-comments">
    <div id="comments-1122543" class="display-none comments-container">
        <div class="comments">                
        </div>        
        <form id="form-comments-1122543" class="post-comments"></form>        
    </div>    
    <a id="comments-link-1122543" class="comments-link" title="add a comment to this post">add comment</a>
</div>

and the javascript:

var j = function (s, v) {
    var r = $("#form-comments-" + s);
    if (r.length > 0) {
        var u = '<table><tr><td><textarea name="comment" cols="68" rows="3" maxlength="' + q;
        u += '" onblur="comments.updateTextCounter(this)" ';
        u += 'onfocus="comments.updateTextCounter(this)" onkeyup="comments.updateTextCounter(this)"></textarea>';
        u += '<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>';
        u += '<span class="form-error"></span></td></tr></table>';
        r.append(u);
        r.validate({
            rules: {
                comment: {
                    required: true,
                    minlength: 15
                }
            },
            errorElement: "span",
            errorClass: "form-error",
            errorPlacement: function (y, z) {
                var A = z.parents("form").find("span.form-error");
                A.replaceWith(y)
            },
            submitHandler: function (y) {
                disableSubmitButton($(y));
                g(s, $(y))
            }
        });
        var t = $("#comments-" + s + " tr.comment:first td.comment-actions").width() || -1;
        t += 9;
        r.children("table").css("margin-left", t + "px")
    } else {
        var w = "no-posting-msg-" + s;
        if ($("#" + w).length == 0) {
            var x = $("#can-post-comments-msg-" + s).val();
            v.append('<div id="' + w + '" style="color:maroon">' + x + "</span>")
        }
    }
};

Answer 1

You can use AJAX to send the form to the server and easily update the contents of the page with JavaScript.

If you are using jQuery there is a method for sending forms using HTTP POST method as well as method to serialize the form data:

$.post('/url', $('#formId').serialize(), function () {
    // do something after submiting the form i.e. update current page layout
});

Answer 2

This is how I ended up replicating the functionality;

<div id="issueComments">
<% Html.RenderPartial("CommentHistory", Model.Comments); %>
<a id="comments-link-<%= Html.Encode(Model.Issue.IssueId) %>" class="comments-link" title="add a comment to this issue">Add comment</a>
<div id="issue-comment-form">
<form id="form-comments-<%= Html.Encode(Model.Issue.IssueId) %>" class="post-comments" method="post">
<table><tr><td><textarea class="wmd-ignore" name="comment" cols="68" rows="3" id="form-comment-<%= Html.Encode(Model.Issue.IssueId) %>"></textarea>
<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>
<span class="form-error"></span></td></tr></table>
</form></div>
</div>

The jQuery

<script type="text/javascript">
$("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>").submit(function(evt) {
   var frm = $("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>");
   evt.preventDefault();
   var action = frm.attr("action");
   var serializedForm = frm.serialize();
   var comments = jQuery.trim($("#form-comment-<%= Html.Encode(Model.Issue.IssueId) %>").val());
     if (comments.length < 1)
        return;
      // POST HERE
   $.ajax({
       type: "POST",
       url: "/Issue/" + "SaveIssueComment",
       dataType: "html",
       data: {
         comment: comments,
         issueId: issueId
        },
       success: function(v) {
       $("div#issueComments").html(v);                
        },
       error: function(v, x, w) {
        //Error
        }
     });
    });
</script>