using pjax to submit a form

Question

I have form on my page that has the following code

<form class="form">
    ... bunch of inputs and presentation logic...
    <div>
        <input type="submit" class="btn btn-primary" id="submit_btn" value="Save Part"/>
        <a class="btn" href="/Part/CopyPart/[email protected] ">Copy Part</a>
        <a class="btn" href="/Part/Delete/[email protected]">Delete Part</a>
        <a class="btn" href="/Part/PartList/[email protected]">Return To Part List</a>
    </div>
    @Html.HiddenFor(model => model.ID)
    @Html.HiddenFor(model => model.Manufacturer)
    @Html.HiddenFor(model => model.DateCreated)
    @Html.HiddenFor(model => model.Manufacturer)
    @Html.HiddenFor(model => model.IsActive)
    @Html.HiddenFor(model => model.PartType)
</form>

and I am trying to use pjax() to submit this form and refresh the containing with some results. My js code is as follows.

$(function() {
    $('a').pjax({ container: "#update_panel", timeout: 2000 }).live('click', function() {});
    $("#submit_btn").click(function() {
        var form = $('#form');
        $.pjax({
            container: "#update_panel", 
            timeout: 2000,
            url: "@Url.Action("UpdatePart","Part")",
            data: form.serialize()
        });
    });
});

This code submits calls my UpdatePart() action but it passes an empty model to the action? How can I populate the model with the form contents so that it all works?

Humiliate

What is $.fn.pjax and $.pjax? – Packaging

It is a jquery push state implementation. Located here github.com/defunkt/jquery-pjax It is awesome for getting a good url and a responsive app, and simple to use to boot. Well I guess except in this case:) – Humiliate

I'm surprised I haven't come across it before, it looks very active. – Packaging

I think it is more popular in the Rails corner of the world... I ran across it on a blog post for the new basecamp and it solved a bunch of my problems simply. – Humiliate

Answer 1

You are referencing form using an Id, but the form has a class and no id. Try:

var form = $(".form");

or

<form id="form">

Packaging

Answer 2

I see in their docs: https://github.com/defunkt/jquery-pjax That they have a simple way to do it:

<div id="pjax-container">
</div>

<form id="myform" pjax-container>
 ... all inputs/submit/buttons etc ....
</form>

<script>
$(document).on('submit', 'form[pjax-container]', function(event) {
  $.pjax.submit(event, '#pjax-container')
})
</script>

I personally didn't see this example before .. maybe it's new/not ... but hope it will help others.

Deerstalker

Answer 3

Make sure you cancel the default submission of the form by returning false from the click handler:

$("#submit_btn").click(function() {
    var form = $('#form');
    $.pjax({
        container: "#update_panel", 
        timeout: 2000,
        url: "@Url.Action("UpdatePart","Part")",
        data: form.serialize()
    });

    return false; // <-- cancel the default event
});

Velocipede

Good point....but that doesn't seem to fix my issue with the blank model being passed back to the Action. – Humiliate

returning false is the wrong thing to do! you should capture the event and call preventDefault() on it. This a) better communicates your intentions b) doesn't break event bubbling – Elbow