将data-id传递给bootstrap模式
pass data-id to bootstrap modal
我有一个问题,显示data-id
与引导模式。这是我的脚本
<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>
模态
<div id="modal-form-edit" class="modal hide" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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";
模式显示"test"。如有任何帮助,我将不胜感激
您需要获得锚标记data-id
而不是使用this
,
var product = $('a[href="#modal-form-edit"]').data('id');
UPDATED如果你有多个编辑链接,然后得到点击锚标记data-id你应该使用。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>
<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>
<div id="modal-form-edit" class="modal" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
相关文章:
- 如何动态更改React Bootstrap模式的内容
- 在Bootstrap模式窗口中打开远程内容
- bootstrap模式在windowsvista上的IE8上运行极其缓慢
- Jquery UI don'使用bootstrap 3模式时效果不佳
- 在ajax回调(safari)中调用bootstrap模式显示
- 一旦Bootstrap模式选项已经存在,请更改该选项
- 当内部的任何模式关闭时,Bootstrap模式关闭
- bootstrap日期选择器轨道无法通过带有bootstrap模式的simple_form工作
- Bootstrap 3模式从水平到内联的变化-调整大小很尴尬
- Twtitter Bootstrap模式显示事件多次触发
- 确定哪个按钮打开了Bootstrap 3模式
- 如何使用 javascript 隐藏 Bootstrap 模式
- Bootstrap模式加载远程内容,生成2个请求
- c#asp.net如何使用bootstrap模式将视频源文件名添加到不同的媒体类型中
- bootstrap模式中的Twitter共享按钮在firefox上不起作用
- Bootstrap 3模式并不总是激活ajax代码
- PHP和Bootstrap模式变量
- Bootstrap 3模式-从底部滑入并粘牢
- 如何清理(销毁)Twitter Bootstrap 3.2模式表单内容
- 如何在AngularJS Bootstrap模式中从AJAX调用加载JSON数据