I’ve been struggling for a few days with trying to get jQuery working within the widgets part of the WordPress 3.2.1 admin pages. Even the most basic of tests does not seem to allow me to, for instance, append some text to a div, using:
It seems to work fine within the widget on the front page, but as soon as I try to use any jQuery within the admin pages it seems to mess up. There are a few articles out there suggesting how to get it working but everything I’ve tried so far seems to fail.
So in the meantime, until someone works out how to get this working (because I give up!), I’ve hacked the code used to expand the widgets themselves when placed in the sidebar. Hopefully someone else who’s also struggling to achieve what I have attempted will find this useful:
<div class="widget" style="border: 0"> <div class="widget-top" style="border: 0; background: inherit; cursor: default; width: 94%"> <div class="widget-title-action"><a class="widget-action hide-if-no-js" href="#available-widgets"></div> <div class="widget-title" style="padding: 6px 0 0"><h3 style="margin: 0; cursor: default">General Settings</h3></div> </div> <div class="widget-inside" style="display: block; border: 1px solid #DFDFDF; padding: 5px; width: 86%;"> // Your menu here </div> </div>
If you wish to have your menu start expanded when the page is loaded the above code will do the trick. However, if you want it contracted then you will have to remove “display: block” from the div with the class named widget-inside.
Hope that helps!
** UPDATE **
So I’ve finally worked out what is causing this issue and how to get around it. It appears that jQuery is actually loading as it should but (possibly due to the jQuery.noConflict(); call in the jQuery script that I mentioned in my comment) it doesn’t load the same. Unrelated to this (I believe) is that widget form options seem to be loaded after the page is loaded, which means that if you are trying to access an object in your form you can’t access it as normal.
The way around this is to use the .live() event which will attach a function to the object once it has loaded – note that live() is now deprecated but I couldn’t get this code working with .on() which is its replacement.
So the example that I will give to demonstrate this comes from a soon-to-launch update to ThinkTwit whereby a link is added that when clicked will reset the form options to default. The following link:
<a id="reset_settings" href="#">Reset Settings</a>
will have an event attached to it when it loads:
Knowing this information should help me solve the accordion issue too but for now I’ll just leave you with the above.