WordPress and jQuery – Get by Element ID not working

I racked my brain on this one for a bit the other day.  So I figured I would make a post on it to hopefully help some others.

During my development of a WordPress plugin I was having trouble with WordPress and jQuery working together.  In particular, having jQuery interact with a Form element inside of the Widget editor.

To make a long story short, the jQuery selection was being blocked when trying to access the element via ID.

To get around it, I added unique classes to the different elements I needed to interact with and then did my jQuery selections using the class selector.

My setup was rather simple:

  • WordPress plugin with a widget
  • External admin.js file that was properly included using wp_enqueue_script

WordPress jQuery ID Select Issues - both settingsThe task was within the Widget form.  I have two settings to set.  Depending on the value of setting A, the contents of setting B would choose.  When you changed setting A, jQuery would change the values available to you in setting B.

For the sake of this post I re-did the plugin to work off of a Poll Software plugin.  The following image to our right shows setting A, which in this case is your display type, either a Poll or a Zone.  When you select either a Poll or a Zone I want to show off only the Select menu that correlates with that option.

Each of the select menus had a DIV element wrapped around them and I added the same CSS class to both DIV elements.  I also added an appropriate ID to reflect their uniqueness.

<div id="my_plugin_widget_wrapper_poll" class="my_plugin_widget_wrapper">...</div>
<div id="my_plugin_widget_wrapper_zone" class="my_plugin_widget_wrapper">...</div>

When the user clicks on one of the radio button options, I ran a jQuery command to hide both select menus.  This worked just fine.

jQuery('.my_plugin_widget_wrapper').hide();

On the very next line of code I ran a show command on the select menu that corresponded with the selected radio button.

jQuery('#my_plugin_widget_wrapper_'+id).show();

Where the ID is the value of the radio button, either “poll” or “zone”.  However, this code would not work.

Now here are some very interesting findings:

1. If I used the jQuery .css() command before and after running the show() command, I could actually see the display property changing from a value of “none” to “block”.  However when I looked the element up in firebug, it had a display of “block”.

2. If I attempted to run the statement manually in the firebug console, it would display as having run successfully, yet a manual inspection of the element would show no change.

I wish I had a valid answer for what is causing this — but my internal knowledge of WordPress and the jQuery object in no-conflict mode is just not that deep.  (HINT: My gut tells me it has something to do with ID scope availability in the WordPress version of jQuery or the jQuery no-conflict mode).

To get around this was actually pretty simple.  Instead of giving each element a unique ID, I instead added a unique css classname to each element.  Then I simply changed my JS code to show based on a dynamic css classname.

jQuery('.my_plugin_widget_wrapper_'+id).show();

Worked like a charm in this new method.

When selecting a Poll for display you only see available polls:

WordPress jQuery ID Select Issues -  poll

When selecting a Zone for display you only see available zones:

WordPress jQuery ID Select Issues -  zone

The jQuery interacts with a classname and not id in it’s selection routine.

Comments

comments

Posted in , and tagged , , .