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

Improve this question
4
  • 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, 2018 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, 2018 at 13:00
  • 1
    It may be something else in the embedded code. It sounds like it may not be coded so well.
    – Jaypan
    Mar 29, 2018 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, 2018 at 14:15

1 Answer 1

Reset to default
1

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 %}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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