Ask your JavaScript questions! Pay money and get answers fast! (more info)

Show/Hide Meta Box in Wordpress using Jquery JavaScript

  • SOLVED

I have a function I created in wordpress in the functions.php file that adds a meta box so I can add additional information for my posts. I want to be able to show/hide this meta box everytime the user chooses the specific category I have created (checks and unchecks the category under the category tab). I prefer doing this using jquery.

The tutorial I found does this but I'm unable to implement it because the instructions are not clear. The web page is: http://www.farinspace.com/show-hide-meta-box-by-category/

There's even a youtube video on top where he goes into detail.

This is the wordpress function that creates the meta box:


function ahng_add_video_meta_box() {
add_meta_box(
'ahng_video_meta_box',
'Video Meta Options',
'ahng_video_options_meta_box_func',
'post'
);
}


This is the jquery code:


<script type="text/javascript">
//<![CDATA[

jQuery(function($)
{
function my_check_categories()
{
$('#ahng_video_meta_box').hide();

$('#categorychecklist input[type="checkbox"]').each(function(i,e)
{
var id = $(this).attr('id').match(/-([0-9]*)$/i);

id = (id && id[1]) ? parseInt(id[1]) : null ;

if ($.inArray(id, [4,3]) > -1 && $(this).is(':checked'))
{
$('#ahng_video_meta_box').show();
}
});
}

$('#categorychecklist input[type="checkbox"]').live('click', my_check_categories);

my_check_categories();
});

//]]>
</script>


And this is where I reference the jquery at the bottom of my functions.php (wp_enqueue_script) :


function my_admin_styles() {
wp_enqueue_style('thickbox');
wp_enqueue_script('category_sh_css', 'http://localhost/wordpress/wp-content/themes/ahangerooz/js/category-sh.js', false);
wp_enqueue_style('style_meta_box_css','http://localhost/wordpress/wp-content/themes/ahangerooz/style-meta-box.css');
}

Answers (1)

2012-02-14

Ross Wilson answers:

Hi Karlo,

I can debug this in just a couple minutes if you can give me temporary access to your admin panel. Any way you can do that? Email me [email protected], or pm here on javascriptquestions.

Ross


Karlo Rihoo comments:

Hi Ross,

Thanks for replying so quickly. I wish I could give you temporary access but I'm running this localhost on my work pc and don't have it setup online. Otherwise, do you have any suggestions as to what I'm doing wrong?

Karlo.


Ross Wilson comments:

I sent you a testing site and login so you can upload your theme and we can debug it there. That will be a lot faster than trying to go back and forth here.

Ross


Karlo Rihoo comments:

Hi Ross,
I've uploaded the theme to your themes folder.

Please update me.

Thanks.

Karlo.


Ross Wilson comments:

All Fixed, I sent you a link to download the updated code.

A few details on the fixes:

When you have a .js file you don't need the <script> tags inside the js file.

I also updated your theme to use the theme path variable to include the scripts instead of hardcoding the path.

Let me know if you have any questions.

Ross


Karlo Rihoo comments:

Hi Ross,

Thank you. Looks great.

I will post another question and I was wondering if you might be able to tackle this for me. There's 2 things I want to do.

1) show a certain meta box based on what category is checked, as of right now, it's checking the id of the category. i would rather have it check based on the name of the category.

2) If I click on a specific category, for example videos, all other categories will be unchecked, basically i want one category checked at a time.

I hope that makes sense.

Thanks.