Question

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.

Answer 1

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.