Menu
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.
649
Syntax: $(selector). hide(speed,callback);
If you want to hide the button on start, just use $("#dropdownbutton"). hide(); as the first line in the function inside $() . Like this!
Assuming all images, the following should work: $("img"). hide(); Otherwise, using selectors, you could find all images that are child elements of the containing div, and hide those.
To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.
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!
64
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With