使用自定义数据ID加载模式

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将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窗口中？

一步步：

1. 我单击“编辑房间”链接。
2. 模态从数据库加载信息。
3. 我可以更改信息。
4. 我保存表格。
5. 模态关闭。

非常感谢。

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函数中获取click目标并在其中获取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