Use jQuery to conditionally hide elements in Quick Edit

Question

So I worked out how to do this, with a little help from Tonya Mork @ KnowTheCode and a tutorial on adapting the quick edit by Rachel Carden.

I need to refactor the code down, there’s still a lot of repetition but I’m pretty much a Javascript/jQuery novice, so please bear with me.

Anyway the solution is as follows:

My custom admin css, saved in my child theme as product-admin-quick-edit.css:

ul.fashion-category-checklist,
ul.fashion-brand-checklist,
ul.fashion-season-checklist,
ul.gender-checklist,
ul.food-drink-category-checklist,
ul.food-drink-brands-checklist,
ul.country-of-origin-checklist {
    display: none;
}

body.wp-admin span.inline-edit-categories-label {
    display: none;
}

Then I have my jQuery, saved in my child theme /js folder as product-admin-quick-edit-jquery.js:

(function($) {

  // we create a copy of the WP inline edit post function
  var $wp_inline_edit = inlineEditPost.edit;
  // and then we overwrite the function with our own code
  inlineEditPost.edit = function( id ) {

    // "call" the original WP edit function
    // we don't want to leave WordPress hanging
    $wp_inline_edit.apply( this, arguments );

    // now we take care of our business

    // get the post ID
    var $post_id = 0;
    if ( typeof( id ) == 'object' )
      $post_id = parseInt( this.getId( id ) );

    if ( $post_id > 0 ) {

      var productCategoryQuickEdit = jQuery('ul.product_cat-checklist');

      var fashionQuickEditCheckBox = jQuery('ul.product_cat-checklist li label input#in-product_cat-46:checkbox');
      var fashionCategoryQuickEdit = jQuery('ul.fashion-category-checklist');
      var fashionBrandQuickEdit = jQuery('ul.fashion-brand-checklist');
      var fashionSeasonQuickEdit = jQuery('ul.fashion-season-checklist');
      var fashionGenderQuickEdit = jQuery('ul.gender-checklist');

      var foodDrinkQuickEditCheckBox = jQuery('ul.product_cat-checklist li label input#in-product_cat-45:checkbox');
      var foodDrinkCategoryQuickEdit = jQuery('ul.food-drink-category-checklist');
      var foodDrinkBrandsQuickEdit = jQuery('ul.food-drink-brands-checklist');
      var foodDrinkCountryQuickEdit = jQuery('ul.country-of-origin-checklist');

      productCategoryQuickEdit.prev().prev().css("display", "block");

      if (fashionQuickEditCheckBox.is(':checked')) {
        fashionCategoryQuickEdit.css("display", "block");
        fashionBrandQuickEdit.css("display", "block");
        fashionSeasonQuickEdit.css("display", "block");
        fashionGenderQuickEdit.css("display", "block");
        fashionCategoryQuickEdit.prev().prev().css("display", "block");
        fashionBrandQuickEdit.prev().prev().css("display", "block");
        fashionSeasonQuickEdit.prev().prev().css("display", "block");
        fashionGenderQuickEdit.prev().prev().css("display", "block");
      }

      fashionQuickEditCheckBox.change(function(){
        if (this.checked) {
          fashionCategoryQuickEdit.css("display", "block");
          fashionBrandQuickEdit.css("display", "block");
          fashionSeasonQuickEdit.css("display", "block");
          fashionGenderQuickEdit.css("display", "block");
          fashionCategoryQuickEdit.prev().prev().css("display", "block");
          fashionBrandQuickEdit.prev().prev().css("display", "block");
          fashionSeasonQuickEdit.prev().prev().css("display", "block");
          fashionGenderQuickEdit.prev().prev().css("display", "block");
        } else {
          fashionCategoryQuickEdit.css("display", "none");
          fashionBrandQuickEdit.css("display", "none");
          fashionSeasonQuickEdit.css("display", "none");
          fashionGenderQuickEdit.css("display", "none");
          fashionCategoryQuickEdit.prev().prev().css("display", "none");
          fashionBrandQuickEdit.prev().prev().css("display", "none");
          fashionSeasonQuickEdit.prev().prev().css("display", "none");
          fashionGenderQuickEdit.prev().prev().css("display", "none");
        }
      });

      if (foodDrinkQuickEditCheckBox.is(':checked')) {
        foodDrinkCategoryQuickEdit.css("display", "block");
        foodDrinkBrandsQuickEdit.css("display", "block");
        foodDrinkCountryQuickEdit.css("display", "block");
        foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
        foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
        foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
      }

      foodDrinkQuickEditCheckBox.change(function(){
        if (this.checked) {
          foodDrinkCategoryQuickEdit.css("display", "block");
          foodDrinkBrandsQuickEdit.css("display", "block");
          foodDrinkCountryQuickEdit.css("display", "block");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
        } else {
          foodDrinkCategoryQuickEdit.css("display", "none");
          foodDrinkBrandsQuickEdit.css("display", "none");
          foodDrinkCountryQuickEdit.css("display", "none");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "none");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "none");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "none");
        }
      });

    }

  };

})(jQuery);

Then I enqueue these files in my functions.php:

add_action( 'admin_enqueue_scripts', 'load_my_custom_wp_admin_style' );
function load_my_custom_wp_admin_style() {
    wp_register_style( 'product_admin_quick_edit_css', get_stylesheet_directory_uri() . '/product-admin-quick-edit.css', false, '1.0.0' );
    wp_enqueue_style( 'product_admin_quick_edit_css' );
}

add_action( 'admin_print_scripts-edit.php', 'load_custom_quick_edit_scripts', 9999, 2 );
function load_custom_quick_edit_scripts(){
    wp_enqueue_script( 'product-admin-quick-edit-jquery', get_stylesheet_directory_uri() . "/js/product-admin-quick-edit-jquery.js", array( 'jquery', 'inline-edit-post' ), CHILD_THEME_VERSION, true );
}

Making sure to enqueue the scripts late at 9999, and making them dependent on inline-edit-post javascript from WP Core.

I’ll refactor the jQuery into some sort of loop for adding and removing the css classes, it should reduce it down quite a bit.

Hope it helps someone else, I couldn’t find any other material on dynamically displaying taxonomies in quick edit dependent on other taxonomies settings, so guess there isn’t much need for it.

Related Posts: