WordPress.org

1. nutsmuggler
   Member
   Posted 3 years ago #

   Hello folks,
   I am building a plugin which employs admin pages. I am following the WP stylistic pattern as close as possible. For optional values, I would like to use the "postbox" class employed in the "New post" and "Edit post" page. This class is used to hide and show divs, like "Tags", "Excerpt", etc. I inserted a ".postbox" div in my custom form, and also a "togbox" switch; I also tried to load the "/wp-admin/js/postbox.js" script, but the switch dows not work. I know I could replicate the behaviour with jQuery, but I'd like to relay on th existing framework.
   Any suggestion?
   Cheers,
   Davide

2. Roger Theriault
   Member
   Posted 3 years ago #

   Perhaps it depends on page structure? Did you try replicating the container divs? (Especially #poststuff which is mentioned in the CSS) (And ... load the CSS? :-) Does it add the "closed" class when you test with FireBug and click on the tab?

3. nutsmuggler
   Member
   Posted 3 years ago #

   Thanks for the suggestion. I double-checked: the structure of my custom plugin admin page replicates exactly the common "post" admin page structure, so #poststuff is there. And no, unfortunately ".closed " is not automatically added...
   Looking at the postbox.js file I ended up believing that replicating this behaviour is more complicated that I thought. I think this feature will be in the 2.0 version of my plugin :)
   Thanks anyway,
   Davide

4. Roger Theriault
   Member
   Posted 3 years ago #

   I looked at the postbox.js code and it's not terribly complex...

   jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');

   This actually adds the togbox at runtime, so you don't need to put it in your code. You just need

   <div class="postbox">
   <h3>Section Name</h3>
   <div class="inside">
   ...
   </div>
   </div>

   Here's the jQuery code that sets up the click. When you click (on the h3 technically) it toggles the closed class of the parent div (the same div with the postbox class). If you don't have an h3 to match it doesn't work. (And if you need something other than an h3, just change the code).

   jQuery('.postbox h3').click( function() {
      jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
      save_postboxes_state(page); } );

   The rest of the code just deals with saving the status of the postbox elements, via an AJAX call to a backend wp-admin/admin-ajax.php

   But you'll need to also include page.js or at the very least do this:
   

   jQuery(document).ready( function() {
       add_postbox_toggles('page');
   }

   otherwise the toggles and, most importantly, the onClick callbacks, don't get added and nothing happens, since the code in postbox.js is inside that function add_postbox_toggles().

   Alternately, and maybe much simpler, don't include the wp JavaScript files, just create your own js file and include it... or embed it if you prefer, since it's pretty short. (You'll need to also include jQuery of course).
   

   jQuery(document).ready( function() {
       jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');
       jQuery('.postbox h3').click( function() {
           jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
       });
   }

   (This omits all the other functionality, including remembering the state of the postboxes, but keeps the style)

5. nutsmuggler
   Member
   Posted 3 years ago #

   I've applied your javascript, it works prefectly.
   I'm adding a simple control: I've added the box the "closed" class, then if the input inside it contains some values I remove the "closed" class.
   I'll post this as soon as it works.
   Thanks again,
   Davide

6. nutsmuggler
   Member
   Posted 3 years ago #

   Ok, here we go:

   jQuery(document).ready( function() {
   	    	jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');
   	    	if(jQuery("textarea[@name=event_notes]").val()!="") {
   			   jQuery("textarea[@name=event_notes]").parent().parent().removeClass('closed');
   			}
   			jQuery('.postbox h3').click( function() {
   	        	jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
   	    	});
   	});

   It works like a charm, but I would like to extend it and make it more general. As you see, the removeClass part works only for one specific postbox; which is the syntax to make it more general? I am thinkng about something like "if an input or a textarea is not empty, remove the "closed" class from its parent parent."
   Cheers,
   Davide

7. Roger Theriault
   Member
   Posted 3 years ago #

   You select things just like CSS, plus a few more options...

   So it would be jQuery('.postbox :text') for example. Although that may not be the optimal way to do it (see below).

   There's a tutorial on selectors on the jQuery site http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want or you might want to pick up "jQuery in Action", which is an excellent book.

   You'll want to check out Traversing and filters to learn how to manipulate a matched set, it will allow you to eliminate the if statements and repetitive selectors.

   i.e.
   

   jQuery('.postbox').hasClass('closed').find(':text').filter(
       function (index) { return $(this).val()!="";
   }).parent().removeClass('closed');

   (I haven't tested this... hopefully it's close to right :-)
   It selects everything with postbox class, then selects the subset with a class of closed (not absolutely needed), then selects the text input element children, compares these to de-select the empty ones, then selects the parent divs, and finally removes your closed class.

8. nutsmuggler
   Member
   Posted 3 years ago #

   Thanks for the suggestions, I'll give them a try later. Thanks for all the discussion, I've probably learned more about jQuery here than in the rest of my attempts.
   Cheers, Davide

Topic Closed

This topic has been closed to new replies.