How to call jQuery inside the JS tab inside Pro Editor

[paullalley]

I would like to understand how I can call jQuery inside the JS tab inside Pro Editor.

[nabeel]

Hi @paullalley,

Thank you for reaching out to us. Did you mean writing a jQuery script inside the JS section? First thing to note is you don’t need to include the <script></script> tags in the JS tab because they are already included and if you add those tags it will trigger an error and will break the JS functionality.

If you’re trying to add a jQuery script then please note WordPress uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries so you can’t use the dollar sign directly, you can wrap everything in a document-ready function, passing $ along the way.e.g:

jQuery(document).ready(function( $ ) {
	
  $('.hideable').on('click', function() {
    $(this).hide();
  })
	
});

If you want to call a jQuery library then it’s not needed as WordPress comes pre-packaged with a copy of jQuery. You can start writing your scripts in the JS section inside Pro Editor.

To learn more adding scripts in WP please see https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Hope this helps!

[paullalley]

Noticed that the code you provided references an older version of the jQuery library that is not mobile friendly.

The ready function is now depricated:
jQuery(document).ready(function( $ ):

Apparently this should be used:
jQuery(document).on(‘pagecreate’, function

But this does not seem to trigger.

Help please!

[ruenel]

Hello @paullalley,

pagecreate will only work in mobile.

• https://api.jquerymobile.com/pagecreate/

Please use load event instead:

jQuery(document).on('load', function(){
});

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.