如何在ajax成功中打开引导模式

Posted 2023-02-22

【中文标题】如何在ajax成功中打开引导模式

【英文标题】：How to open bootstrap modal in ajax success

【发布时间】：2015-05-09 13:53:38

【问题描述】：

我想通过 jquery 打开引导模式。我知道 ajax 运行成功，因为它会引发警报。但无法打开模态。这些是我的代码。

$.ajax(
    type: "POST",
    url: "<?php echo base_url() . 'index.php/application/requestCode'; ?>",
    data: 
        'apiName': apiName,
        'api': api,
        'hotel': hotel,
        'payment':payment,
        'template': template
    ,
    success: function(msg)
    
        $("#getCodeModal").modal("toggle");
        $("#getCode").html(msg);
    
);

我的模态 HTML 是：

 <!-- Modal -->
 <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel"> API CODE </h4>
       </div>
       <div class="modal-body" id="getCode" style="overflow-x: scroll;">
          //ajax success content here.
       </div>
    </div>
   </div>
 </div>

控制台出错：模态不是函数。

【问题讨论】：

然后会发生什么？控制台中的一些错误？

尝试将左括号与success: function(msg)放在一行中

你导入bootstrap.js了吗？

是的。确定我进口了它。它通过数据属性显示。

我解决了这个错误。就是在 bootstrap.js 之后导入了 jquery 库。

【参考方案1】：

试试这个

success: function(resp)
    $("#getCode").html(resp);
    $("#getCodeModal").modal('show');

【讨论】：

成功函数中只需要$("#getCodeModal").modal('show');。 @Shakil 将$("#getCode").html(resp); 放在前面时，模型中不显示任何内容

这也是我一直在寻找的正确答案。谢谢。

【参考方案2】：

试试这个：

success: function(data) 
    $("#getCode").html(data);
    jQuery("#getCodeModal").modal('show');

这应该可行:)。

【讨论】：

从上面复制

【参考方案3】：

写下以下代码。

success: function(msg)
    
        $("#getCodeModal").modal("show");
        $("#getCode").html(msg).show();
    

【参考方案4】：

当您包含库 jquery 两次时会发生这种情况。检查一下，也许您将其包含在您的索引中，然后不必要地再次包含在您的部分页面中。