Question

我的某个网站存在问题。

我有一些像这样的列表链接：

<ul>
  <li><a data-toggle="modal" data-target="#myModal" data-id="10">Room 10</a>
  <li><a data-toggle="modal" data-target="#myModal" data-id="20">Room 20</a>
</ul>

在我的#myModal上，我希望该表单可以编辑信息。所以我将data-id传递给我的数据库。

HTML如下：

<div class="modal modal-open" id="myModal">
  <form class="modal-form form-horizontal">
    <div class="modal-header">
      <h3>Room #xx</h3>
    </div>
    <div class="modal-body"> <input name="roomNumber" type="text" value="xx">
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </form>
</div>

我的问题是，如何将我的数据库中的房间信息加载到#myModal窗口？

一步一步：

我点击编辑房间链接。
模态从db。
我可以更改信息。
我保存表单。
模态关闭。

非常感谢。

Answer 1

假设模态中的元素具有ID roomNumber，例如：

<p>Your room number is: <span id="roomNumber"></span>.</p>

你做这样的事情来填充它：

var myRoomNumber;

$('#rooms li a').click(function() {
   myRoomNumber = $(this).attr('data-id'); 
});

$('#myModal').on('show.bs.modal', function (e) {
    $(this).find('.roomNumber').text(myRoomNumber);
});

http://jsfiddle.net/isherwood/Yafb5

可能有一种方法可以通过抓取show函数中的点击目标并在那里获取id来简化这一过程，但它现在正在逃避我。

更新：找到它：

$('#myModal').on('show.bs.modal', function (e) {
    var myRoomNumber = $(e.relatedTarget).attr('data-id');
    $(this).find('.roomNumber').text(myRoomNumber);
});

http://jsfiddle.net/isherwood/Yafb5/4

Answer 2

$( ".button").on("click", function(event){
/* if you want to use the same modal, you must unbind() actions because bootstrap 
   remember olders actions on Modal element */

$( "#MyModal" ).unbind();
var btn = $(this);
var id = $(this).data("id"); /* "data-id" attribute in html */
$.ajax({
 type: 'POST',
 url: content_direct_delivery_in_html,
 data: { id: id },
success: function(html) {
 $('#MyModal').modal().on('shown.bs.modal', function (e) {
  $("#MyModal_body").html(html);
 });
}

你的Html是这样的：

<button class="btn btn-success btn-sm button" data-id="<?php echo $BDD['id']; ?>" data-toggle="modal" data-target="#MyModal">
click me
</button>

Answer 3

我遇到了同样的问题，即获取MODAL的clicked元素的data-id。

这对我有用

$('#MyModal').modal().on('shown.bs.modal', function (e) {

  var myDataId= $(e.relatedTarget).attr('data-id'); 

 });

希望这会有所帮助。

使用自定义data-id加载模式

3 个答案: