Alter taxonomy selector with Jquery

  • g2lyon

    (@g2lyon)


    5 years ago

    WP5.3
    I am trying to alter the taxonomy selection with some jquery.
    So I added the following in my custom plugin:

    function sts_plugin_enqueue(){
    wp_register_script( 'sts-script',  plugin_dir_url( __FILE__ ) . 'public/js/sts_script.js' );
    wp_enqueue_script( 'sts-script' );	
}
add_action( 'admin_enqueue_scripts', 'sts_plugin_enqueue' );

    First step for checking, sts_script.js content is:

    (function($){
      alert( "Hello World" );  
})(jQuery);

    It WORKS when i open post edit page, the script is correctly embedded.

    Second step, see if I can select some DOM element, sts_script.js content is:

    (function($){
        $('.editor-post-taxonomies__hierarchical-terms-choice').mouseenter( function(){
		    alert( "Hello World" );
       });
})(jQuery);

    It DOESN’T work ??
    Same behaviour with other event instead of mousenter, (click,etc…)
    I can see class='editor-post-taxonomies__hierarchical-terms-choice' in page elements, so why can’t I alter it??

    • This topic was modified 5 years ago by g2lyon.
    • This topic was modified 5 years ago by g2lyon.
    • This topic was modified 5 years ago by g2lyon.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Hugh Lashbrooke

    (@hlashbrooke)

    I’m not 100% sure, but because those sidebar elements are loaded dynamically, you would need to use jQuery’s .on() method to bind a function to the handler. In your case, that would look something like this:

    (function($){
        $('.editor-post-taxonomies__hierarchical-terms-choice').on("mouseenter", function(){
		alert( "Hello World" );
       });
})(jQuery);

    That should work I think.

    Thread Starter g2lyon

    (@g2lyon)

    I have already tested and retested .on() method without success.
    May be the reason is that sidebar elements are loaded dynamically, so scripts enqueued with admin_enqueue_scripts dont have any effect.

    Hugh Lashbrooke

    (@hlashbrooke)

    Possibly, but I can’t be sure.

    At this point, we’ve reached the limits of what most in the community here are willing to offer in their spare time (everyone here is a volunteer). You should consider hiring someone so that you can give them direct access to the site for a far more efficient fix than we can provide here.

    Please try https://jobs.wordpress.net/ or https://jetpack.pro/ and do not accept any hire offers posted to these forums.

    We will keep this thread open, in case someone from the community is willing to provide further help here for free.

    Thread Starter g2lyon

    (@g2lyon)

    AhAh!
    Hugh, you put me on the good way.
    I confirm the problem comes from the dynamic loading,
    it works with the .live() method.
    but doesn’t works with the .on() method.
    As per Jquery documentation .live method is deprecated and we should use.on()instead.
    I have in mind that my problem is comming from a too hold version of Jquery in WP WP5.3 (v 1.11.4 while the last one is 3.4)
    Is there a way to set the jquery version in WP without altering the core?

    • This reply was modified 5 years ago by g2lyon.
    Hugh Lashbrooke

    (@hlashbrooke)

    Yes! Glad you came right ??

    Thread Starter g2lyon

    (@g2lyon)

    Hugh,
    In the mean time I edited my answer with some more info.
    Please do you know how to simply upgrade the jquery version without altering the WP core?

    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    Hugh Lashbrooke

    (@hlashbrooke)

    If you would like to use a different version of jQuery then you will need to manually enqueue it. Just note that depending on the version, it could cause incompatibility issues with other parts of WordPress.

    Boat

    (@boatkung)

    Could you try this?

    (function($) {
  $(document).on('mouseenter', '.editor-post-taxonomies__hierarchical-terms-choice', function() {
    alert("IT'S WORK!");
  })
})(jQuery);
    Thread Starter g2lyon

    (@g2lyon)

    @boatkung,
    it works! thanks a lot, you are the best!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Alter taxonomy selector with Jquery’ is closed to new replies.