web-dev-qa-db-ja.com

クライアント埋め込みコードでのjQuery競合の問題

jQuery.noConflictを使用して、jQueryを使用するサードパーティのチャットシステムを使用できるようにしています。現在のdrupalのインストールでは1.12を使用していますが、このチャットシステムは1.72でロードされます。noConflict（）を使用しようとしている間にスクリプトのデバッグと移動を数時間行った後、私はうまくいきました。

問題は、サードパーティの「クリックツーチャット」システムをクライアントに実装しようとすると、IPEが機能しなくなることだと思います。これは、私が作成したカスタムモジュールの埋め込みフィールドを介して追加されます。この埋め込みフィールドはtwig変数を介して出力されます

    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
  {{ embed|raw }} //Embed code here
</html>

IPEで「編集」しようとすると、現在のエラーは次のとおりです。

jquery-ui.js:905 Uncaught TypeError: Cannot read property 'call' of undefined
    at a.(/web/anonymous function).(anonymous function)._trigger (https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js:905:38)
    at a.(/web/anonymous function).(anonymous function)._trigger (https://www.example.com/web/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.12.1:4:1094)
    at a.(/web/anonymous function).(anonymous function)._createWidget (https://www.example.com/web/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.12.1:4:3317)
    at new a.(/web/anonymous function).(anonymous function) (https://www.example.com/web/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.12.1:4:661)
    at HTMLDivElement.<anonymous> (widget-min.js?v=1.12.1:4)
    at Function.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.a.fn.(/franchise/anonymous function) [as draggable] (https://www.example.com/web/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.12.1:4:2374)
    at n.render (BlockView.js?v=8.4.5:95)
    at n.<anonymous> (LayoutView.js?v=8.4.5:146)

これにより、現在IPEが完全に壊れています。このサードパーティシステムのソースコードを変更することはできないが、独自のバージョンのjqueryをロードするサードパーティシステムを実装する正しい方法は何でしょうか？

これは私がこれまでに読んだ/試したものです：

https://api.jquery.com/jquery.noconflict/

https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

同様ですが、私もこれを試しました：

https://stackoverflow.com/questions/2812359/mootools-and-jquery-conflict-despite-dollar-safe-mode

8themingjavascript
1
Aaron

ログインしていないユーザーにのみこの埋め込みコードを表示することで、この競合を修正できました。これにより、インプレースエディターとの競合が解決されました。

埋め込みコードを出力していたtwigファイルで、次のようにラップしました。

{% if not logged_in %}
  {{ embed|raw }}
{% endif %}
1
Aaron