jQuery conflict reloaded

[websherpa]

I’m having a very similar issue as reported here: https://theeventscalendar.com/support/forums/topic/jquery-conflict/

Essentially I have a jquery function in my custom theme that loads a super sized background, and deposits the js for this inline on the source. That background loads (and displays a loader graphic while doing so). In all other pages it works fine EXCEPT when generating the main single Event display: for example here: http://www.campwaterdown.com/event/camp-waterdown-week-1-camp-explosion/

In that case, the background image never loads (and the loading icon stays put which indicates that the function didn’t complete). Other aspects of the page appear to work as expected.

(I have a workaround, described below, so the issue may no longer be there unless you review quickly. 😉 )

Without The Events Calendar, it all works fine otherwise (and I use a lot of plugins on this site).

Now, the temporary work around I have is to comment out one of the jquery-ui loads: jquery-ui-1.8.13.custom.min.js

When I do this the problem is corrected. (“It hurts when I cough. Doctor says, ‘Well, then don’t cough.'”) I have no idea whether I need this extra jQuery-ui or not, but I thought that jquery-ui was supplemental and independent of the main jQuery?

So what I am really wondering is what might be happening here that TEC introduces the conflict?

Thank you!
Wayne

[Barry]

Hi!

Possibly unrelated to the core issue you’re describing but there is a syntax error caused by your Google Analytics JS being “double wrapped” something like this (though that particular issue isn’t unique to your event pages):

<script type="text/javascript"><script type="text/javascript">
    ...
</script></script>

Getting closer to the issue at hand, I wonder if a spanner is being thrown in the works by your use of an older version of jQuery: you are using 1.7.x – which is being loaded from an external source (Google) – whereas WordPress’s bundled copy of the jQuery library at this time is 1.11.x.

Is it essential that you use the older version/can you try switching to the copy (or at least the same version) that currently ships with WordPress?

[websherpa]

Thank you for the assistance. I’ve updated the theme so that it detects whether or not the <script></script> tags are present in the Google Analytics call and adjusts accordingly.

We hit upon the jQuery version idea at the same time (I had already tried and switched to the WordPress bundled version), but that was inconsequential (site works fine with it, but doesn’t solve the original issue). The problem boils down to some conflict between TEC jQuery and the jQuery-ui include. I’m not entirely certain if I actually need to use jQuery-ui (I didn’t write the original theme) but it appears unneeded for the “supersize” function that is the one being affected:
[quote][code]
&lt;script type="text/javascript"&gt;
jQuery(function($){
$.supersized({
slides : [ { image : ‘http://dev.campwaterdown.com/wp-content/uploads/2012/04/campwaterdown_background.png&#8217; } ]
});
});
&lt;/script&gt;
[/code][/quote]

If jquery-ui (any version) is included, then in the Single Event view of TEC, the jQuery supersize function gets interrupted and can’t complete.

Unless you can think of another obvious potential source for the issue, I am pretty certain I can live without jquery-ui as a way around the conflict.
Thank you again for your attention and help!
Wayne

[Barry]

Hi Wayne,

Well, it may be worth simply removing it in that case and see what happens 🙂

It’s hard to pin down exactly what’s happening – there’s an amount of “noise” created by some of the issues I described in my last reply and while on the surface they may not appear to relate directly the first error I see when I view the single event page URL you provided is a type error in tribe-events.js:

TypeError: c.fn.datepicker.noConflict is not a function

It would be best to clear everything up and resolve each of these issues in order to quickly zero in on other problems – such as the spinner not disappearing and your supersized background loading – but, short of that, dequeuing or removing jquery-ui like you suggested might be the fastest way to deal with this 🙂

[websherpa]

(I forgot to mention that I was making updates on a dev version of the site, so I did remove the issue by removing the call to query-ui as an interim measure.)
Further to what you found above, I am by no means a javascript programmer at all ; but is it just me or is there something wrong with the syntax of the code in the referenced file (/plugins/the-events-calendar/resources/tribe-events.min.js?ver=3.6.1) at line 12 where the second “undefined”!==typeof is embedded. To me it seems to be missing a conditional statement.:

c(this).addClass(“tribe-events-loading”).css(“opacity”,0.25)};
if(“undefined”!==typeof c.fn.datepicker)
{var b=c.fn.datepicker.noConflict();c.fn.bootstrapDatepicker=b}”undefined”!==typeof tribe_bootstrap_datepicker_strings&&null!=tribe_bootstrap_datepicker_strings.dates&&(c.fn.bootstrapDatepicker.dates.en=tribe_bootstrap_datepicker_strings.dates)})(jQuery);

[websherpa]

But I think the issue might come because both my theme and TEC call two different versions of jquery-ui. So eliminating my call resolves the conflict.

‘http://www.campwaterdown.com/wp-content/plugins/the-events-calendar/vendor/jquery/smoothness/jquery-ui-1.8.23.custom.css?ver=3.9.1&#8217;

‘http://www.campwaterdown.com/wp-content/themes/peekaboo/js/jquery-ui-1.8.13.custom.min.js?ver=3.9.1&#8217;

Since I am in learning mode (and thank you for inspiring me to learn how to use Chrome’s Developer Tools to debug what’s going on), in general terms, is there anything one might normally do in programming includes to avoid this kind of collision? (You don’t have to teach me, but I thought it would be interesting to know if there is a standard method.)

[Barry]

is it just me or is there something wrong with the syntax of the code in the referenced file (/plugins/the-events-calendar/resources/tribe-events.min.js?ver=3.6.1) at line 12 where the second “undefined”!==typeof is embedded. To me it seems to be missing a conditional statement

All of our JS (and CSS) files that include .min in the filename have been minified and once this has happened the syntax may indeed look a little odd – generally it’s best to reference the original code in the non-minified version – in this case, tribe-events.js itself.

If you want to use the unminified versions of those assets whilst in development (which also means you can leverage your browser’s developer tools in respect of the unminified source code) you can simply add:

define( 'SCRIPT_DEBUG', true );

To your wp-config.php file.

But I think the issue might come because both my theme and TEC call two different versions of jquery-ui. So eliminating my call resolves the conflict.

…

In general terms, is there anything one might normally do in programming includes to avoid this kind of collision?

Well, taking a WordPress-specific view of the problem, if there’s a shipped version of a particular library and WP already defines a handle for it (for example – jquery-ui-core) then it would be best to simply enqueue that script via that same handle: that way, WordPress takes care of ensuring the relevant version is added once only.

If you need to change the version (or load it from an external source such as Google) then deregistering and reregistering the script so it has the same handle but points to a different URL is a good way to go.

 

[Author]

Posts