pjax का उपयोग कर एक फार्म

Question

मैं अपने पन्ने पर फार्म का निम्न कोड

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

है और मैं इस पत्र भरना होगा और कुछ परिणामों के साथ युक्त ताज़ा करने के लिए pjax() का उपयोग करने की कोशिश कर रहा हूँ कि प्रस्तुत करने के लिए। मेरा जेएस कोड निम्नानुसार है।

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

यह कोड मेरे अपडेटपार्ट() क्रिया को कॉल करता है लेकिन यह कार्रवाई के लिए एक खाली मॉडल पास करता है? मैं फॉर्म सामग्री के साथ मॉडल को कैसे पॉप्युलेट कर सकता हूं ताकि यह सब काम करे?

Answer 1

आप एक आईडी का उपयोग कर प्रपत्र संदर्भित कर रहे हैं, लेकिन फार्म एक वर्ग और कोई id नहीं है। प्रयास करें:

var form = $(".form"); 

या

<form id="form"> 

Answer 2

सुनिश्चित करें कि आप क्लिक हैंडलर से झूठी वापस लौट कर प्रपत्र का डिफ़ॉल्ट प्रविष्टि को रद्द करें:

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

मैं उनके डॉक्स में देखें: https://github.com/defunkt/jquery-pjax वे यह करने के लिए एक आसान तरीका है कि:

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

मैं व्यक्तिगत रूप से इस उदाहरण नहीं देखा था इससे पहले .. शायद यह नया/नहीं है ... लेकिन उम्मीद है कि यह दूसरों की मदद करेगा।