JQuery show / hide not working

Question

This is really strange, and for several hours I hit my head about it and I can’t understand.

I use jQuery to hide some elements in the form (labeled with the .read-only class) and show other elements (labeled with the .edit-version class).

Basically, the user clicks on the edit link, and inside the parent of this link, read-only objects are hidden and the editing elements (inputs) are displayed. It works great.

The problem arises in the response of the server, which passes the opposite case. It finds a div that places the form, and hides the editing versions and displays read only. Other than that, no. Here is the code:

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

I checked that it received the correct div ( #employee-card-49 ), and is the correct element, and this is the only element with this identifier on the page.

I checked that $('.edit-version', host).length correct. It returns 3, indicating that it detects three elements.

I checked that every returned item from $('.edit-version', host) correct. I can get their properties.

Javascript errors do not appear, but calls to hide () and show () just don't change the display property at all. I even tried calling css('display', 'none') no avail.

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

Any help would be appreciated.

Answer 1

This is not a great solution, but it really worked. How to get rid of the host scope in general, and instead using the scope in the selector solved the problem.

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

Weird

Answer 2

I came across situations where show() and hide() do not work due to relative positioning. I would check to make sure that you don't have any weird positioning set, or at least that the position of the child elements matches the parents. Also, have you noted twice that the display attribute is not set by anything else? perhaps something made him block or embed in `! important!

Answer 3

Try the following:

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

Answer 4

Try installing it with !important to make sure that nothing else overrides it. Also try setting another CSS property that is unlikely to be set to see if it really affects the objects.

 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 out Firebug:

• To see CSS and any inheritance values ​​that it may have.
• The calculated width, height, fill, etc. object (layout and calculated tab)

Answer 5

For what it's worth, I had a different show / hide behavior between Chrome and Safari. It turns out that Safari needs an AND element, not just an identifier. So:

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

NOT

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

It is probably best to be detailed anyway.