Author Topic: jQuery JavaScript conflicts and general js debugging.  (Read 14800 times)

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 25705
  • Always on vacation
    • Jenkin Hill Internet
jQuery JavaScript conflicts and general js debugging.
« on: October 17, 2013, 15:17:23 pm »
jQuery conflicts can occur when two or more versions of the jQuery library are loaded on a page. The effect of this problem is that VirtueMart, the lightbox or some other extension - even the template - may not work properly. A typical effect on VirtueMart is failure of a JavaScript driven function such as add to cart, fancybox, quantity changer, state dropdown selector etc.

Conflict issues are frequently found in commercial templates where there is a heavy reliance on scripting to provide fancy menus, slideshows, sliders and so on. It is not unkown for a template to load its own jQuery version (Artisteer templates very often do this so is a first place to check if you use that template system) and for an added slideshow module to load its own version. If you then have VirtueMart running on the page then that also will usually load its jQuery version.

Tools to detect conflicts can be Firebug's script debugger or Console error checker, or the debugger in IE9/10 developer tools.

Possible solutions could be uninstalling any module that causes conflict, a plugin such as Simple Image Gallery Pro or in some cases JoomSEF. Otherwise try using jQuery Easy or ReReplacer.

If your template uses bootstrap.js then to solve a script error with VirtueMart's jQuery (version 1.6.4) you can replace that VM version with jQuery 1.7.1 - in com_virtuemart/assets/js/ the script is named jquery.min.js   VirtueMart 2.0.x and fancybox will still work with that version.

There should be less conflict issues with VM3.x. From the VM3 release news "The new jQuery versions are now mainly the same as in Joomla 3.3 (jQuery v1.11.0,jQuery UI - v1.9.2, legacy complete). Shops using Joomla 2.5 with VirtueMart 3 also benefit from this. It prevents needless configuration problems."

Debugging:
http://msdn.microsoft.com/en-us/library/ie/gg699336%28v=vs.85%29.aspx
https://getfirebug.com/javascript
https://www.ostraining.com/blog/general/firebug-console/
http://www.joomlart.com/tutorials/joomla-tutorials/how-to-find-javascript-conflict-in-joomla

jQuery Easy (rarely needed with J3.x VM3.x):
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

Rereplacer:
http://www.ostraining.com/blog/joomla/rereplacer-jquery
http://extensions.joomla.org/extensions/edition/replace/4336

jQuery1.7.1:
http://code.jquery.com/jquery-1.7.1.min.js
Kelvyn

Jenkin Hill Internet,
Keswick, Lake District

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM3.2.1 on Joomla 3.6.5 PHP 7.0.12

Testing VM3.2.2 on J!3.6.5 and J!3.7

ooweboo

  • Beginner
  • *
  • Posts: 16
Re: jQuery JavaScript conflicts
« Reply #1 on: October 24, 2013, 14:06:07 pm »
Thanks again, im trying to troubleshoot these conflicts, can i disable modules etc or do i need to uninstall them?

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 25705
  • Always on vacation
    • Jenkin Hill Internet
Re: jQuery JavaScript conflicts
« Reply #2 on: October 24, 2013, 14:52:02 pm »
Disable/unpublish them should be enough.
Kelvyn

Jenkin Hill Internet,
Keswick, Lake District

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM3.2.1 on Joomla 3.6.5 PHP 7.0.12

Testing VM3.2.2 on J!3.6.5 and J!3.7