0

I am pulling my hair out as I have two website that are using the same code and the jquery is working on one of them but not on the other.

My issue and question is why is this website:

http://www.cobra-workwear.co.uk/bizweld-flame-resistant-coverall.html

giving me this jquery error:

TypeError: jQuery(...).swipebox is not a function

jQuery( '.swipebox' ).swipebox();

What is confusing to me is that I have got this code to work on a sepreate site as you can see:

http://www.onlinefireproducts.co.uk/2kg-carbon-dioxide-extinguisher.html

Where the jQuery (swipebox) does work.

Anyone have an idea as I am unable to identify what the culprate is.

Thanks in advance.

Magento Version 1.7.0.2 Code being used:

<!-- SwipeBox -->
<script type="text/javascript">
;( function( $ ) {

    jQuery( '.swipebox' ).swipebox();

} )( jQuery );
</script>
Dan Davies
  • 169
  • 2
  • 12
  • Looking at your code I find two things that are inappropriate and incorrect. First, when you're using closure syntax(function calling itself), then you should use `$('.swipebox')` inside the closure-function instead of `jQuery('.swipebox')`. Second, you have a stray semi-colon at the beginning of the function. – Vicky Dev Sep 07 '15 at 15:17
  • Thanks for your time but this code works perfectly exactly as it is in the second url I had in my original question. – Dan Davies Sep 07 '15 at 16:35

2 Answers2

1

Also if you have checked the source of your site, there are two different versions of jQuery being loaded on the same page(1.10.2 & 2.1.0), which could be the culprit causing the conflicts.

If you want to use multiple jQuery versions on the same page you have to create distinctions among them in their function calls like below:

<script src='path/to/jquery-1.10.2.js'></script>
 <script>
 var jq1102 = jQuery.noConflict();
 jq1102(document).ready(function() {
   //jQuery 1.10.2 specific code
   //Use jq1102 instead of $ here
});
 </script>
 <script src='path/to/jquery-2.1.0.js'></script>
 <script>
 var jq210 = jQuery.noConflict();
 jq210(document).ready(function() {
   //jQuery 2.1.0 specific code
   //Use jq210 instead of $ here
});
 </script>

You also have to change the version specific code using the defined variable(in var line above code)in any jquery based libraries you are using(swipebox, fancybox, jquerymobile etc).

Also as best case you can check, if you really need both(or multiple) versions of jquery on same page, as you can conditionally call the needed jquery versions only on any page.

Also refer below links for more details:

https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

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

Can I use multiple versions of jQuery on the same page?

http://sundropsoftware.com/how-to-use-jquery-noconflict-the-right-way/

Hope this helps you.

Community
  • 1
  • 1
Vicky Dev
  • 1,893
  • 2
  • 27
  • 62
  • This worked - thanks - I simply moved the code as it was in tact to the header where I called the jQuery for 2.1.0 and it kicked in. The difference between the two sites was the Zopim chat plugin was calling its own jQuery. Thanks – Dan Davies Sep 07 '15 at 16:36
0

Try to lauch your swipebox like this :

jQuery(document).ready(function(){

    jQuery( '.swipebox' ).swipebox();

} );

Hope it ll be ok with this.

Nicolas D
  • 1,182
  • 18
  • 40
  • Sorry this did not work - the code I had works, it was just being called in the wrong place as it was conflicting with the Zopim Chat jQuery which was using a different version. Thanks for your input and time anyway. – Dan Davies Sep 07 '15 at 16:37