Support

Home Forums Event Espresso Premium jQuery Conflict Calendar Widget

jQuery Conflict Calendar Widget

Posted: September 14, 2015 at 7:58 am


Kirstin

September 14, 2015 at 7:58 am

Hello –

I am experiencing a jQuery conflict between the Calendar Widget and my theme (Royal by 8Theme). It is not allowing the Calendar Widget Tooltip to display.

I would appreciate any assistance that you can provide to correct this as it is the last thing I need to fix to take my site live.

One example of this is – http://0ae.f46.myftpupload.com/classes/aug-oct-high-ice-htr/

Thank you,
kjhawayek


Josh

  • Support Staff

September 14, 2015 at 10:10 am

Hi Kirstin,

I checked and it looks like the error is Uncaught TypeError: Cannot read property ‘call’ of undefined from the /wp-content/themes/coffeescripts/jquery.nanoscroller.coffee file. Can you try temporarily de-queueing the above script to for the pages that have the calendar widget to see if that helps?


Kirstin

September 14, 2015 at 7:30 pm

Josh, Could you explain how to do that?

Thanks,
Kirstin


Kirstin

September 15, 2015 at 7:36 am

Josh, I don’t see that file in my wp-content folder.


Josh

  • Support Staff

September 15, 2015 at 9:32 am

Hi Kirstin,

It may help if you can contact the theme author for support on how to remove or fix the theme’s scripts. Here’s a screenshot of the information I gathered from viewing the web inspector where it shows the source of the error:

https://www.evernote.com/shard/s4/sh/a0e54f69-64c9-4000-851a-e48d51d83049/f618117dd7f20f60b11b2f631c1f5d78


Kirstin

September 15, 2015 at 2:13 pm

Josh, As I mentioned that folder “coffeescripts” does not exist on my server. Is it possible it did not load when I installed Event Espresso?


Kirstin

September 15, 2015 at 2:18 pm

In addition, this is not a theme issue. I have seen other users with jQuery conflicts on the forums and EE has assisted them in resolving them. I truly appreciate your help if you can provide a solution.


Dean

September 16, 2015 at 4:36 am

Hi Kirstin.

I’ve looked at your site, and the issue seems to be related to the etheme.js file (http://0ae.f46.myftpupload.com/wp-content/themes/royal/js/etheme.js).

The offending code seems to be a typo on line 202

jquery(‘.title-toolip').tooltipster();

The first apostrophe is a “fancy” apostrophe rather than a basic one, and these can cause code breakages.

2 options:

1) Edit the file and change the apostrophe
2) Contact the theme author so they can fix and send out an update.

The second option may take slightly longer, but it is the better option.

Fixing the code issue *should* fix the calendar unless there are further errors currently not visible due to this one, impossible to tell until this one is fixed.


Tony

  • Support Staff

September 16, 2015 at 4:43 am

Hi Kirstin,

The jQuery conflicts we help with on the forums are generally down to some JavaScript not being loaded in no_conflict() mode or .js files that aren’t needed on the page are being loaded and we can remove those from the EE pages, this issue is different from that.

This issue is likely to be a theme issue, if you temporarily switch to one do the default themes such as twentyfourteen and revisit your event page, do the tooltips work?

Currently your themes etheme.js file is throwing a Syntax error, preventing any other JavaScript from running on the page, looking at the source of that file – http://take.ms/1gZgu

Notice the styled ‘ within the code, that needs to be fixed but may not actually be the cause of the problem, but that would be the first step I would take.


Kirstin

September 16, 2015 at 9:56 am

Dean and Tony – thanks for your replies. Unfortunately correcting the etheme.js file did not solve the problem. Any other suggestions? I appreciate your help.


Kirstin

September 16, 2015 at 10:01 am

I believe it may have to do with the missing theme/coffeescripts folder. It is failing to load this resource – [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.nanoscroller.coffee, line 0)


Josh

  • Support Staff

September 16, 2015 at 10:47 am

Hi Kirstin,

Can you check to see if the WordPress theme (or another plugin) is trying to load the nanoscroller coffee script? I think that’s something that the Royal theme adds, Event Espresso doesn’t use jQuery.nanoscroller.


Kirstin

September 16, 2015 at 2:33 pm

Further information on error –
[Error] TypeError: undefined is not an object (evaluating ‘a.call’)
h (plugins.js, line 283)
imagesLoaded (plugins.js, line 283)
_waitForContent (jquery.qtip.js, line 632)
_update (jquery.qtip.js, line 618)
_updateTitle (jquery.qtip.js, line 642)
render (jquery.qtip.js, line 187)
(anonymous function) (jquery.qtip.js, line 1501)
e (jquery.js, line 2)


Josh

  • Support Staff

September 16, 2015 at 3:40 pm

I think the way forward here is to find out if it’s the current WordPress theme (Royal) or another plugin that’s causing the error. Once you find that, we’ll know where to go next.


Kirstin

September 18, 2015 at 5:40 am

