将 jQuery (AJAX) 的结果设置为 Bootstrap 模式答案

【问题标题】：Set results from jQuery (AJAX) into Bootstrap modal将 jQuery (AJAX) 的结果设置为 Bootstrap 模式
【发布时间】：2017-02-28 09:53:36
【问题描述】：

是否可以将 jQuery 函数的结果显示到引导模式中？我有一个表格，当用户单击一个特定列时，模式应该显示适当的数据。

    <script type="text/javascript">
   function getBreak(breakid,pos,countrycode){
      $.ajax({
       url: "{{ url('getBreak') }}",
       type: "GET",
       data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
       success: function (result) {$('#myModal').modal('show');},
       error: function(data){
            alert("Error")
        }
      });
   }
</script>

这是一个非常基本的模式，我想在其中更改插入数据。

<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">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

是否有可能以某种方式将我从getBreak() 函数获得的 html 内容附加到模态框？

【问题讨论】：

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

是的，可以使用这个。

    <script type="text/javascript">
   function getBreak(breakid,pos,countrycode){
      $.ajax({
       url: "{{ url('getBreak') }}",
       type: "GET",
       data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
       success: function (result) {
       $('#divhtml').html(result);
       $('#myModal').modal('show');},
       error: function(data){
            alert("Error")
        }
      });
   }
</script>

在设计中你必须这样做

<div id="myModal" class="modal fade" role="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">Modal Header</h4>
  </div>
  <div class="modal-body">
   <div id="divhtml"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

【讨论】：

它有效。但我总是得到第一个元素的突破。而且我尝试添加data: "id="+this.breakid+"，但它不起作用。
请检查来自您的网址的数据
这就是问题所在。我总是在 onclick 函数中得到相同的 id...<div onclick="getBreak({{ $t->breakid}},{{ $t->position}},{{ $t->countrycode }});"> 为所有项目生成 1234 作为 id
现在可以使用了。我从 db 中选择了错误的列。谢谢

【解决方案2】：

您可以将其添加到您的 Success 函数中，您可以循环遍历结果数据并在显示之前添加到模式中。

$.each(result , function(i, v) {
    $('.text1').text(v.id);
}

【讨论】：