如何将值参数传递给Bootstrap中的modal.show（）函数

我有一个页面显示当地咖啡馆的列表。 当用户点击某个咖啡馆时，会显示一个模式对话框，该对话框已经预先填写了“咖啡馆名称”。 该页面包含许多咖啡馆名称，表单应包含他点击的“咖啡馆名称”。

以下是使用链接按钮生成为文本的咖啡馆名称列表

 
 
 
B&Js 
 
10690 N De Anza Blvd 
 
 Announce 
 
 
 
CoHo Cafe 
 
459 Lagunita Dr 
 
 Announce 
 
 
 
Hot Spot Espresso and Cafe 
 
1631 N Capitol Ave 
 
 Announce 
 
 
  

这是模态forms

 
 
 × 
Create Announcement
 
 
 
  
 
 Where I am Coding 
  
 
 
 Date 
  
 
 
 
 
   
 
 
 
  

问题是如何将实际值传递给模态forms的“值”属性？

表单“show”事件由“onlick”事件触发

 Announce 

Answer 1

你可以这样做：

 Announce 

然后使用jQuery绑定click并发送Announce data-id作为模式#cafeId中的值：

 $(document).ready(function(){ $(".announce").click(function(){ // Click to only happen on announce links $("#cafeId").val($(this).data('id')); $('#createFormId').modal('show'); }); }); 

Answer 2

使用

 $(document).ready(function() { $('#createFormId').on('show.bs.modal', function(event) { $("#cafeId").val($(event.relatedTarget).data('id')); }); }); 

Answer 3

我想分享一下我是如何做到这一点的。 我花了几天的时间来讨论如何将一些参数传递给bootstrapmodal dialog。 经过多次抨击，我想出了一个相当简单的方法。

这是我的模态代码：

 
 
 
 
Enter new name for group 
 
 <%= form_tag( { action: 'update_group', port: portnum } ) do %> <%= text_field_tag( :gid, "", { type: "hidden" }) %> 
 Name <%= text_field_tag( :gname, "", { placeholder: "New name goes here", class: "form-control", aria: {describedby: "basic-addon1"}}) %> 
 
 <%= submit_tag("Submit") %> 
 <% end %> 
 
 
  

这里是更改gid和gname输入值的简单javascript：

 function editGroupName(id, name) { $('input#gid').val(id); $('input#gname.form-control').val(name); } 

我刚刚在链接中使用了onclick事件：

 // ' is single quote // ('1', 'admin') edit 

onclick首先触发，更改输入框的value属性，因此当弹出对话框时，值将提交给表单。

我希望有一天能帮助别人。 干杯。