फॉर्म सबमिट करने के बाद Jquery Callback कैसे करें?

Question

मेरे पास रिमोट के साथ एक सरल रूप है = सच।

यह फ़ॉर्म वास्तव में HTML डायलॉग पर है, जो सबमिट बटन पर क्लिक करते ही बंद हो जाता है।

अब फ़ॉर्म को सफलतापूर्वक सबमिट करने के बाद मुझे मुख्य HTML पृष्ठ पर कुछ बदलाव करने की आवश्यकता है।

मैंने jQuery का उपयोग करके यह कोशिश की। लेकिन इससे यह सुनिश्चित नहीं होता है कि फॉर्म जमा करने की प्रतिक्रिया के कुछ रूपों के बाद कार्य किए जाते हैं।

$("#myform").submit(function(event) {

// do the task here ..

});

मैं कॉलबैक कैसे संलग्न करूं, ताकि फॉर्म सफलतापूर्वक सबमिट होने के बाद ही मेरा कोड निष्पादित हो जाए? क्या फॉर्म में कुछ .success या .complete कॉलबैक को जोड़ने का कोई तरीका है?

Comments

आप अजाक्स का उपयोग क्यों नहीं करते? JQuery के अजाक्स कार्यों के साथ आप ऐसे कॉलबैक को परिभाषित कर सकते हैं।

— डेविडबुजाट्टो

davidbuzatto, कुछ मामले हैं जब आप अजाक्स का उपयोग नहीं कर सकते हैं। उदाहरण के लिए, जब आप फ़ाइल अपलोड करना चाहते हैं।

— पेरे

@Pere भविष्य में यहाँ सच नहीं है।

— स्पार्क

Answer 1

मैंने बस यही किया -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

और चीजें पूरी तरह से काम करती थीं।

देखें इस API दस्तावेज़ों अधिक विशिष्ट विवरण के लिए।

Comments

वाह ... मैंने अभी कुछ नया सीखा है। हाँ, इसके लुक से, यह सबसे सरल उपाय है। शायद, यह सबसे अच्छा भी है। मैं एक शौकीन नागरिक कोडिंग हॉरर रीडर हूं, और उस ब्लॉग में, जेफ एटवुड ने जोर दिया कि हमें कम कोड लिखना चाहिए, और इस विधि को प्राप्त होता है। अच्छा मिल गया। :)

— साल

और अगर <form>आम तौर पर प्रस्तुत किया जाता है? (मेरा मतलब है कि अजाक्स के साथ नहीं) मैं पहले तर्क में क्या डाल सकता हूं .bind()? संपादित करें: ठीक है, मुझे लगता है click। एनवीएम, सॉरी। : p

— 4wk_

खबरदार: यह किसी भी अजाक्स घटना के पूरा होने के बाद आपके फ़ंक्शन को आग लगाने जा रहा है , न कि केवल आपके फॉर्म जमा करने (जब तक कि मैं गलत नहीं हूं, जिस स्थिति में मैं आपके लिए एक लिंक प्रदान करना पसंद करूंगा जहां आपने यह पाया है)

— DMac विध्वंसक

"JQuery 1.8 के अनुसार, .ajaxComplete () विधि केवल दस्तावेज़ से जुड़ी होनी चाहिए"

— मेरेडिथ

एक बटन के साथ सामान्य रूप का उपयोग करते हुए, मैंने काम नहीं किया, लेकिन बटन जावास्क्रिप्ट $ ('# फॉर्मफाइल') कहता है। सबमिट करें ();

— डैनियल

Answer 2

मैं मज़बूती से काम करने के लिए नंबर एक उत्कीर्ण समाधान नहीं प्राप्त कर सका, लेकिन यह काम पाया है। यह निश्चित नहीं है कि यह आवश्यक है या नहीं, लेकिन मेरे पास टैग पर कोई कार्रवाई या विधि विशेषता नहीं है, जो सुनिश्चित करता है कि POST $ .ajax फ़ंक्शन द्वारा नियंत्रित किया जाता है और आपको कॉलबैक विकल्प देता है।

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>

Comments

+1। इस उत्तर की कुंजी $(this).serialize()रेखा है। यह आपको jQuery.ajax()बैकग्राउंड में मौजूदा फॉर्म सबमिट करने के लिए उपयोग करने देता है , फिर सर्वर से उत्तर को पकड़ने और इसके साथ कुछ करने के लिए।

— वॉरेन यंग

जावास्क्रिप्ट अर्धविराम के बिना ... कुछ लोग सिर्फ दुनिया को जलते हुए देखना चाहते हैं। आपका समाधान हालांकि काम करता है, इसलिए धन्यवाद :)

— viggity

ध्यान दें कि .serializeआपके POSTed अनुरोध में फ़ाइल इनपुट शामिल नहीं हैं। एचटीएमएल 5 फॉर्मडाटा ( इस प्रश्न को देखें ) का प्रयोग तब तक करें जब तक कि आप पुराने ब्राउज़रों जैसे आईई 9 का समर्थन नहीं कर रहे हैं

— ब्रिचिन

का उपयोग करने के लिए सहारा $(this).serialize(), यह मेरी समस्याओं को हल!

— gnclmorais

आपके html में 'form_selector' क्या है जिसका संदर्भ आप js में देते हैं?

— केविन मेरेडिथ

Answer 3

आपको सर्वर पर AJAX कॉल के साथ चीजों को मैन्युअल रूप से करना होगा। इससे आपको फॉर्म को ओवरराइड भी करना पड़ेगा।

