sử dụng pjax phải gửi biểu mẫu

Question

Tôi có hình thức trên trang của mình có đoạn mã sau

<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/?id=@Model.ID ">Copy Part</a> 
     <a class="btn" href="/Part/Delete/?id=@Model.ID">Delete Part</a> 
     <a class="btn" href="/Part/PartList/?selectedType=@Model.PartType">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> 

và tôi đang cố gắng sử dụng pjax() để nộp mẫu đơn này và làm mới chứa với một số kết quả. Mã js của tôi là như sau.

$(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() 
     }); 
    }); 
}); 

Mã này gọi hành động UpdatePart() của tôi nhưng chuyển mô hình trống cho hành động? Làm thế nào tôi có thể điền mô hình với nội dung biểu mẫu để nó hoạt động?

Answer 1

Bạn đang tham khảo hình thức sử dụng một Id, nhưng hình thức có một lớp và không có id. Hãy thử:

var form = $(".form"); 

hoặc

<form id="form"> 

Answer 2

Hãy chắc chắn rằng bạn hủy bỏ việc nộp hồ sơ mặc định của mẫu bằng cách trả lại sai từ xử lý nhấp chuột:

$("#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 
}); 

Answer 3

tôi thấy trong tài liệu của họ: https://github.com/defunkt/jquery-pjax Rằng họ có một cách đơn giản để làm điều đó:

<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> 

Cá nhân tôi không thấy ví dụ này trước đây .. có lẽ nó mới/không ... nhưng hy vọng nó sẽ giúp người khác.