1

I want to run a js/jQuery script that hides elements of a certain class on certain wordpress pages. Hiding them works when typing it into the console:

jQuery('div.pretty > long > selector').hide()

The script looks something like this:

jQuery(document).ready(function($){

    $('div.pretty > long > selector').hide(0, console.log('hidden!'))

})

It seems to execute since I get the console log callback, but the elements are not hidden.

I also tried the following, but with the same result:

jQuery(document).ready(function(){

    jQuery('div.pretty > long > selector').hide(0, console.log('hidden!'))

})

Any hints on how to fix this are very much appreciated!

citivin
  • 626
  • 1
  • 9
  • 24
  • do you mean, if you implement in console it works, if you write in js file it wont? – charan kumar Jul 26 '18 at 09:56
  • 1
    How are the elements being put in the DOM? Do they exist when the page loads, or are they added later. By AJAX, for example. – Rory McCrossan Jul 26 '18 at 09:57
  • it seems it is inside the popup – charan kumar Jul 26 '18 at 09:58
  • @charankumar yes exactly. it works in console but not in js file. – citivin Jul 26 '18 at 09:59
  • @RoryMcCrossan I am not sure how they are loaded. It's a part of subscription options on product pages, so I'd assume they are present when page is loaded. but I may be wrong. – citivin Jul 26 '18 at 10:01
  • does it work if you do something like `$('element').css('display', 'none')` note: this is bad practice but a good way to see if it's the `.hide()` function playing up or something else – treyBake Jul 26 '18 at 14:29

1 Answers1

1

First, ensure that you are enqueuing your script, and telling WordPress it requires jQuery. This can be done like so inside of your theme's functions.php (if the theme isn't custom, create a child theme first) or inside of a plugin:

function enqueue_jquery_scripts() {
    wp_enqueue_script( 'your-script', get_stylesheet_directory_uri() . '/js/your_script.js', array( 'jquery' ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_jquery_scripts' );

Next, make sure you use jQuery instead of the $ shorthand, as WordPress' bundled jQuery runs in noconflict mode.

Update: If the elements are indeed loaded through AJAX, perhaps instead of using document.ready() try document.ajaxComplete() instead:

jQuery(document).ajaxComplete(function(){
  // blah
}
laken
  • 328
  • 1
  • 11
  • Thanks for your reply. I have already implemented what you suggest. The script does run with both approaches mentioned. So by now I assume the elements I want to hide are indeed loaded through ajax and thus not present at document ready.. – citivin Jul 26 '18 at 14:14
  • @citivin, maybe this utility can help: [waitForKeyElements](https://stackoverflow.com/questions/37039001/toggling-click-handler-using-waitforkeyelementswaitForKeyElements) – brasofilo Jul 26 '18 at 14:20
  • 1
    @citivin I've updated my answer with the possibility of AJAX being used in mind. – laken Jul 26 '18 at 14:26