基于参数的bootstrap模态动态远程内容

时间:2017-01-08 09:35:10

标签: javascript php html twitter-bootstrap

您好我正在处理bootstrap模式中显示的弹出窗口。我正在创建按钮,如下所示:

<button class = "sendbt btn btn-default" href="test.php?spz='.$row['id'].'" data-target="#myModal" data-toggle="modal"><b>Test</b></button>

因此,根据$ row [&#39; id&#39;],表格的每一行上的按钮的远程内容应该是不同的 - 它是来自数据库的变量,表格是通过php echo loop创建的。 问题是我的模态弹出窗口显示总是基于我点击的第一个按钮的内容然后在我关闭它之后,其他行中的每个其他按钮显示相同的内容。它不会根据参数而改变。我需要重新加载页面,以显示不同按钮上的更改内容。有没有办法让这个工作,所以表格中的每个按钮都会根据我的参数显示正确的内容,而不是每次都重新加载页面?

感谢您提出建议。

1 个答案:

答案 0 :(得分:0)

执行此操作的最佳方法是向按钮添加自定义属性,并从按钮中删除href属性...使用类型按钮创建按钮,并为在行中创建的每个按钮分配动态ID,如下所示

<button type="button" class = "sendbt btn btn-default" data-id="$row['id']"><b>Test</b></button>

现在将click监听器添加到按钮并找到它的data-id,然后发送ajax请求并使用响应更新模式内容: 写jquery发送请求到test.php页面

$('body').on('click','.sendbt',function(){
     var data-id = $(this).attr('data-id');
      $.ajax({
         dataType : 'html',
         'type': 'GET',
         'data' : {id:data-id},
          'url' : 'test.php',
          success : function(data){
            $('#myModal tbody-content').html(data);
             $('#myModal').modal('show');
},
          error : function(){
       console.log("There is an Error ....!")
}

});
});
你的Test.php中的

    if(isset($_REQUEST['id'])){
   $query = mysql_query("select * from table_name where id=".$_REQUEST['id']);
$row = mysql_fetch_array($query);
$content = $row['your_attribute'];
echo $content;
}

它将显示与您在每个请求中发送的ID相关的内容