web-dev-qa-db-ja.com

不明なエラー:ツールチップウィジェットインスタンスにそのようなメソッド 'show'はありません

登録用のフォームを送信するために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");
      });
    }
  }
});

エラーメッセージ: Uncaught Error: no such method 'show' for tooltip widget instance

42
dennismonsewicz

JQuery UIと競合する同じエラーが発生しました。

JQuery UIを使用する場合は、スクリプトのロード順を並べ替える必要があります。

私の作業負荷順序:

  • jQuery
  • jQuery UI
  • Bootstrap
142
Bogdan Lewis

これと同様の問題のroot

「ツールチップウィジェットインスタンスにはそのようなメソッド「非表示」はありません」

jqueryUIとBoostrapの両方にtooltipメソッドがあること、

JqueryUIは次のように機能します:

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

Boostrapは次のように機能します:

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

したがって、Bogdan Lewisは、たとえばrequirejsを使用してスクリプトの順序を変更する必要があることを示しました。 BoostrapJqueryUIの後にロードする

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

次のようなrequirejsのconfigを調整します:

    bootstrap: {
        deps: ['jquery', 'jquery_ui']
    },
4
pymen

私にとって最も簡単な解決策は、jQuery UIディストリビューションI( ダウンロード済み )からtooltipsコンポーネントを削除することでした。

1
theV0ID