Hide a row when input disabled

[Kognak]

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

[Paulie_D]

You’d need javascript for that.

CSS has no “parent” selector.

[Paulie_D]

In Jquery it would be something like:

$('input.product-quantity:disabled').closest('tr').hide();

[Kognak]

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.

[Paulie_D]

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

[Kognak]

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

Thank you very much Paulie !

[Kognak]

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 ?

[Paulie_D]

Well that is a very old version of JQuery.

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

[Kognak]

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.

[Paulie_D]

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).

[Kognak]

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. :)

[Paulie_D]

Oh…who am I kidding?

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

[Kognak]

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. :)

[Paulie_D]

What exactly is the WooCommerce attribute being applied?

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

[Kognak]

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 !

[Author]

Posts