17

ऐसा लगता है कि Jquery.Form प्लगइन में कोई त्रुटि प्रबंधन सुविधा नहीं है, जो बहुत निराशाजनक है। भले ही प्रलेखन कहता है कि हम $ .ajax विकल्पों का उपयोग कर सकते हैं, फिर भी जब सर्वर त्रुटि देता है, तो विशेष रूप से 500 और 400 श्रृंखला का उपयोग करने पर मैं 'त्रुटि' विकल्प का उपयोग नहीं कर सकता। क्या यह प्लगइन सर्वर से किसी भी त्रुटि को संभाल नहीं सकता है या यह एक बग है, आदि? क्या कोई मुझे बता सकता है कि मैं इस प्लगइन के साथ त्रुटियों (400, 500, आदि) को कैसे संभाल सकता हूं? मुझे आपकी मदद चाहिए ... मैं चाहता हूं कि एक आसान त्रुटि है ... धन्यवाद।jquery फॉर्म प्लगइन, कोई त्रुटि हैंडलिंग

$("#uploadingImg").hide(); 

var options = {//Define ajax options 
    type: "post", 
    target: "#responsePanel", 
    beforeSend: function(){ 
     $("#uploadingImg").show(); 
    }, 
    complete: function(xhr, textStatus){ 
     $("#uploadingImg").hide(); 
    }, 
    success: function(response, statusString, xhr, $form){ 
     // I know what to do here since this option works fine 
    }, 
    error: function(response, status, err){ 
     // This option doesn't catch any of the error below, 
     // everything is always 'OK' a.k.a 200 
     if(response.status == 400){ 
      console.log("Sorry, this is bad request!"); 
     } 
     if(response.status == 601){ 
      sessionTimedOut(); 
     } 
    } 
} 
$("#polygonUploadForm").submit(function(){ 
    $(this).ajaxSubmit(options); // Using the jquery.form plugin 
    return false; 
}); 

उत्तर

1

बस पता चला कि jquery.form ही प्लगइन की वजह से 'फ़ाइल इनपुट' टैग फाइल अपलोड संभालती के लिए सर्वर त्रुटि को संभाल नहीं करता है, क्योंकि यह प्रतिक्रिया हेडर के लिए उपयोग नहीं है। तो मुझे लगता है कि डब्ल्यू 3 सी उस परेशानी वाले टैग की समीक्षा करने की आवश्यकता है जो न केवल आपको सीएसएस के साथ स्टाइल करने देता है बल्कि सर्वर प्रतिक्रिया को आसान बनाता है।

यह हालांकि चारों ओर एक तरीका होना चाहिए ...

मुझे बताएं कि मैंने कुछ गलत कहा है और मुझे इस 'फ़ाइल इनपुट' टैग के बारे में अपने विचार साझा करें ...

0

विकल्पों

में
var options = { 
    target:  '#output2',  
    beforeSubmit: showRequest, 
    success:  showResponse, 
timeout: 1000 
}; 

त्रुटि के मामले में कोई ट्रिगर कॉल नहीं है। जब आप 500 या 404 प्राप्त करते हैं तो प्लगइन बस लटकता है। सफलता केवल 'सफलता' पर काम कर रही है, इसलिए अब हमारे पास यह सब कुछ है।

48

jQuery फार्म प्लगइन संभाल त्रुटियों करता है और documentation बताते हुए यह $ .ajax विकल्पों उपयोग कर सकते हैं में सही है। हालांकि प्लगइन में दो मोड होंगे - सामान्य और फ़ाइल अपलोड। आपके पास जो समस्या है वह है क्योंकि आप फ़ाइल अपलोड कर रहे हैं। (आप यह नहीं कहते हैं लेकिन आपके पास "#uploadingImg" और "#polygonUploadForm" है और, रिकर्सिव तर्क है, आपको यह समस्या हो रही है।)

यह आमतौर पर कहा जाता है, लेकिन आप AJAX के साथ एक फ़ाइल अपलोड नहीं कर सकते । यह कामकाज एक आईफ्रेम का उपयोग करना है। फॉर्म POSTs को एक सामान्य HTTP अनुरोध सबमिट करता है और iframe में सर्वर प्रतिक्रिया लोड करता है। प्लगइन प्रतिक्रिया और voila पकड़ लेता है। क्योंकि यह सामान्य HTTP अनुरोध के रूप में होता है, $ .ajax के नियम और व्यवहार लागू नहीं होते हैं (क्योंकि इसका उपयोग नहीं किया जा रहा है)। एकमात्र चीज फॉर्म प्लगइन कर सकता है जो किसी भी सफलता के रूप में मिलता है। कोड शर्तों में, फ़ाइल अपलोडिंग AJAXForm() या AJAXSubmit() को असाइन की गई 'त्रुटि' विशेषता को कभी भी ट्रिगर नहीं करेगी। यदि आप वास्तव में यह साबित करना चाहते हैं कि यह AJAX अनुरोध नहीं है, तो फॉर्म में ajaxComplete() हैंडलर संलग्न करें (यानी फॉर्म प्लगइन के तरीकों से पूरी तरह से स्वतंत्र)। यह या तो ट्रिगर नहीं होगा। या फायरबग के नेट-> एक्सएचआर पैनल को देखें।

