使用自定义数据ID加载模式 [英] Load modal with custom data-id

问题描述

我的一个网站有问题.

我有一些这样的列表链接:

I have some list links like this:

<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)传入了我的数据库.

On my #myModal, I want the form appears to edit info. So I passed the data-id, which is the id into my database.

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窗口中?

My question, is how can I load the rooms infos from my db into the #myModal window ?

逐步:

1. 我单击编辑房间"链接.
2. 模式从数据库中加载信息.
3. 我可以更改信息.
4. 我保存了表单.
5. 模式关闭.

非常感谢.

推荐答案

假定模态中ID为roomNumber的元素，例如:

Assuming an element in your modal with the ID roomNumber, such as:

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

您将执行以下操作来填充它:

you'd do something like this to populate it:

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来简化此操作，但此刻它正在使我逃脱.

There's probably a way to simplify this by grabbing the click target inside the show function and getting the id there, but it's escaping me at the moment.

更新:找到了:

$('#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

这篇关于使用自定义数据ID加载模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！