bootstrap passing dada to modal

we can open a dialog with bootstrap modal ,but how to passing data to the modal?

 

if we want to open a form with modal, like edit a product, rails skip to the edit.html.erb, and show the form

,we can do this more easy with bootstrap modal, here is the example:

 

   1. <!-- Button to trigger modal -->
   2. <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
   3.  
   4. <!-- Modal -->
   5. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   6. <div class="modal-header">
   7. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   8. <h3 id="myModalLabel">Modal header</h3>
   9. </div>
  10. <div class="modal-body">
  11. <p>One fine body…</p>
  12. </div>
  13. <div class="modal-footer">
  14. <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  15. <button class="btn btn-primary">Save changes</button>
  16. </div>
  17. </div>

 

it show the modal when we click the lanch button, you can add some static content to it

next, we add a form to it, add the folwing code to the modal-body:

 

<%= form_for @cost_type, :html => { :class => 'form-horizontal' } do |f| %>
  <div class="control-group">
    <%= f.label :name, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :name, :class => 'text_field' %>
    </div>
  </div>

  <div class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                cost_types_path, :class => 'btn' %>
  </div>
<% end %>

 

now , the question is how to pass @cost_type to the form, I find a simple methd, use javascript

set the textarea when the modal is show

 

 <script type="text/javascript">
 function dodel(){
 $('.modal').modal('show').on('shown',function(){
  //set the the textarea use js
  })
 }
 </script>

 

you can share your methd if you have!~

 

你可能感兴趣的:(js,bootstrap,modal)