wordpress loads jquery too many times

1 Views

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.

Read More

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

Post Views: 1

Related posts

Leave a Reply

2 comments

  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">

  2. 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 );