multiple jQuery ver
-
Hi all,
in my child theme I have updated jQuery to latest ver. (3.7.0.min + migrate 3.4.1).
Unfortunately just two details in one page need an older version, so tried to solve enqueuing the second jQuery (3.4.0.min) only for that page, adding the Boolean “jQuery.noConflict();” but still not working, because the global version maintains priority.
Is there a correct way to add the noConflict in functions.php?
Thank you.
Mauro
-
Hi @mrosfy,
I’d definitely like to help out – to be honest the specifics of javascript development are a little outside the scope of support for the theme itself – but let me see what I can tell.
My understanding of the
noConflict
method with jQuery is that you need to set a different variable for each version of jQuery in order to refer to it. I take this example from this thread here.<!-- load jQuery 1.1.3 --> <script type="text/javascript" src="https://example.com/jquery-1.1.3.js"></script> <script type="text/javascript"> var jQuery_1_1_3 = $.noConflict(true); </script> <!-- load jQuery 1.3.2 --> <script type="text/javascript" src="https://example.com/jquery-1.3.2.js"></script> <script type="text/javascript"> var jQuery_1_3_2 = $.noConflict(true); </script>
Then, instead of?
$('#selector').function();
, you’d do?jQuery_1_3_2('#selector').function();
?or?jQuery_1_1_3('#selector').function();
.https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page
I’d suggest you could try the same kind of thing in your child theme – and see how it goes ??
Thanks a lot Jordan you’re very kind, I’ll try and update you.
Anyway, my question was how to express this in functions.php: the question comes from the fact that I deregistered, registered and enqueued 3.7.0 as the global jQuery (with WP correct process), and now I have to enqueue a minor (older) version of jQuery for one specific page (as a sort of “downgrade”). In my #.php both global (common to all pages) and specific page scripts are enqueued, so it would be easy to improve that page with this second jQuery … but: how to add “noConflict” method in the function with “wp_enqueue_scripts” hook?
Anyway interesting the idea to treat noConflict as a variable and then call the variable instead of global jQuery. The point remains : how to deal with this in functions.php
Hey @mrosfy
Anyway interesting the idea to treat noConflict as a variable and then call the variable instead of global jQuery. The point remains : how to deal with this in functions.php
If I may ask – how are you currently including the different version of jQuery in your functions.php file?
Ordinarally – I’d expect that to be done using the wp_enqueue_script() function – which would let you include both the scripts in the page.
But the initiation of the jQuery itself is something that would need to happen within a javascript file. You could create your own .js file and also enqueue it using the same function.
In actual fact – that documentation page for the function includes some additional guidance on multiple jQuery version in the comments – which you might find helpful.
https://developer.www.ads-software.com/reference/functions/wp_enqueue_script/#div-comment-1473
Hi Jordan, I enqueued jQuery and migrate accordingly with the official WP method, deregister old one, register new one, then enqueue:
function biomotiveweb_replace_jquery_ver() {
// jQuery core (ex WP 1.12.4)
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.7.0.min.js", array(), '3.7.0' );
wp_enqueue_script( 'jquery-core', "https://code.jquery.com/jquery-3.7.0.min.js" );
// jQuery migrate (ex WP 1.4.1)
wp_deregister_script( 'jquery-migrate' );
wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.4.1.min.js", array(), '3.4.1' );
wp_enqueue_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.4.1.min.js" );
}
// (NOTE: "wp_enqueue_scripts" works, while "admin_anqueue_scripts" does not work)
add_action( 'wp_enqueue_scripts', 'biomotiveweb_replace_jquery_ver' );Of course I used the wp_enqueue_scripts hook, and also added the older jQuery as a function for the specific page (as told you before, in my themes functions.php file contains both global style/scripts and ones for specific pages). But the point is exactly what you are saying: I add the noConflict in a js script dedicated to the page, but that page still ignores 3.4.0 and uses 3.7.0, which is what I don’t want … probably I must give an embedding priority to scripts of that page, to make it load the 3.4.0 as latest, after the 3.7.0
- This reply was modified 1 year, 4 months ago by Mauro Vicariotto.
Jordan, I already have enqueued 2 css + 4 js as global codes, and 23 css + 22 js scripts for specific pages in child’s function.php: not a problem to add the noConflict in the script of that specific page, but since the noConflict() method works when called immediately after (or immediately before) the embedding of the script (which is in php with wp_enqueue) …
let me check again tonight if I find the way from the last weblink you sent me, then will update you, thank you again
- This reply was modified 1 year, 4 months ago by Mauro Vicariotto.
Dear Jordan,
I want to thank you very much:
obviously sharing WP procedures would not lead to any solution since we both know them.
But re-reading a sentence of a link you posted, I realized that WP already natively applies the “noConflict()” method: in fact, I checked wp-includes and it already exists.
So I was wasting my time trying to apply it again.From this I understood that in this rare case the problem is only in the embedding order of the scripts:
in fact I had already added the second version of jQuery (older, 3.4.0) among the scripts that only pointed to that specific page, and since it didn’t work I concentrated on the “noConflict” (useless, because I now find out it already existed).In reality, the story here is much more complex: let me explain:
3.4.0 is requested by a very old jQuery plugin (and which has never been updated) … I made a mod on the jquery-css of that plugin, which must obviously be embedded after the embed cdn of that plugin, which in order of sequence must come after jQuery 3.4.0 …
but in this case it’s not enough to give a sequence order: in fact I’ve stubbornly avoided the “!important” statements to override the plugin: I still haven’t been able to find a solution that works 100%, but it’s starting to work.If I don’t succeed 100%, I’m afraid I’ll have to give up and use “!important” in my mod … it’s a matter of call priority of related js and css, old jquery included, but in this case very very complicated, because crosses outdated jQuery statements. A chaos.
Please tell me if I managed to explain myself, thanks for your time
- This reply was modified 1 year, 4 months ago by Mauro Vicariotto.
- This reply was modified 1 year, 4 months ago by Mauro Vicariotto.
Jordan, FYI solved: given some priority order in sequence, thank you
@mrosfy Nice work! I’m glad I could help point you in the right direction – but fantastic work digging in and finding the solution. Best of luck with the site.
Jordan, and I’m glad to have one more friend.
(I read from your blog that you suffered of lungs infection: my heartiest wishes for a complete recovery … hope you are well now !!)
Thank you. and warm regards. Mauro
- This reply was modified 1 year, 4 months ago by Mauro Vicariotto.
- The topic ‘multiple jQuery ver’ is closed to new replies.