jQuery show/hide and table-cell

Bloke · 2010-06-16 10:29:35

I’m trying to show/hide a bunch of table cells when a select list is changed, and also on page load. Here’s the pseudocode for the function:

jQuery(function() {
jQuery("#smd_selector").change(function(event) {
	jQuery("#some_td_selector").each(function() {
		if (some_test) {
			jQuery(this).hide();
		} else {
			jQuery(this).show();
		}
	});
}).change();
});

It works as I alter the select list but not on page load. From my rudimentary understanding of jQuery, the above will wait until the DOM is ready, bind the change event to the select list and then fire the change() event to simulate someone altering the list. It seemed to be doing nothing but every console.log() message was showing up fine: it’s definitely running.

So I dug further and found that something — I don’t know what — is setting the table cells to display:table-cell after my script has run and set some of them to display:none. I found this out by using Opera with it’s particularly slow-ass javascript engine. I actually observed my script running through the table and ‘hiding’ the cells, then a few moments later they unhid and the whole table was displayed.

This is all running from my own tab on the admin side. There’s nothing else interfering as far as I can tell but clearly something — TXP, jQuery or the browser — is overriding my code. I’ve disabled other admin-side plugins one at a time. No change. I tried binding the event to window load in the hope I could run after whatever it was that changes the table cells. No joy.

Anybody any ideas on a) what might be causing this, b) things I can try to get round it, c) if the code concept I presented above isn’t the right way to go about this? Many thanks for any pointers, this has me stumped.

the_ghost · 2010-06-16 10:41:33

The problem is table’s cells layout – it’s not like a a set of div’s – all cells interfere each other. You can try this – wrap cell’s content with any tag and than hide this tag.

And you can hide the row (<tr>), if you can do it in your case.

redbot · 2010-06-16 12:51:07

Hi,
for sure I’m too dumb to understand it but why did you append ‘.change()’ a second time at the end of the function? Have you tried deleting it? Or are you doing so in order to apply the behaviour to dinamically created items? In this second case can’t you use the ‘live’ event?

Bloke · 2010-06-16 13:01:31

the_ghost

Thanks for the tip. I might try wrapping each cell in a div but it makes the page awfully heavy — there are upwards of 700 cells on the page!

I’ll probably be better off without using a table, it’s just that I’m using TXP’s built-in table functions to save having to write my own CSS to center the display etc. But maybe just using a containing div and floating everything inside would be better.

The only downside then is that it’s difficult to get all the divs to line up vertically and horizontally to form a perfect grid — especially since I don’t know how big the text is going to be in each ‘cell’. I might have to experiment here. Anybody ever made a table type layout from divs (EDIT: or ULs/LIs) before and made it behave like a table?

redbot

The second change() is to immediately trigger the select list’s change event and thus (I hoped) filter the list on page load (as well as when someone manually changes the dropdown at some point). I once read that was the technique to use, but perhaps in the latest version of jQuery that’s changed.

I’ve never used jQuery’s live thingy. Perhaps that’s another avenue to explore; thanks for the hint. Have you used it before? Any tips on usage or shall I trawl through the manual and try to figure it out? EDIT2: I just read up on live. It seems that it can detect extra elements added to the page after the DOM’s loaded and automatically attach events to them. That’s actually gonna be quite handy for another project I’m embarking upon, but for now, once this list has loaded that’s it; so the extra polliing that live does is probably not going to be of much use.

Cheers for your input guys. Gonna have a think. If anybody else has any insight or workarounds I’d love to hear them.

Last edited by Bloke (2010-06-16 13:13:46)

Bloke · 2010-06-16 14:27:22

Ahaaaaaa, cracked it.

Well, sort of.

First of all I ditched the tables and went with just divs inside a container. I set the inside divs to float which gave me a horrible mush. To make a grid, the only thing I had to do was fix the cell width and height to a known value (about 100px and 40px, plus a bit of padding). That meant very long content spilled out of the boxes so I had to use overflow:hidden, which is a shame but seemingly unavoidable.

I then tried my script again and guess what? It still showed all the cells, but with display:block instead of display: table-cell.

That’s when it clicked that I’d been a complete pillock. I have two input filters and the second one was also triggering, thus undoing the good work that the first had done. D’oh! When I fixed the logic behind that, et voila!

In actual fact, divs work better than tables because when filtering with tables, merely switching off table cells leaves ‘holes’ in the layout. But with divs, everything flows up to the top of the screen. Magic.

Now that’s out of the way I’m going to document this sucker and release it. Watch the forum for an announcement of a very useful plugin later on…

Many thanks to you both for helping me help myself to find my stupidity :-)

redbot · 2010-06-16 21:39:37

Bloke wrote:

The second change() is to immediately trigger the select list’s change event and thus (I hoped) filter the list on page load (as well as when someone manually changes the dropdown at some point). I once read that was the technique to use, but perhaps in the latest version of jQuery that’s changed.

Cool! Thanks for the tip, I never thought about it…
And BTW glad you sorted it out.

the_ghost · 2010-06-17 10:11:35

Block

Thanks for the tip. I might try wrapping each cell in a div but it makes the page awfully heavy — there are upwards of 700 cells on the page!

You can wrap cell’s conent with div by jQuery – http://api.jquery.com/wrapInner/

$('table#tablie_id td').wrapInner('<div class="innerwrap_for_cells_conent" />');

JanDW · 2010-06-18 04:10:10

I’ve never used jQuery’s live thingy

.live() has some performance issues, addressed by .delegate() in 1.4
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/

Textpattern CMS

Textpattern CMS support forum

#1 2010-06-16 10:29:35

jQuery show/hide and table-cell

#2 2010-06-16 10:41:33

Re: jQuery show/hide and table-cell

#3 2010-06-16 12:51:07

Re: jQuery show/hide and table-cell

#4 2010-06-16 13:01:31

Re: jQuery show/hide and table-cell

#5 2010-06-16 14:27:22

Re: jQuery show/hide and table-cell

#6 2010-06-16 21:39:37

Re: jQuery show/hide and table-cell

#7 2010-06-17 10:11:35

Re: jQuery show/hide and table-cell

#8 2010-06-18 04:10:10

Re: jQuery show/hide and table-cell

Board footer