Bootstrap 未捕获的错误:工具提示小部件示例没有此类方法"show"

mrwjdhj3  于 2022-12-28  发布在  Bootstrap
关注(0)|答案(4)|浏览(153)

我正在使用ajax来提交一个注册表单,但是在尝试设置工具提示以显示从控制器返回的错误的错误消息时遇到了问题。
JavaScript语言:

$(document).on('ajax:success', '.user_modal_form', function(e, data, status, xhr) {
  var context;
  context = $(this);
  if (data.success) {
    $('button', context).hide();
    $('.spinner', context).show();
    location.reload();
  } else {
    if (data.errors != null) {
      $.each(data.errors, function(key, error) {
        var field;
        field = $("#athlete_" + key);
        field.attr('data-original-title', "" + key + " " + error).tooltip({
          trigger: 'manual'
        }).tooltip("show");
      });
    }
  }
});

错误信息:第一个月

0g0grzrc

0g0grzrc1#

我也遇到了同样的错误,与jQuery UI冲突。
如果使用jQuery UI,则需要重新排序脚本加载顺序。
我的工作负荷订单:

  • jQuery语言
  • jQuery用户界面
  • Bootstrap
bzzcjhmw

bzzcjhmw2#

此问题和类似问题的
“工具提示小部件示例没有这样的方法'hide'”
JqueryUI和Bootstrap都有工具提示方法,

JqueryUI的工作原理如下:

$el.tooltip("option","show");
$el.tooltip("option","hide");

** Bootstrap **的工作原理如下:

$el.tooltip("show");
$el.tooltip("hide");

因此,如 *Bogdan刘易斯 * 所示,您需要重新排序脚本,例如使用requirejs,您需要使BootstrapJqueryUI之后加载

var $ = require('jquery');
require('jquery_ui');
require('bootstrap');

并根据以下要求调整配置

bootstrap: {
        deps: ['jquery', 'jquery_ui']
    },
v7pvogib

v7pvogib3#

对我来说,最简单的解决方案就是从jQuery UI发行版I downloaded中删除 tooltips 组件。

c0vxltue

c0vxltue4#

这是Bootstrap工具提示和jQuery工具提示之间的冲突
让我们试试,请注意他们的加载顺序:

<script src='/jQuery.js'></script>
<script src='/jQuery-ui.js'></script>
<script>
    $.fn.uitooltip = $.fn.tooltip;
</script>
<script src='/Bootstrap.js'></script>
<script>
    $.fn.bttooltip = $.fn.tooltip;
</script>

=〉现在,您可以使用“$. fn.uitooltip”来调用jQuery工具提示,使用“$.fn.bttooltip”来调用Bootstrap工具提示,而不是使用“$.fn.tooltip”:

$('.uitooltip').uitooltip(); //jQuery
$('.bttooltip').bttooltip(); //Bootstrap

相关问题