wordpress loads jquery too many times

Question

I don't know why but when I display the source code for my Wordpress page, there is <script src="ROOT/jquery"> before each script.

Loading it once in between the <head> tags is enough. This leads to another script not working as expected. I read about a function called wp_enqueue, but I don't understand how it works.

here is the script it doesn't work:

   <script>
   $(document).ready(function(){
//Datepicker Popups calender to Choose date
$(function(){
    $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            yearRange: '1900:2050',
            dateFormat: "dd/mm/yy"


    //Pass the user selected date format 
    });
  }); 
});
</script>

Can someone help me?

Thanks,
Daniele

Contact Form 7 Contact Form 7 Modules: Hidden Fields Contact Form 7 Modules: Send All Fields Google Universal Analytics LayerSlider WP MailChimp for WordPress Lite Really Simple CAPTCHA WordPress SEO WPBakery Visual Composer (Modified Version) — Daniele Dolci, Apr 21 '15 at 03:23
This problem is likely caused by one of the less popular plugins you have installed. When plugin authors attempt to load jQuery improperly, it can add redundant scripts. That's the point of [`wp_enqueue_script`](https://codex.wordpress.org/Function_Reference/wp_enqueue_script). Try disabling each plugin one by one until the problem is resolved to see who is responsible. — Drew Hammond, Apr 21 '15 at 03:26
I updated the question with the script that doesn't work, do you think there is any easy solution? I have been wasting 3 days finding a solution to this.The strangest thing is that other script in the pages are working good and they use jquery as well — Daniele Dolci, Apr 21 '15 at 03:29
Did you write the script that isn't working? If so, follow Aryeh's answer. You must reference jQuery as `jQuery()` in WordPress... Not just `$()` — Drew Hammond, Apr 21 '15 at 03:31
I took the datepicker Ui in jquery and modified following the instruction found on this forum.. so the script how should become? jquery ( (document).ready(function(){ etc etc? — Daniele Dolci, Apr 21 '15 at 03:33

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

UPDATED: See jQuery noConflict Wrappers in WordPress.

<script>
jQuery(document).ready(function($) {
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        yearRange: '1900:2050',
        dateFormat: "dd/mm/yy"
    });
});
</script>

I tested this on a WordPress install locally and there were no more errors

UPDATE #2: This is now a CSS error.

Per this workaround, setting the z-index for each of your datepicker elements should do the trick:

<input id="datepicker" style="position:relative;z-index:200;width:250px;" readonly="readonly" type="text" maxlength="20" name="Date of Birth" placeholder="dd/MM/yyyy" class="hasDatepicker">

edited May 23 '17 at 11:58

Community

1
1

answered Apr 21 '15 at 03:34

Drew Hammond

588
5
19

Actually it is still not working... here the link for the page, maybe I'm doing some mistakes.. http://www.getyourvisa.com.au/pippo/ – Daniele Dolci Apr 21 '15 at 03:39
You need to enqueue jQuery UI in Wordpress. I'll update my answer – Drew Hammond Apr 21 '15 at 03:43
take your time.. I spent 3 days for nothing, I can wait :) – Daniele Dolci Apr 21 '15 at 03:47
Well your JS errors are now gone. So now it's a problem with your implementation. So let's see... Let me check the docs for the datepicker plugin. – Drew Hammond Apr 21 '15 at 04:05
In dreamweaver if i post the whole code i get this error: Some Jquery widgets are defined without corresponding HTML tags. – Daniele Dolci Apr 21 '15 at 04:14
Ok so this is actually a CSS problem. The `z-index` of the `#ui-datepicker-div` element created by the datepicker plugin is not greater the z-index of your `#mk-theme-container` element (200) so it's always hidden. – Drew Hammond Apr 21 '15 at 04:37

score 0 · Answer 2 · answered Apr 21 '15 at 02:53

0

wp_enqueue allows you to add more scripts and css to your site from the functions or any other action page like a plugin. you must be including jquery already. wordpress by default includes jquery so you do not need to include it your self. check if you are including it in your theme and delete it.

you can not use $() with the wordpress jquery you need to use jQuery() or:

(function($) {
    $() // using $() here should now work.
})( jQuery );

answered Apr 21 '15 at 02:53

Aryeh Armon

2,137
2
22
37

sorry I don't know anything about javascript... I just need to add a datapicker to a form generated by javascriptfrom the CRM ZOHO. Unfortunately there are several other scripts and the datapicker is not working there, but works perfectly in local. here is the code I'm using: – Daniele Dolci Apr 21 '15 at 02:58
Check the browser console for errors and post them here – Aryeh Armon Apr 21 '15 at 04:06
there are no more errors in the console after i used the code provided by @drew Hammond. But in dreamweaver I have this error if i put the whole code: Some Jquery widgets are defined without corresponding HTML tags. – Daniele Dolci Apr 21 '15 at 04:13

wordpress loads jquery too many times

2 Answers2