तो यह है - अपलोड एक AJAX अनुरोध नहीं है। सबसे अच्छा आप AJAXForm()/AJAXSubmit() के 'सफलता' या 'पूर्ण' कॉलबैक के भीतर काम कर सकते हैं। आप वास्तविक HTTP प्रतिक्रिया कोड तक पहुंच के बिना सीमित हैं, लेकिन आप प्रतिक्रिया की जांच कर सकते हैं। अगर प्रतिक्रिया खाली है या आप जो उम्मीद करते हैं, तो आप वास्तव में xhr.abort() पर कॉल करके 'त्रुटि' कॉलबैक को ट्रिगर कर सकते हैं। "अगर (अच्छी प्रतिक्रिया) {yay!} और {oh no!}" करने के बजाय, abort() को कॉल करना और 'त्रुटि' ट्रिगर करना कोड को थोड़ा क्लीनर और अधिक समझने योग्य IMHO बनाता है।

$("#uploadForm").ajaxForm({ 
    success: function(response, textStatus, xhr, form) { 
     console.log("in ajaxForm success"); 

     if (!response.length || response != 'good') { 
      console.log("bad or empty response"); 
      return xhr.abort(); 
     } 
     console.log("All good. Do stuff"); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log("in ajaxForm error"); 
    }, 
    complete: function(xhr, textStatus) { 
     console.log("in ajaxForm complete"); 
    } 
}); 

एक बुरी इच्छा प्रतिक्रिया कंसोल लॉग में इस प्रिंट होगा: - किसी

[jquery.form] state = uninitialized 
"NetworkError: 404 NOT FOUND - http://server/fileupload/" 
[jquery.form] state = loading 
[jquery.form] isXml=false 
in ajaxForm success 
bad or empty response 
[jquery.form] aborting upload... aborted 
in ajaxForm error 
in ajaxForm complete 
in ajaxForm complete 

मैं क्यों 'पूर्ण' कॉलबैक दो बार चलाया जाता है पता नहीं है यहाँ एक कोड उदाहरण है? एक अंतिम बात, this thread पढ़ें यदि आप पूछ रहे हैं कि क्यों jQuery या फॉर्म प्लगइन सिर्फ आईफ़्रेम के HTTP शीर्षलेख नहीं पढ़ सकता है।

+6

+1 * यह * स्वीकृत उत्तर होना चाहिए। –

+2

+1। ध्यान दें कि यह केवल एक समस्या है जब iFrame वर्कअराउंड का उपयोग किया जाता है - यानी, ऐसे ब्राउज़र में जो HTML5 सुविधाओं का सही ढंग से समर्थन नहीं करते हैं। (* खांसी * यानी * खांसी *) –

+0

+1 मुझे वास्तव में पसंद है जब लोग अपना ज्ञान साझा करने के लिए अपना समय लेते हैं। बहुत बहुत धन्यवाद @ जे कपास, मैं वास्तव में आपके स्पष्ट और सूचनात्मक उत्तर की सराहना करता हूं :) – will824

0

किसी को अभी भी इस की आवश्यकता होगी, के लिए, यह काम करने के लिए

function submitForm() 
{ 
    var isSuccess = false, 
     options = { 
      url   : "posturl.php", 
      type  : 'POST', 
      dataType : 'json', 
      success:function(msg) { 
       //set the variable to true 
       isSuccess = true; 

       //do whatever 
      }, 
      complete: function() { 
       if (isSuccess === false) { 
        //throw the error message 
       } 
      } 
     }; 

    //Ajax submit the form 
    $('#your_form').ajaxSubmit(options); 

    // always return false to prevent standard browser submit and page navigation 
    return false; 
} 
1

jQuery फार्म प्लगइन सर्वर प्रतिसाद स्थिति सफलता (कोड 200) संभाल इसे प्राप्त करने का एक तरीका है, मुझे लगता है कि जानकारी के लिए पर्याप्त है।

से है कि आप बना सकते हैं आप प्रतिसाद स्थिति सर्वर साइड

  return $this->returnJson(array(
       'response' => 'success',//error or whatever 
       'data' => 'Succesfully saved in the database' 
      )); 
पाठ्यक्रम returnJson की

दृश्यपटल में

Json डेटा भेजने के लिए (अगर कोई निर्माण या अपने विधि के अंदर कर सकते हैं) एक समारोह है सफलता संभाल पर (प्रतिक्रिया 200 है जब आपको निकाल दिया जाता है) आपको बस अपना स्टेटस फ़ील्ड (इस मामले में 'प्रतिक्रिया') की जांच करने की आवश्यकता है, उदाहरण के लिए नीचे:

var options = { 
     dataType : 'json', 
     success: handleResponse 
    }; 


    function handleResponse (responseText, statusText, xhr, $form){ 

      if(responseText.response == 'success') { 
        //do something 

       }else if(responseText.response == 'error'){ 
        //do something 

      } 


    } 
+0

अच्छे समाधान के लिए धन्यवाद –

संबंधित मुद्दे