लेकिन चिंता मत करो, यह केक का एक टुकड़ा है। यहां बताया गया है कि आप अपने फॉर्म के साथ काम करने के तरीके पर ध्यान देंगे:

• डिफ़ॉल्ट सबमिट कार्रवाई को ओवरराइड करें (ईवेंट ऑब्जेक्ट में पारित होने के लिए धन्यवाद, जिसमें एक preventDefaultविधि है)
• प्रपत्र से सभी आवश्यक मानों को पकड़ो
• HTTP अनुरोध को बंद करें
• अनुरोध की प्रतिक्रिया को संभालें

सबसे पहले, आपको फॉर्म जमा कार्रवाई को रद्द करना होगा जैसे:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

और फिर, डेटा के मूल्य को पकड़ो। चलो मान लेते हैं कि आपके पास एक टेक्स्ट बॉक्स है।

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

और फिर एक अनुरोध बंद आग। चलो मान लेते हैं कि यह एक POST अनुरोध है।

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

और इसे इसके बारे में करना चाहिए।

नोट 2: फॉर्म के डेटा को पार्स करने के लिए, यह बेहतर है कि आप एक प्लगइन का उपयोग करें । यह आपके जीवन को वास्तव में आसान बना देगा, साथ ही एक अच्छा अर्थ प्रदान करेगा जो वास्तविक रूप प्रस्तुत करने की क्रिया की नकल करता है।

नोट 2: आपको दोषों का उपयोग करने की आवश्यकता नहीं है। यह सिर्फ एक व्यक्तिगत प्राथमिकता है। आप समान रूप से निम्नलिखित कर सकते हैं, और यह भी काम करना चाहिए।

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

Comments

बढ़िया नमूना। फ़ाइल अपलोड (मल्टी-पार्ट / फॉर्म-डेटा) के साथ एक ही काम कैसे करें ???

— एडम डब्ल्यू

Answer 4

एमवीसी के लिए यहां एक आसान तरीका था। आपको अजाक्स फॉर्म का उपयोग करने और अजाक्सओशन सेट करने की आवश्यकता है

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

यहाँ प्रस्तुत कोड है, यह दस्तावेज़ तैयार अनुभाग में है और फॉर्म जमा करने के लिए बटन की ऑन्कलिक घटना को सूचीबद्ध करता है

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

यहाँ AjaxOptions में संदर्भित कॉलबैक है

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

MVC के लिए नियंत्रक विधि में यह इस तरह दिखता है

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}

Comments

वे कोड .Net कोड हैं, और प्रश्न में कभी भी इसे निर्दिष्ट नहीं किया गया है।

— MrMins

यह वास्तव में नीचे मतदान के लिए एक अच्छा कारण नहीं है। जवाब काम करता है और एक .NET डेवलपर की मदद कर सकता है जो उसी मुद्दे का सामना कर रहा है।

— एडेपर्सन

मुझे यह विचार पसंद है, लेकिन किसी कारण से कॉलबैक फायरिंग नहीं है। क्या नियंत्रक विधि को JsonResult वापस करना है? मेरी नियंत्रक विधि वर्तमान में एक ActionResult लौटाती है।

— मट्टपैम

Answer 5

मुझे विश्वास नहीं है कि आपके द्वारा वर्णित एक कॉलबैक-फ़ंक्शन है।

यहाँ क्या सामान्य है, कुछ सर्वर-साइड भाषा का उपयोग करके परिवर्तन करना है, जैसे PHP।

उदाहरण के लिए, PHP में आप अपने फॉर्म से एक छिपे हुए क्षेत्र को ला सकते हैं और यदि यह मौजूद है तो कुछ बदलाव कर सकते हैं।

पीएचपी:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Jquery में इसके बारे में जाने का एक तरीका Ajax का उपयोग करना है। आप इसकी डिफ़ॉल्ट व्यवहार को रद्द करने और इसके बजाय jQuery.post () का उपयोग करने के लिए जमा करने, झूठे सुनने के लिए सुन सकते हैं। jQuery.post में सफलता-कॉलबैक है।

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/

Answer 6

फ़ॉर्म सबमिट करने से पहले हैंडलर के फ़ॉर्म को "सबमिट ऑन" कहा जाता है। मुझे नहीं पता कि फॉर्म जमा होने के बाद कोई हैंडलर बुलाया जाए। पारंपरिक गैर-जावास्क्रिप्ट अर्थों में फ़ॉर्म सबमिट करने से पृष्ठ पुनः लोड हो जाएगा।

Comments

जब तक कि फॉर्म सबमिशन एक फ़ाइल डाउनलोड पर रीडायरेक्ट नहीं हो जाता है, उस स्थिति में पेज बरकरार रहता है। मैं जावास्क्रिप्ट सबमिशन का उपयोग नहीं कर सकता, क्योंकि एक अजाक्स अनुरोध फ़ाइल डाउनलोड (एंकर टैग गेम के बिना) शुरू नहीं कर सकता है, लेकिन मैं उपयोगकर्ता को प्रतीक्षा करने या एक बार फाइल साफ करने के लिए नहीं कह सकता ...

— kitsu .eb

Answer 7

$("#formid").ajaxForm({ success: function(){ //to do after submit } });

Comments

क्या ajaxForm()एक तृतीय-पक्ष घटक आपने स्थापित किया है? यह jQuery का एक मानक हिस्सा नहीं है।

— वॉरेन यंग