Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Hide a row when input disabled

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #239505
    Kognak
    Participant

    Hi,

    here’s my codepen.io :
    http://codepen.io/Kognak/pen/VapZar

    I’m able to hide the input when disabled, but I would like to hide the row (tr) completely.

    Do you know how to resolve this problem ?

    Thank you very much

    #239511
    Paulie_D
    Moderator

    You’d need javascript for that.

    CSS has no “parent” selector.

    #239512
    Paulie_D
    Moderator

    In Jquery it would be something like:

    $('input.product-quantity:disabled').closest('tr').hide();
    
    
    #239527
    Kognak
    Participant

    I feared this. I read on some blogs and forums it doesn’t work, but they were old (2012 for example) so I hoped it will work now only with CSS.

    I think I forget something because it doesn’t work. I added your code on Codepen.io, in both html (inside <script>) and JS. What’s missing on my part ?

    Thank you a lot for your help. Very appreciated.

    #239533
    Paulie_D
    Moderator

    Did you forget to link JQuery in your Codepen?
    http://codepen.io/Paulie-D/details/wGJBBe/

    #239536
    Kognak
    Participant

    It works… Don’t understand why before it did not.

    Thank you very much Paulie !

    #239537
    Kognak
    Participant

    Hi,

    so it works on Codepen, but not on my website.

    I use Genesis Framework and added ‘<script>$(‘input.product-quantity:disabled’).closest(‘tr’).hide();</script>’ inside “Page-specific Scripts” but when I load the page, I can read this error :
    “TypeError: $ is not a function. (In ‘$(‘input.product-quantity:disabled’)’, ‘$’ is undefined)”.

    I’m not familiar at all with javascript and jquery.

    Inside the head the website loads many things :
    /wp-includes/js/jquery/jquery.js?ver=1.11.3′></script>
    /wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></scrip
    /wp-includes/js/underscore.min.js?ver=1.6.0′></script>
    /wp-includes/js/backbone.min.js?ver=1.1.2′></script>
    /wp-includes/js/jquery/ui/core.min.js?ver=1.11.4′></script>
    /wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4′></script’

    I’ve no idea how to implement that script which perfectly works on Codepen. Can you please give me a clue ?

    #239538
    Paulie_D
    Moderator

    Well that is a very old version of JQuery.

    And you would need to run the script after JQuery loads.

    #239541
    Kognak
    Participant

    Finally it works. Can’t believe it ! :)

    I may have a last question. I updated the Codepen :
    http://codepen.io/Kognak/pen/yOMYRp

    If all of rows of one tbody have the disabled input, how can I hide the whole tbody (with title and headings) ?

    I tried something, inspired by some posts, but doesn’t work.
    ‘$(‘tbody td’).each(function() {
    if ($(this).find(‘input.product-quantity:disabled’).closest)
    $(this).hide});’

    I think my mistakes are :
    – not “saying” “all of the rows must have disabled input”,
    – not saying to hide the tbody itself,
    – not saying to check each input inside that tbody.

    I hope you’ll spend some time to help me. I think I’m not far away from the solution.

    #239604
    Paulie_D
    Moderator

    I’m no Jquery expert…I just cut and paste bits of code and hopefully it works.

    My feeling here is that you’re going about this the wrong way (of course, as I said, I’m no expert).

    I think I would prefer to hide everything by default and only show the thing if it has non-disabled inputs.

    I think that might be easier.

    Otherwise, I think you ‘d have count the number of inputs, then count the number of disabled inputs and if the two numbers are the same then hide parent.

    Dunno…I guess you could go either way….

    Hope someone better at JQuery can help…if not I’ll take a stab tomorrow (as it’s Saturday night here).

    #239605
    Kognak
    Participant

    Interesting !

    So if I understand well :
    – hide by default (with CSS or Jquery ?) all “tbody”,
    – display “tbody” as soon as there’s no input:disabled.

    That sounds easier. But still don’t know how to achieve it ! :D

    Thanks for your help and good night. Hope you’ll have clues or solution. :)

    #239607
    Paulie_D
    Moderator

    Oh…who am I kidding?

    http://codepen.io/Paulie-D/pen/dMvMBq

    #239610
    Kognak
    Participant

    Hi Paulie,

    you got me ! :D

    It works on your Codepen, but not mine.

    I think I understand your JS, but still not able to adapt it to my situation. Your JS calls the table’s class. In my case (which I’ve to admit wasn’t shown on my Codepen – I corrected it), I’ve no class, but an attribute, the same for each tbody.

    I checked on https://api.jquery.com to find something to get my attribute. Or inspiring by CSS. But “attribute” isn’t a wonderful keywords. The table I’ve is generated by a plugin and uses the Woocommerce attribute as part of the table.

    I tried for example to replace .mytable by [attributes=”attr”], without success of course. What doesn’t help me is I don’t even know of to “name” such things in order to perform a good search.

    http://codepen.io/Kognak/pen/yOMYRp

    I hope you can give me a clue. Please. :)

    #239617
    Paulie_D
    Moderator

    What exactly is the WooCommerce attribute being applied?

    https://api.jquery.com/has-attribute-selector/

    #239618
    Kognak
    Participant

    Hi,

    I think the word “attribute” might be confusing. On Woocommerce I add “attributes” to have variations of the products (like size, color, etc.).

    On the table, it looks like that :
    <tbody attributes=”size”>

    I tried to change your code that way :
    if ($(‘[size]’).has(e).length > 0) {
    $(‘[size]’).show();
    } else {
    $(‘[size]’).hide();
    }

    But it doesn’t work.

    Each <tbody> shows a different product (with the variations as rows) and all the products are in the <table>.

    Thank very much, again, for your precious help !

Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.