将data-id传递给引导模态 [英] pass data-id to bootstrap modal

问题描述

我无法显示具有引导模态的data-id.这是我的剧本

I have a problem to show data-id with bootstrap modal. here is my scripts

 <a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="<?php echo $row['product_names']; ?>"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;

模态

<div id="modal-form-edit" class="modal hide" tabindex="-1">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="blue bigger">Products</h4>
</div>

<div class="modal-body overflow-visible">
    <div class="row-fluid">

        <div class="vspace"></div>

        <div class="span7">
            <div class="control-group">
                <label class="control-label" for="form-field-username">Product Name</label>

                <div class="controls">
                    <input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" /> 
                </div>
            </div>

JS

$('#modal-form-edit').on('show', function () {
    var product = $(this).data('id');
    $("#product_name").val($(this).data('product'));
})

问题是data-id没有显示值($row['product_names']).

当我改变

var product = $(this).data(id)

到

var product = "test";

模态显示测试".任何帮助，我都会感激

the modal show "test". Any help I'll appreciate

推荐答案

您需要获取锚标记data-id，而不要使用this，

You need to get the anchor tag data-id not using this like,

var product = $('a[href="#modal-form-edit"]').data('id');

已更新，如果您有多个编辑链接，则要获取单击的锚标记数据ID，应使用

UPDATED And if you have multiple edit links then to get the clicked anchor tag data-id you should use e.relatedTarget

// using latest bootstrap so, show.bs.modal
$('#modal-form-edit').on('show.bs.modal', function(e) {
  var product = $(e.relatedTarget).data('id');
  $("#product_name").val(product);
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 1"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;
<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 2"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;
<div id="modal-form-edit" class="modal" tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="blue bigger">Products</h4>
  </div>

  <div class="modal-body overflow-visible">
    <div class="row-fluid">

      <div class="vspace"></div>

      <div class="span7">
        <div class="control-group">
          <label class="control-label" for="form-field-username">Product Name</label>

          <div class="controls">
            <input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" />
          </div>
        </div>
      </div>
      <!--span7-->
    </div>
  </div>
  <!-- modal-body-->
</div>

这篇关于将data-id传递给引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！