2010-09-14 14 views
12

नहीं कहा जा रहा है, मैं "AJAX" का उपयोग कर फ़ाइल अपलोड करने की कोशिश कर रहा हूं, फ़ाइल में डेटा संसाधित करता हूं और फिर उस डेटा को यूआई में वापस कर देता हूं ताकि मैं स्क्रीन को गतिशील रूप से अपडेट कर सकूं।jquery AJAX फॉर्म सफलता कॉलबैक को

मैं जावास्क्रिप्ट के लिए http://jquery.malsup.com/form/ पर पाया गया है और बैक एंड पर Django का उपयोग कर JQuery अजाक्स फॉर्म प्लगइन, jquery.form.js का उपयोग कर रहा हूं। फॉर्म जमा किया जा रहा है और बैक एंड पर प्रसंस्करण किसी समस्या के बिना चल रहा है, लेकिन जब सर्वर से प्रतिक्रिया प्राप्त होती है, तो मेरा फ़ायरफ़ॉक्स ब्राउज़र मुझे "एप्लिकेशन/जेसन" प्रकार की फ़ाइल डाउनलोड/खोलने के लिए संकेत देता है। फ़ाइल में जेसन सामग्री है जिसे मैं ब्राउज़र पर भेजने की कोशिश कर रहा हूं।

मुझे विश्वास नहीं है कि मैं जेसन भेज रहा हूं क्योंकि मेरे पास एक मॉड्यूलरलाइज्ड json_wrapper() फ़ंक्शन है जो मैं इस एप्लिकेशन में कई स्थानों पर उपयोग कर रहा हूं।

यहाँ के बाद Django टेम्पलेट्स लागू किए जाते हैं कि मेरी प्रपत्र लग रहा है:

<form method="POST" enctype="multipart/form-data" action="/test_suites/active/upload_results/805/"> 
    <p> 
    <label for="id_resultfile">Upload File:</label> 
    <input type="file" id="id_resultfile" name="resultfile"> 
    </p> 
</form> 

आप किसी भी बटन क्योंकि मैं और एक बटन के साथ प्रस्तुत फोन कर रहा हूँ और कहाँ से ajaxSubmit() का उपयोग कर रहा प्रस्तुत नहीं देखेंगे jquery.form.js प्लगइन।

function upload_results($dialog_box){ 
    $form = $dialog_box.find("form"); 
    var options = { 
      type: "POST", 
      success: function(data){ 
       alert("Hello!!"); 
      }, 
      dataType: "json", 
      error: function(){ 
       console.log("errors"); 

      }, 
      beforeSubmit: function(formData, jqForm, options){ 
        console.log(formData, jqForm, options); 
       }, 
     } 
    $form.submit(function(){ 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
    $form.ajaxSubmit(options); 
} 

आप देख सकते हैं, मैं सफलता कॉलबैक फ़ंक्शन काम को देखने के लिए बेताब मिल गया है और केवल एक चेतावनी संदेश सफलता पर बनाया है:

यहाँ नियंत्रित जावास्क्रिप्ट कोड है। हालांकि, हम उस कॉल तक कभी नहीं पहुंचते हैं। इसके अलावा, error फ़ंक्शन नहीं कहा जाता है और beforeSubmit फ़ंक्शन निष्पादित किया जाता है।

फ़ाइल है कि मैं वापस पाने के निम्नलिखित सामग्री है:

{"count": 18, "failed": 0, "completed": 18, "success": true, "trasaction_id": "SQEID0.231"} 

मैं निरूपित करने के लिए किया जाए या नहीं सर्वर पद आदेश पर्याप्त रूप से चलाने के लिए सक्षम था 'सफलता' यहाँ का उपयोग करें। यदि यह असफल रहा तो परिणाम कुछ ऐसा दिखाई देगा:

{"success": false, "message":"<error_message>"} 

आपका समय और सहायता बहुत सराहना की जाती है। मैंने इस पर कुछ दिन बिताए हैं और आगे बढ़ना पसंद करेंगे।

+2

क्या 'त्रुटि' कॉल निष्पादित है? या 'पहले सबमिट करें'? फायरबग या क्रोम में वास्तविक प्रतिक्रिया की जांच करने से यह देखने में मदद मिलेगी कि वास्तव में क्या वापस आ रहा है। –

+0

नहीं, त्रुटि कॉल निष्पादित नहीं होता है लेकिन पहले सबमिट करता है। हम यह भी जानते हैं कि सबमिट करने से पहले सब कुछ ठीक काम कर रहा है, क्योंकि सर्वर साइड प्रसंस्करण ठीक से चल रहा है। –

+0

@ माइकल - आप फायरबग/क्रोम/फिडलर नेट पैनल में क्या प्रतिक्रिया देख रहे हैं? –

उत्तर

3

मामले में किसी को भी एक ऐसी ही समस्या थी, यहाँ अंतिम जावास्क्रिप्ट मैं का उपयोग कर समाप्त हो गया है:

function upload_results_dialog($data_elem){ 
    var $dialog_box = $("#ajax-dialog-box"), 
    data = $data_elem.attr("data"); 
    $.ajax({ 
     url: "../upload/" + data+ "/", 
     success: function(response){ 
      $dialog_box.html(response); 
      $dialog_box.dialog("option", 
       { 
        title: "Upload", 
        height: 260, 
        width: 450, 
        buttons: { 
         Cancel: function(){ 
          $(this).dialog('close'); 
         }, 
         Upload: function(){ 
          upload($(this)); 
         } 
        } 
       } 
      ); 
      $dialog_box.dialog('open'); 
     } 
    }); 
} 
function upload($dialog_box){ 
    var $form = $dialog_box.find("form"), 
     iframe = $dialog_box.find("iframe"), 
     $html = $($iframe.contents()), 
     $iframe_form = $html.find("form"); 
    $iframe_form.html($form.contents()); 

    //Set the onload function 
    $iframe.attr("onload","check_file_uploaded_valid()"); 
    $iframe_form.submit(); 
} 
2

ठीक है, मैंने बस उसी समस्या के साथ घंटे बिताए हैं जो जेएस फ़ाइल लाइन के माध्यम से लाइन से जा रहा है। यह एक सेकंड काम कर रहा था और फिर अगला यह नहीं था। मेरी समस्या थी - मैंने परिणामों के लिए लक्ष्य div हटा दिया था। एक बार मैंने इसे वापस रख दिया, यह ठीक काम किया।

+0

मैं पुष्टि करता हूं कि यह सच है, मेरी समझ से मेरी समस्या – stef

0

आप दस्तावेज़ तैयार jQuery घटना में $('#form-id').ajaxForm(); कॉल करने के लिए इतना प्लगइन सभी ईवेंट हैंडलर्स पंजीकृत करता है की जरूरत है।

+0

तय की गई है, $ form.ajaxSubmit() ईवेंट को कॉल करना चाहिए (ईवेंट हैंडलर की आवश्यकता को पार कर)। –

+2

यदि आप लक्ष्य फ़ॉर्म पर AJAXForm के बिना AJAXSubmit कहते हैं, हैंडलर बाध्य नहीं करते हैं। मैं यह कह सकता हूं क्योंकि मुझे दो दिन पहले यह समस्या थी। –

2

मुझे भी हुआ। समस्या यह साबित हुई कि सर्वर पूरी वस्तु को उचित JSON में परिवर्तित नहीं कर रहा था। केवल वांछित गुणों के लिए वापसी मूल्य बदल दिया:

return Json(new {Id = group.Id, Name = group.Name}); 
संबंधित मुद्दे