javascript - 将数据 ID 传递到引导模式时出现问题

标签 javascript php jquery bootstrap-modal

我有一个列表页面,其中包含一个链接按钮,用于显示 PHP 循环中的模式重复。我已经搜索并找到了这些: Passing data to a bootstrap modal , Passing data to Bootstrap 3 ModalPass id to Bootstrap modal和其他一些但失败了。

我想要什么

我已经从数据库中获取了数据 ID 并将其传递给引导模式,在那里我将使用这个 id 通过 MySQL 查询显示更多信息。

我已经编写了所有代码,但 ID 没有传递到模式。

模态链接按钮代码

 <a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>

模态代码

 <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Reservation Details</h4><br>
            <h5>Cottage Id :</h5>
            <h5>Cottage Title :</h5>

          </div>
          <div class="modal-body">
            <p>ID WILL SHOW IN THIS TEXT FIELD.
           <input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" /> 
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

JS代码

$('#modal-form-show').on('show.bs.modal', function(e) {
  var c_id= $('a[href="#modal-form-show"]').data('id');
  //var c_id= $(this).data(id) - checked both
  $("#cottage").val(c_id);
});

我在名为cottage的模态中获取了一个文本输入,我想在此输入中显示该id。

最佳答案

试试这个片段:

$('.btn-minier').click(function(){
  var c_id = $(this).attr('data-id');
  $('#cottage').val(c_id);
});

关于javascript - 将数据 ID 传递到引导模式时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43517800/

相关文章:

php - Xampp:网络浏览器不会显示本地主机页面

php - 在 where 子句中使用日期,MYSQLI

php - 为什么会出现 CodeIgniter 安装错误

javascript - 根据过滤器输入更改排序顺序

javascript - 如何在类上实现类型?

javascript - 在对象内部迭代对象

javascript - C# 中的匹配表情符号

javascript - 将 div 元素中多个实例中找到的数字替换为另一个数字

javascript - 禁用累积间隔点的多次点击

javascript - JavaScript 中字母数字字符串末尾的递增数字