1

I am trying to use jQuery.noConflict so that I can use a 3rd party chat system that uses jQuery. This chat system loads in 1.72 while my current installation of drupal is using 1.12. After some hours of debugging and moving scripts around while trying to use noConflict(), I am at my wits end.

I believe the issue is that while trying to implement the 3rd party "click to chat" system for the client, it breaks IPE. This is being added via an embed field in a custom module I created. This embed field is being outputted via a twig variable in html.html.twig after

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

My current error is as follows while trying to "edit" with the 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)

This currently renders the IPE completely broken. What would be the correct way to implement a 3rd party system that loads its own version of jquery, while not being able to change the source code of this 3rd party system?

This is what I have read/tried so far:

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

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

Similar but I also tried this:

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

  • 2
    jQuery in Drupal already sets no query by default since D7. You don't have to do anything. So you must be misdiagnosing your issue. – Jaypan Mar 29 '18 at 5:26
  • @Jaypan I may be. The only connection I have been able to make is that whenever this 3rd party embed is added, it pretty much breaks jquery etc on the site. – Aaron Mar 29 '18 at 13:00
  • It may be something else in the embedded code. It sounds like it may not be coded so well. – Jaypan Mar 29 '18 at 13:02
  • @Jaypan Since this loads in a bunch of scripts from some remote source, it is pretty much out of my hands at that point, right? – Aaron Mar 29 '18 at 14:15
0

I was able to fix this conflict by only displaying this embed code to users who are not logged in. This resolved the conflicts with the in place editor.

In my twig file where I was outputting the embed code, I wrapped it in:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.