बूटस्ट्रैप में सरल_फॉर्म के साथ इनलाइन त्रुटियों को प्रदर्शित करें अजाक्स मोडल

Question

मुझे समान स्टैक ओवरफ़्लो प्रश्न here और here मिल गया है लेकिन अभी भी इसे काम पर नहीं मिल सकता है।

मैं रेल 3.2.8, सरलफॉर्म 2.0.4, और ट्विटर बूटस्ट्रैप 2.1.1 (बूटस्ट्रैप-एसएएस मणि 2.1.1.0 के माध्यम से) का उपयोग कर रहा हूं।

उपयोगकर्ता को एक मॉडल पॉपअप विंडो से संपर्क जोड़ने में सक्षम होना चाहिए। यदि सत्यापन त्रुटियां हैं, तो उन्हें इनलाइन दिखाई देनी चाहिए, जैसे कि उपयोगकर्ता फॉर्म के गैर-मोडल संस्करण (फ़ील्ड के चारों ओर लाल सीमा, फ़ील्ड के बगल में त्रुटि संदेश) का उपयोग कर रहे थे।

मैं इस तरह मोडल लोड:

<a data-toggle="modal" data-target="#new-contact-modal">Go modal!</a> 

यहाँ बूटस्ट्रैप मोडल, जो एक ही contacts/contact_fields आंशिक गैर मोडल संस्करण में प्रयुक्त कॉल है। एप्लिकेशन/विचारों/संपर्क/_new_modal.html.erb:

<div id="new-contact-modal" class="modal hide fade" tabindex="-1" 
    role="dialog" aria-labelledby="new-contact-modal-label" 
    aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" 
    aria-hidden="true">×</button> 
    <h3 id="new-contact-modal-label"><%= t("contacts.new.header") %></h3> 
    </div> 
    <%= simple_form_for(@contact, 
     :remote => true, 
     :html => {:class => "form-horizontal", 
       "data-type" => :json }) do |contact_form| %> 
    <div id="new-contact-body" class="modal-body"> 
     <%= render 'contacts/contact_fields', :f => contact_form %> 
    </div> 
    <div class="modal-footer"> 
     <%= contact_form.submit :class => "btn btn-primary", 
      :"data-loading-text"=> ('simple_form.creating') %> 
     <%= t('simple_form.buttons.or') %> 
     <a data-dismiss="modal" aria-hidden="true"> 
     <%= t('simple_form.buttons.cancel') %> 
     </a> 
    </div> 
    <% end %> 
</div> 

एप्लिकेशन/नियंत्रक/contacts_controller.rb (जानबूझकर बाहर टिप्पणी की format.json लाइन के बाद से मैं पूरी मोडल वापस भेजने के लिए जावास्क्रिप्ट का उपयोग कोशिश कर रहा हूँ):

def create 
    @contact = Contact.new(params[:contact]) 
    <...some additional processing...> 
    respond_to do |format| 
    if @contact.save 
     format.html { flash[:success] = "Contact added." 
        redirect_to @contact } 
     format.json { render json: @contact, status: :created, location: @contact} 
    else 
     format.html { render action: "new" } 
     #format.json { render json: @contact.errors, status: :unprocessable_entity } 
     format.js { render 'new_modal_error' } 
    end 

एप्लिकेशन/विचारों/संपर्क/new_modal_error.js.erb

var modal = "<%= escape_javascript(render :partial => 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>"; 
$("#new-contact-modal").html($(modal)); 

ऐप/संपत्ति/जावास्क्रिप्ट/contact.js कुछ JQuery फॉर्म को रीसेट करने और सफलता पर मोडल को बंद करने के लिए।

$(function($) { 
    $("#new_contact") 
    .bind("ajax:success", function(event, data, status, xhr) { 
     // http://simple.procoding.net/2008/11/22/how-to-reset-form-with-jquery : 
     $(this).each(function(){ 
     this.reset(); 
     });  
     $("#new-contact-modal").modal("hide"); 
    }) 
}); 

