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
The 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.
On the very next line of code I ran a show command on the select menu that corresponded with the selected radio button.
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.
Worked like a charm in this new method.
When selecting a Poll for display you only see available polls:
When selecting a Zone for display you only see available zones:
The jQuery interacts with a classname and not id in it’s selection routine.