Home Support General HivePress How to set up indeterminate checkboxes into hivepress

How to set up indeterminate checkboxes into hivepress

  • Author
    Posts
  • fobregn

    Hi, everybody.

    Using the checkbox option (division and sub-divisions), i notice that when checking a sub-division, the main division is not automatically marked as indeterminate checkbox. I know that it’s a matter of using javascript coding (and I have the code that works), but where shall I put this code in hivepress file (the javascript one).

    Here’s the code I tried separately:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
    <h1>Indeterminate Checkboxes</h1>
    <ul>
      <li>
        <input type="checkbox" name="tall" id="tall">
        <label for="tall">Tall Things</label>
        <ul>
          <li>
            <input type="checkbox" name="tall-1" id="tall-1">
            <label for="tall-1">Buildings</label>
          </li>
          <li>
            <input type="checkbox" name="tall-2" id="tall-2">
            <label for="tall-2">Giants</label>
            <ul>
              <li>
                <input type="checkbox" name="tall-2-1" id="tall-2-1">
                <label for="tall-2-1">Andre</label>
              </li>
              <li>
                <input type="checkbox" name="tall-2-2" id="tall-2-2">
                <label for="tall-2-2">Paul Bunyan</label>
              </li>
            </ul>
          </li>
          <li>
            <input type="checkbox" name="tall-3" id="tall-3">
            <label for="tall-3">Two sandwiches</label>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" name="short" id="short">
        <label for="short">Short Things</label>
    
        <ul>
          <li>
            <input type="checkbox" name="short-1" id="short-1">
            <label for="short-1">Smurfs</label>
          </li>
          <li>
            <input type="checkbox" name="short-2" id="short-2">
            <label for="short-2">Mushrooms</label>
          </li>
          <li>
            <input type="checkbox" name="short-3" id="short-3">
            <label for="short-3">One Sandwich</label>
          </li>
        </ul>
      </li>
    </ul>
      
        <script>
            $('input[type="checkbox"]').change(function(e) {
              var checked = $(this).prop("checked"),
                  container = $(this).parent(),
                  siblings = container.siblings();
              container.find('input[type="checkbox"]').prop({
                indeterminate: false,
                checked: checked
              });
              function checkSiblings(el) {
                var parent = el.parent().parent(),
                    all = true;
                el.siblings().each(function() {
                  let returnValue = all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
                  return returnValue;
                });
                if (all && checked) {
                  parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                  });
                  checkSiblings(parent);
                } else if (all && !checked) {
                  parent.children('input[type="checkbox"]').prop("checked", checked);
                  parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                  checkSiblings(parent);
                } else {
                  el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                  });
                }
              }
              checkSiblings(container);
            });
        </script>
    </body>
    </html>

    Thank you.

    fobregn

    Here’s what I get :
    View
    And I want to change it to indeterminate checkboxes
    View

    ihor developer

    Sorry, if you mean displaying/hiding some content (e.g. sub-items or other fields) depending on the checkbox state there’s no such feature at the moment, this would require custom implementation.

    fobregn

    Sorry for the last message, here’s the good one:

    Perhaps I didn’t explain well. I don’t want to display/hide some contents using checkbox. I have the javascript code in order to convert the main checkbox into indeterminated one (if some of its sub-items are checked, as you can see in the image), using other example.

    <http://imgfz.com/i/EVvWcpY.png>View

    I just need to know where to put that code into a hivepress file that manage checkboxes (js file into hivepress), in order that the indeterminated checkbox into main checkbox works into search options or add/modify listing, and avoid what i show you in this image (sub option is checked but the main option is not checked automatically as indeterminated).

    View

    This is the js code I want to place into hivepress, it works into normal web sites, but i don’t know where to place it into hivepress:

    $(‘input[type=”checkbox”]’).change(function(e) {
    var checked = $(this).prop(“checked”),
    container = $(this).parent(),
    siblings = container.siblings();
    
    container.find(‘input[type=”checkbox”]’).prop({
    indeterminate: false,
    checked: checked
    });
    function checkSiblings(el) {
    var parent = el.parent().parent(),
    all = true;
    el.siblings().each(function() {
    let returnValue = all = ($(this).children(‘input[type=”checkbox”]’).prop(“checked”) === checked);
    return returnValue;
    });
    if (all && checked) {
    parent.children(‘input[type=”checkbox”]’).prop({
    indeterminate: false,
    checked: checked
    });
    checkSiblings(parent);
    } else if (all && !checked) {
    parent.children(‘input[type=”checkbox”]’).prop(“checked”, checked);
    parent.children(‘input[type=”checkbox”]’).prop(“indeterminate”, (parent.find(‘input[type=”checkbox”]:checked’).length > 0));
    checkSiblings(parent);
    } else {
    el.parents(“li”).children(‘input[type=”checkbox”]’).prop({
    indeterminate: true,
    checked: false
    });
    }
    }

    checkSiblings(container);

    As you can see, this code works only with declared type of value “checkbox”

    fobregn

    By the way, my suspects lead me to a file called “/Applications/MAMP/htdocs/wordpress/wp-content/plugins/hivepress/includes/fields/class-checkboxes.php”, but I’m not sure where to add my javascript code there.

    ihor developer

    Thanks for the details, I understand the issue, but this requires advanced customizations. If you’re familiar with JS please try targeting this Checkboxes field via a CSS class or some custom attribute, for example:

    $('.hp-field--checkboxes').each(function() {
        // custom logic here.
    });

    You don’t have to add the JS code to the HivePress files directly, you can load it via a third-party code (e.g. with wp_enqueue_script function).

    fobregn

    about the first one : where shall i put this code?

    fobregn

    about the second one (wp_enqueue_script) : In which file shall i put this function?

    ihor developer

    Sorry, loading JS scripts is not exactly related to HivePress functionality, if you’re familiar with customizations please try adding custom PHP code to the child theme’s functions.php file (if there’s a child theme) or using this plugin https://wordpress.org/plugins/code-snippets/ Then you can load a custom JS script via this function https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    fobregn

    In that case, you’re talking about “listinghive” as the child theme, aren’t you?

    ihor developer

    If you use ListingHive then sure, you can create a child theme for it if you plan to customize its layouts. Please don’t edit the theme/plugin files directly since any update will erase changes. You can keep custom PHP snippets via the Code Snippets plugin (the easiest way) or by creating a child theme (if you’re familiar with customizing themes).

    fobregn

    Hi.

    I followed your directions about using code snippets. But I still can’t get indeterminate checkboxes work.

    Here are the image of what I did using code snippets:

    the first part of the script
    This is the first part of the script, because I need jquery library placed in head label.

    second part1 second part2
    These two images represent the script that makes indeterminate checkboxes work.

    In both, I use action references; but it doesn’t works. Shall I use “enqueue_script” or not?

    fobregn

    As I can see, these images are not well shown. I can give you the link
    The first one
    The second one – part 1
    The second one – part 2

    fobregn

    And in all cases, I use the input type “checkbox” presented in hivepress plugin and listinghive theme in order to make all work, the rest is just js normal code. Still, I don’t get what I want (I use this example to show you what I want)
    example

    ihor developer

    I’m sorry for the inconvenience, but customization is not part of HivePress support we offer, unfortunately we can’t verify and debug the custom code snippets, but we are glad to provide some general guidance (e.g. where to find the related files/functions). If you’re familiar with the WordPress customizations please try adding custom PHP/JS code, if not you can consider hiring someone for assistance https://www.fiverr.com/categories/programming-tech/wordpress-services/customization

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.