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

【问题标题】：Load modal with custom data-id使用自定义数据 ID 加载模式
【发布时间】：2014-04-19 03:15:57
【问题描述】：

我的一个网站有问题。

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

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

一步一步：

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

非常感谢。

【问题讨论】：

模态内容的 HTML 在哪里？
@isherwood 我已经更新了代码。谢谢。
糟糕，我完全误读了这个问题，抱歉。

标签： jquery twitter-bootstrap

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我遇到了同样的问题，即获取 MODAL 的单击元素的数据 ID。

这对我有用

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

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

 });

希望这会有所帮助。

【讨论】：