Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've written a small widget that uses JS for setting up some tabs in the settings panel. Is there a way to re-trigger the tab JS when the widget is done saving?

Looking at the WP JS source it doesn't look like it, as it simply blows away the existing HTML & re-renders the entire form. I could potentially overwrite wpWidgets.save & do something nutty there but that seems really drastic.

Solution

After some hacking based upon One Trick Pony's idea, here's what I ended up with.

<script>
jQuery(document).ready(function($){
    if(parseInt("<?php echo $this->number; ?>", 10)) {
        $("[id$='<?php echo $this->id; ?>'] .tabs").tabs();
    }
});
</script>

Basically I just send down some JS w/ some Widgets values hardcoded in & do some checks & fun CSS3 selectors to find the right DOM nodes.

share|improve this question
    
why don't you make the number check with PHP, and include the script only if it's set? ps: related question –  onetrickpony Sep 1 '11 at 22:55
add comment

1 Answer 1

up vote 1 down vote accepted

Put your javascript code inside the widget form, and it will be triggered whenever the widget is refreshed.

If you're tabs are hooked on a click event, a better way would be to use $.delegate on the widget instance wrapper. That way you don't need to include the js inside every widget instance...

share|improve this answer
    
I don't need delegation because I'm not listening for any clicks, just need the tabs to be there when the widget is expanded/saved. –  Tivac Sep 1 '11 at 22:14
    
Your method is currently working, but does incur the cost of one extraneous tab setup call (for the copy of the form that WP outputs w/ fake IDs in it). I could do some work to avoid that but it isn't worth it right now. This solution isn't perfect & kinda kludgey but I'll take it, thanks! –  Tivac Sep 1 '11 at 22:19
    
Another solution is to use the livequery plugin to trigger your function whenever a new widget form element is added in the DOM. But I still think you should delegate(). Typical tabs can be styled with CSS, you only need JS for user-interaction - ie. the click handler... –  onetrickpony Sep 1 '11 at 22:33
    
I'm really not interested in re-implementing tabs, jQuery UI tabs are fine for my needs. I'd rather have some extra junk floating around than doing tabs myself using delegation. –  Tivac Sep 1 '11 at 22:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.