Josh, the theme author has not been much help. They just said it is the plugin causing the error. I don’t believe it is an error caused by the theme because when I change the homepage to include a sidebar the tooltips display correctly. This is the only page it occurs correctly on. I did try disabling all the other plugins and the error still occurs so I am inclined to say it is being caused by EE.I appreciate any further ideas you have on how to correct it.


Josh

  • Support Staff

September 18, 2015 at 8:01 am

If you make a temporary change to the site to use another theme does the error still occur?


Kirstin

September 18, 2015 at 8:16 am

Josh, you are correct, when I change to generic 2013 theme the tooltips display correctly. Is there any way to determine why my theme is conflicting? My theme author has been totally unhelpful.


Josh

  • Support Staff

September 18, 2015 at 10:57 am

Hi Kirstin,

Usually what it comes down to is not all jQuery plugins should all load on the same page, because they can conflict with each other. What I’ll typically do in this situation is go into the theme and look for the function where all the JavaScript files are enqueued. Then, one by one comment out each jQuery plugin if it’s loaded via a separate file.

In this particular case, it appears the theme author has chosen to bundle a lot of the plugins into one file, plugins.js, and it even appears that it might be generated by coffeescript? It’d help to know if plugins.js is actually a file in the theme, or if it’s a file that gets generated on the fly.

One possible solution is if plugins.js is actually a file that can be dequeued, you dequeue it for any of the pages that have the calendar widget.

There’s some general information about how to disable specific scripts in this article:

http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles


Kirstin

September 19, 2015 at 9:57 am

Josh, The plugins.js is a separate file included with the theme. I have uploaded it here for you to look at. https://app.box.com/s/fzkvkwxxsv1l44xslbz3zab9j4oz6asc

Thanks again, Kirstin


Kirstin

September 19, 2015 at 10:32 am

Also, I believe this is the file where the plugins.js is being enqeued. It appears the ‘handle’ is ‘plugins’. https://app.box.com/s/qmx0bev6ymzsxxecnud58ps7dmhz9lii

I tried adding the following lines of code to my functions.php file and it did not work.

add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

function my_deregister_javascript() {
wp_deregister_script( ‘plugins’ );
}


Josh

  • Support Staff

September 21, 2015 at 8:11 am

Is it “did not work” as in the script still loads -or- it is no longer loading, but the same JavaScript error still occurs?

If it’s still loading, you could try adding this to the end of the same file:

add_action( 'wp_enqueue_scripts', 'my_deregister_javascript', 11 );
function my_deregister_javascript() {
	wp_deregister_script( 'plugins' );
}
  • This reply was modified 4 years ago by  Josh. Reason: fixed code


Kirstin

September 21, 2015 at 8:25 am

Josh,

Sorry I should have been more clear. The same Javascript error is returned. When I add your additional lines of text I now receive 404 page not found errors for all pages which contained the calendar sidebar widget.


Kirstin

September 21, 2015 at 8:26 am

To be more specific – I receive a 404 error for all Event pages.


Josh

  • Support Staff

September 21, 2015 at 8:29 am

While the code I posted had an error, that I’ve fixed, it should not have resulted in a 404 error.

So is there another script from the theme that appears to be causing the error since it appears that it’s not plugins.js?


Kirstin

September 21, 2015 at 8:36 am

Josh, I updated permalink and the 404 error was corrected. But the code still did not fix the tooltip.


Kirstin

September 21, 2015 at 8:48 am

One other idea – Dean had given me the following code to get the tooltips to appear on the Calendar page. Is it possible to use a similar code on the event pages where I use the Calendar widget?

