CODEWITHSUNDEEP
jquery
Tim Sullivan
Tim Sullivan

Reputation: 16888

jQuery show/hide not working

This is really strange, and I've been beating my head against it for hours now and can't figure it out.

I'm using jQuery to hide some elements on a form (tagged with the class .read-only) and show other elements (tagged with the class .edit-version).

Basically, the user clicks an edit link, and within the parent of that link, the read-only items are hidden and the edit items (inputs) are displayed. This works fine.

The problem happens in the response from the server, which is passing back the opposite case. It finds the div that's hosting the form, and it hides the edit versions and displays the read only. Except it doesn't. Here's the code:

host = $('#employee-card-49');
$('.edit-version', host).hide();
$('.read-only', host).show();

I've verified that it's got the correct div (#employee-card-49) is found, and is the right item, and is the only item with that id on the page.

I've verified that $('.edit-version', host).length is correct. It returns 3, indicating it's finding the three elements.

I've verified that each returned item from $('.edit-version', host) is correct. I can get the properties of them.

No javascript errors come up, but the hide() and show() calls just don't modify the display property at all. I've even tried calling css('display', 'none') without avail.

If I change the call to $('.edit-version').hide() call, it works, but that would affect other divs on the page that I don't want to affect.

Any help would be appreciated.

Upvotes: 6

Views: 22529

Answers (5)

cbmtrx
cbmtrx

Reputation: 620

For what it's worth, I was getting different show/hide behavior between Chrome and Safari. Turns out Safari needed the element AND the ID, not just the ID. So:

$('form#myform').hide(); //Correct

NOT

$('#myform').hide(); //Problematic

Probably better to be verbose anyway.

Upvotes: 0

Tim Sullivan
Tim Sullivan

Reputation: 16888

This isn't a great solution, but it did work. Getting rid of host scope altogether and instead using the scope in the selector itself solved the problem.

$('#employee-card-49 .edit-version').hide();
$('#employee-card-49 .read-only').show();

Weird.

Upvotes: 1

Gary Green
Gary Green

Reputation: 22395

Try setting it with !important to make sure nothing else is overriding it. Also try setting another CSS property, that's unlikely to be set just to see if it does act on the objects at all.

host = $('#employee-card-49');
$('.read-only', host).css({ display: 'block !important',
                            visibility: 'visible !important',
                            // Set unlikely property and see if anything changes
                            letter-spacing: '10px !important' });

Also check in Firebug:

  • To see the CSS and any inheritance values it may have.
  • The computed width, height, padding, etc of the object (layout & computed tab)

Upvotes: 0

Dimitri
Dimitri

Reputation: 7013

Try this:

host = '#employee-card-49';
$('.edit-version', host).hide()
$('.read-only', host).show();

Upvotes: 0

Thomas Shields
Thomas Shields

Reputation: 8943

I've encountered situations where show() and hide() don't work due to relative positioning. I'd check to make sure you don't have any weird positioning set, or at least that the position of child elements matches the parents. Also, have you double checked that the display attribute isn't getting set by anything else? maybe something's setting it to block or inline with `!important!

Upvotes: 6

Related Questions