Skip Navigation

[Resolved] Multiple jQuery/JS files conflicting…

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by thomasS-11 6 years, 11 months ago.

Assigned support staff: Waqas.

Author
Posts
#272049

Hi.

If i have multiple views in a page, and they each have their own jQuery or Javascript, i get a conflict/ error on my console.. Is there some other way to do it?

It would also be very nice to have the ability to choose wether to load the custom JS in the HEAD or in the end of BODY of the website, and choose wether to load the custom JS in same file or separately..

#272282

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Usually, it depends on the structure and usage of your Java Script. It will be much helpful if you can explain about the JS you are using in your views, as well as, the error you see in the console.

On the other hand, if you want to include JS in HEAD or FOOTER of the page, you might want to enqueue your scripts appropriately into the Word Press system, like:

/**
 * Proper way to enqueue scripts and styles
 */
function my_scripts() {
	wp_enqueue_style( 'custom-css', get_stylesheet_uri() . 'https://cdn.toolset.com/path/to/custom.css' );
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . 'https://cdn.toolset.com/path/to/custom.js');
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

For more information about wp_enqueue_scripts() please see http://codex.wordpress.org/Function_Reference/wp_enqueue_script

#272441

Hi.
Here is an example:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Yes i know i can include JS in either head or footer through functions.php, but i only want to load as little as possible scripts, so it will only use the JS when the view is active on the current page.

as feedback i would like to say that it would be very good with extended js options in views.

#272528

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for providing the details.

Although your script looks fine but of course in the case of multiple views on a single page, can cause compatibility issues if not handled carefully.

For the above JS, I will suggest to use as followings:

$(document).ready(function(){
... custom code here ...
});

Since window.load invokes the JS as soon as the page is loaded, while document.ready invokes it when the DOM is ready (all required JS, CSS and resources have been loaded). This is likely to through less conflicts.

As another suggestion, if several custom JS is intended to run on a single page (through several small parts, i.e. views). You can enqueue your scripts based on page recognition, like is_page() function of Word Press API. Please read more about it at http://codex.wordpress.org/Function_Reference/is_page. You will also find a lot of related and useful functions in the "Related" section of this page.

However, I am still curious that what kind of JS errors you see in browser console? Since there can be several reasons for the conflicts.

If above approaches do not help, can you please provide a URL to the page where you see these errors?

#272533

Thank you very much, i misunderstood the meaning of the JS field. Thank you 🙂