//Disable the Royal themes plugin.js if the post/page has the ESPRESSO_CALENDAR shortcode.
function disable_theme_js_on_calendar_page() {
global $post;
if( is_a( $post, ‘WP_Post’ ) && has_shortcode( $post->post_content, ‘ESPRESSO_CALENDAR’) ) {
wp_dequeue_script( ‘plugins’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘disable_theme_js_on_calendar_page’, 100);


Josh

  • Support Staff

September 21, 2015 at 9:55 am

Yeah if it helps with the main calendar, the same code should also help with the calendar widget. So you could try adding a check for the widget in the above conditional like this:

if( is_a( $post, ‘WP_Post’ ) && has_shortcode( $post->post_content, ‘ESPRESSO_CALENDAR’) || is_active_sidebar( 'sidebar-right' ) ) {


Kirstin

September 21, 2015 at 10:09 am

Josh, I just want to clarify, the pages where the widget tooltips are not working correctly do not contain the shortcake for ESPRESSO_CALENDAR. They are the actual event pages. Would the code still be the same as above? And where is the code added within that string?

Thank you!!!


Josh

  • Support Staff

September 21, 2015 at 10:57 am

The || is_active_sidebar( 'sidebar-right' ) is the part I added to the conditional where it currently checks for the shortcode. The || means “or”.


Kirstin

September 21, 2015 at 4:52 pm

Josh, by including the additional code it actually stopped the tooltip from working on the calendar page too.

Please let me know if I did something wrong. This is what the code looks like in my function.php file –

//Disable the Royal themes plugin.js if the post/page has the ESPRESSO_CALENDAR shortcode.
function disable_theme_js_on_calendar_page() {
global $post;
if( is_a( $post, ‘WP_Post’ ) && has_shortcode( $post->post_content, ‘ESPRESSO_CALENDAR’) ) || is_active_sidebar( ‘sidebar-right’ ) {
wp_dequeue_script( ‘plugins’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘disable_theme_js_on_calendar_page’, 100);


Kirstin

September 21, 2015 at 4:53 pm

Furthermore it returned this error when updating the file –

Parse error: syntax error, unexpected ‘||’ (T_BOOLEAN_OR) in /home/content/p3pnexwpnas04_data02/48/2385748/html/wp-content/plugins/SiteSpecificCustomFunctions/SiteSpecificCustomFunctions.php on line 18


Kirstin

September 21, 2015 at 5:08 pm

And Not to add insult to injury, but when I removed the revised code and returned it to the original that Dean provided, the tooltips are no longer working on the calendar page either.


Josh

  • Support Staff

September 21, 2015 at 6:13 pm

Hi Kirstin,

Have you verified that if the plugins.php JavaScript doesn’t load on the page, that the tooltips actually work as expected?

Your conditional where it checks whether to dequeue the script is:

if( is_a( $post, ‘WP_Post’ ) && has_shortcode( $post->post_content, ‘ESPRESSO_CALENDAR’) || is_active_sidebar( 'sidebar-right' ) ) {

You can also remove the conditional entirely to see if removing the script works as expected. When you remove the conditional, your code will look like this:

function disable_theme_js_on_calendar_page() {
  wp_dequeue_script( 'plugins');
}
add_action( 'wp_enqueue_scripts', 'disable_theme_js_on_calendar_page', 100);


Kirstin

September 22, 2015 at 7:54 am

Josh, when I take out the conditional it doesn’t display the calendar widget at all. It also disables several other things (i.e. google maps).

Of great concern is when I returned the site specific functions file to the one Dean originally gave me it is no longer working for the tooltips on the Calendar page.


Kirstin

September 22, 2015 at 8:38 am

Josh, I was able to fix the tooltips on the calendar page (when copying code it changed plain apostrophe to fancy apostrophe). However, the tooltip on the widget still isn’t working. If you have any other suggestions I am desperate.


Josh

  • Support Staff

September 22, 2015 at 10:52 am

If you completely remove plugins.js from loading on all pages, does the tooltip on the widget work?


Kirstin

September 22, 2015 at 6:48 pm

Josh, if I remove plugins.js from loading on all pages the calendar widget doesn’t even display so it is impossible to tell.


Josh

  • Support Staff

September 23, 2015 at 8:17 am

So instead of removing the entire file (which is likely causing new JavaScript errors), can you try commenting out each individual plugin within plugins.js? This way you’ll be narrowing down which script within the plugins.js file may be causing the error. For example, if you open up plugins.js you’ll see there is jQuery Easing, jQuery Cookie, Magnificent popup, the Isotope jQuery plugin, jQuery Waypoints, and so on. You can comment out each section individually, one at a time, then test the page with the calendar widget.


Kirstin

September 23, 2015 at 9:23 am

Josh, I went through and commented out each individual section of script in plugins.js and the tooltips still do not work.

Please look at the error again that is shown in this screen grab https://app.box.com/s/cuq92w7oqnr1atplgwqh9jylcf1ducwu

It appears it is a conflict with http://0ae.f46.myftpupload.com/wp-content/plugins/event-espresso-core-reg/core/third_party_libs/qtip/jquery.qtip.js


Josh

  • Support Staff

September 23, 2015 at 11:18 am

That’s correct, the error message in the console suggests there’s a conflict between plugins.js line 285 and jquery.qtip.js. When you switch to a standard theme like twentytwelve or any other theme from the wordpress.org theme repository you’ll notice there is no conflict.

Along with that, the qtip plugin that Event Espresso uses is also a jQuery plugin that’s available from here:

http://qtip2.com

In order to resolve any conflicts between jQuery plugins, oftentimes the solution is find the conflicting plugin, then remove the jQuery plugin and its dependant scripts from the pages where the conflict happens.


Kirstin

September 23, 2015 at 2:23 pm

Josh, The odd thing is, line 285 of plugins.js is blank. Can you provide any suggestions on how to remove the conflicting jQuery plugin other than what we have already tried? I am a bit desperate to resolve this issue so I can take this site live.


Josh

  • Support Staff

September 23, 2015 at 3:49 pm

Another method to troubleshoot the theme is start with no JavaScript at all from the theme (similar to using another theme). Then you restore one JavaScript file at a time, until you find breakage.

The support post ‘jQuery Conflict Calendar Widget’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 4 years ago ago

Topic Tags

Tagged: , ,

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!