बूटस्ट्रैप मोडल डेटा खारिज (रेल)

Question

पर बंद नहीं हो रहा है मेरे पास एक संपादन मोडल के साथ रेल अनुप्रयोग है। सबमिट कार्यक्षमता काम करता है, लेकिन करीबी बटन कुछ भी नहीं करते हैं।

Edit.js.erb:

$("#modal-window").html("<%= escape_javascript(render 'users/edit') %>"); 

_edit.html.erb

<div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
<%= form_for @user,url: root_path,:method => :GET do |f|%> 
    <%= f.label :password %> 
    <%= f.password_field :password, class: 'form-control' %> 
    <%= f.submit "Save changes", class: "btn btn-primary" %> 
    <%# submit_tag 'Cancel', :type => :reset, :class => "btn btn-danger", "data-dismiss" => "modal", "aria-hidden" => "true" %> 
<% end %> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

दृश्य खोलता है और मोडल

<%= link_to 'Edit Password', edit_path(user.id), {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} 

...... 


<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

घरों से लाइनों

मेरे पास रत्न स्थापित हैं। //= require bootstrap/modal और //= require jquery मेरी application.js में हैं

संपादित करें: पूर्ण application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 
// vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require rails-ujs 
//= require turbolinks 
//= require_tree . 
//= require bootstrap/modal 
//= require jquery 

Answer 1

bootstrap-modal-rails मणि एक रेल 4 आवेदन संस्करण के साथ काम करेंगे के रूप में, तुम सिर्फ बूटस्ट्रैप उपयोग करने पर विचार कर सकता है इसे काम करने के लिए modals।

आप एक मोडल div बना सकते हैं, फिर बटन जोड़ें जो नियंत्रक में किसी निश्चित विधि के लिए अनुरोध करेगा, जो एक जेएस फ़ाइल के साथ प्रतिक्रिया देगा, जो तब आंशिक रूप से प्रस्तुत करेगा जो मोडल div को भर देगा।

अपने index.html.erb आप सेट कर सकते हैं में link_to helper:

<%= link_to 'Edit Password', edit_path(user), remote: true, data: { toggle: 'modal', 'target': '#modal-window' } %> 
... 
<!-- Modal --> 
<div class="modal fade " id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 

यह इस मामले में एक है कि UsersController में edit विधि का जवाब पथ निर्दिष्ट करता है,, remote: true विकल्प शुरू करने के लिए जोड़ने इस विधि के लिए एक एसिंक्रोनस अनुरोध, और डेटा के रूप में निर्दिष्ट data-toggle और data-target विशेषताएँ।

फिर, नीचे अगर आप चाहें, तो आप #modal-window div, एक बूटस्ट्रैप मोडल के रूप में काम करने के लिए setted, और जो सबसे अधिक मैच id और data-target में link_to सहायक को "खोला" जा के साथ बना सकते हैं।

मार्ग कि link_to में परिभाषित किया गया है एक id उम्मीद है, और उर्फ ​​विकल्प का उपयोग एक लघु संस्करण बनाने के लिए:

get 'users/edit/:id', to: 'users#edit', as: 'edit' 

आपका नियंत्रक सिर्फ विधि, edit, जो जावास्क्रिप्ट में, यह सिर्फ जवाब देंगे की जरूरत है प्राप्त करता है id परम कि भेज दिया जाता है: json प्रारूप में

def edit 
    @user = User.find(params[:id]) 
end 

edit के रूप में प्रतिक्रिया है, तो आप एक ही नाम के साथ एक फ़ाइल बनाने की आवश्यकता अपने विधि के साथ साथ विस्तार js और erb, इस edit.js.erb है, और _edit आंशिक प्रस्तुत करना, और क्रिया को दिखाने के लिए कोड शामिल हैं:

$("#modal-window").html("<%= j render 'users/edit' %>"); 
$('#modal-window').modal('show') 

अंत में _edit आंशिक सामग्री है कि में जोड़ दिया जाएगा शामिल होंगे div मोडल से पहले बनाए गए, यह आसानी से बदलाव किया जा सकता है .modal-body div में, है, तो आप प्रपत्र जोड़ सकते हैं:,

<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 

    <div class="modal-body"> 
     <%= form_for @user, url: edit_path do |f|%> 
     <%= f.label :password %> 
     <%= f.password_field :password, class: 'form-control' %><br> 
     <%= f.submit "Save changes", class: "btn btn-primary" %> 
     <% end %> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
</div> 

नोट इस बूटस्ट्रैप पर निर्भर करता है, ताकि आप अपने Gemfile फाइल करने के लिए मणि जोड़ने की जरूरत है, और configur ई जे एस और सीएसएस आवेदन फ़ाइलें दोनों:

# Gemfile 
gem 'bootstrap-sass' 

# application.js 
//= require jquery 
//= require bootstrap-sprockets 

# application.scss 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 

application.js में, बूटस्ट्रैप के रूप में jQuery पर निर्भर करता है, इस बूटस्ट्रैप एक से पहले जोड़ा जाना चाहिए, और सीएसएस विन्यास के लिए, फ़ाइल के लिए scss होना चाहिए उचित import बनाओ।