अच्छी खबर है, यह काम करता है जब प्रपत्र कोई त्रुटि नहीं है: संपर्क जोड़ दिया जाता है और मोडल छिपा हुआ है। हालांकि अगर सत्यापन त्रुटियां हैं, तो मुझे संदेश "JSON.parse: अप्रत्याशित चरित्र" मिलता है। यह, jquery.js से आता है लाइन 515 है, जो इस स्निपेट में return कथन है:

// Attempt to parse using the native JSON parser first 
if (window.JSON && window.JSON.parse) { 
    return window.JSON.parse(data); 
} 

अगर मैं निरीक्षण data, मुझे लगता है कि मेरी new_modal_error.js फ़ाइल, पूरी तरह से प्रपत्र त्रुटियों के साथ विस्तार की सामग्री है, और जावास्क्रिप्ट के लिए भाग गया। लेकिन यह JSON नहीं है।

मुझे क्या याद आ रही है? मैं जावास्क्रिप्ट फ़ाइल के रूप में new_modal_error.js को संसाधित करने के लिए पृष्ठ कैसे प्राप्त करूं, JSON चर नहीं? या क्या इसे पूरी तरह से संभालने का कोई आसान तरीका है?

Answer 1

यहां मुख्य मुद्दा data-type => :json के साथ फ़ॉर्म को कॉल कर रहा था। इसका मतलब है कि यह एक JSON प्रतिक्रिया की अपेक्षा करेगा, लेकिन मैं इसे जावास्क्रिप्ट वापस पास करना चाहता हूं। समाधान data-type => :script स्थापित करने के लिए (या बस इसे बंद छोड़ने के लिए और जाने रेल अनुमान जावास्क्रिप्ट) है: विभिन्न डेटा प्रकार समझा और वह डेटा प्रकार स्पष्ट करने के लिए इस लेख को

:html => {:class => "form-horizontal", 
      "data-type" => :script }) do |contact_form| %> 

धन्यवाद प्रतिक्रिया को संदर्भित करता है , डेटा प्रस्तुत करने नहीं:

Rails 3 Remote Links and Forms Part 2: Data-type (with jQuery)

"। jQuery के .ajax() विधि प्रतिक्रिया के वांछित डेटा प्रकार निर्दिष्ट करने के लिए dataType नामक एक वैकल्पिक पैरामीटर प्रदान करता है"

एक और मुद्दा यह मुझे लगता है कि @wanghq की ओर इशारा करते था JQuery के .html() विधि अपडेट कर देता innerHTML एक वस्तु का है। मैं केवल फ़ॉर्म वाला आंशिक बनाने को बंद कर, एक <div id="new-contact-form-wrapper"> आवरण अंदर आंशिक बुला, तो आवरण को लक्षित प्रपत्र को बदलने के लिए:

var myForm = "<%= escape_javascript(render :partial => 'contacts/new_modal_form', :locals => { :contact => @contact.errors }) %>"; 
$("#new-contact-form-wrapper").html(myForm); 

मैं अभी भी चर पारित कर दिया हो रही पर काम कर रहा हूँ, फार्म पर मंजूरी दे दी सफलता, आदि। चूंकि मैं नियंत्रक से आंशिक उपयोग कर रहा हूं, इसलिए मैं शायद आगे बढ़ूंगा और वहां सभी JQuery (सफलता और विफलता दोनों के लिए) डालूंगा, इसलिए मुझे ऐप/संपत्ति/जावास्क्रिप्ट/संपर्कों की आवश्यकता नहीं होगी .js।

Answer 2

मुझे समझ में नहीं आता कि आपको फ़ॉर्म को रीसेट करने की आवश्यकता क्यों है। मुझे लगता है कि यह जरूरी नहीं है।

$(function($) { 
    $("#new_contact") 
    .bind("ajax:success", function(event, data, status, xhr) { 
     ... 
    }) 
}); 

एक बात आप को ठीक करने की जरूरत है अपने new_model_error.js.erb में रेखा के नीचे है, अन्यथा आप आईडी = "नया संपर्क मोडल" के साथ डुप्लीकेट divs होगा।

old: 
$("#new-contact-modal").html($(modal)); 
new: 
$("#new-contact-modal").html($(modal).html()); 

अगर आपको अभी भी समस्या है तो मुझे बताएं।