Ask your WordPress questions! Pay money and get answers fast! (more info)

Resolve Javascript Conflict

  • SOLVED

My website is http://bumblebeeclean.com On the home page, I am using the 'All in One Banner' plugin from Code Canyon. On this page: http://bumblebeeclean.com/window-cleaning-exterior-cleaning-services-vancouver I am using Visual Composer. However, there is a JS conflict causing the content to load empty if you click through all of the services and then back to the top again. I need someone to help me resolve this conflict.

Answers (3)

2014-09-16

timDesain Nanang answers:

jQuery library need to be loaded before the responsive menu's script.

since the jquery loaded in the head by default,
maybe the theme's function change the position to footer,
you need to set $in_footer to false.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
codex: [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]


Lisa comments:

timDesain - where do I paste this code in exactly? I'm not a programmer ;)


timDesain Nanang comments:

1. go to http://bumblebeeclean.com/wp-admin/theme-editor.php
2. click "Theme Functions" in the right sidebar
3. find the hook, something like:
add_action('wp_enqueue_scripts', 'script_function');
4. paste the <strong>script_function</strong> here


Lisa comments:

I do not see that in my functions.php file at all..... It looks like this:

<?php

// Tell the main theme that a child theme is running. Do not remove this.
$GLOBALS['builder_child_theme_loaded'] = true;

// Load translations
load_theme_textdomain( 'it-l10n-Builder', get_stylesheet_directory() . '/lang' );

// Add Builder 3.0+ support
add_theme_support( 'builder-3.0' );

// Add support for responsive features
add_theme_support( 'builder-responsive' );


timDesain Nanang comments:

I am sorry, it seems the jQuery has been loaded in the head.

but, jquery.ui.core, jquery.ui.widget, and jquery.ui.tabs not loaded.

try to deactivate all plugins, except Visual Composer.


Lisa comments:

I did do this (deactivate all plugins, except visual composer) and then it works fine. It only stops working when the 'All in One Banner' plugin is activated.


timDesain Nanang comments:

I see, the All in One Banner plugin is the clue.
since, it is a premium plugin, I couldn't download it.


timDesain Nanang comments:

You can report this issue (conflicting with visual composer) to All in One Banner plugin's Author.


timDesain Nanang comments:

You can try to force loading jquery ui library:

try to add this code in the theme's functions.php

add_action('wp_enqueue_scripts', 'wpq_scripts' , 999999);
function wpq_scripts() {
//add the page ids here
if(is_page( array( 5, 110 ) )){
wp_enqueue_script('wpq-jquery-ui-core', home_url('wp-includes/js/jquery/ui/jquery.ui.core.min.js'), '', '1', true);
wp_enqueue_script('wpq-jquery-ui-widget', home_url('wp-includes/js/jquery/ui/jquery.ui.widget.min.js'), '', '1', true);
wp_enqueue_script('wpq-jquery-ui-tabs', home_url('wp-includes/js/jquery/ui/jquery.ui.tabs.min.js'), '', '1', true);
wp_enqueue_script('wpq-jquery-ui-tabrotate', plugins_url('js_composer/assets/lib/jquery-ui-tabs-rotate/jquery-ui-tabs-rotate.js'), '', '1', true);
}
}


Lisa comments:

Thank you timDesain! That worked!!!

2014-09-16

Sai kumar answers:

Hi Lisa,

PM you, please check it.

Thanks,
Sai

2014-09-16

Ian Lincicome answers:

Hi Lisa,
I have had cases before where I couldn't put the jquery/javascript call before or after a certain script for Jquery to work and I was able to go into the file in question and do a search and replace. Replace $(dollar signs) with "JQuery". This works because other Jquery scripts use the short-cut dollar sign and yours will use the "JQuery" text instead so it doesn't conflict with other scripts. I hope that is clear enough.
It's a simple task and worth a try. you can always put it back if it doesn't work, so backup the file you are changing before you do this and you mitigate your risks.