Geek Answers Handbook

How to hide nested form from jQuery in IE8

Html attribute with div containing form containing table:

<!DOCTYPE html> <html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> <head> <style type="text/css"> #content{position:relative} table {border-color:#999;border-style:solid} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <button onclick="javascript:$('.content-panel').toggle();">Toggle</button> <div id="content"> <div class="content-panel"> <form action='' method='post'> <select> <option>a </option> </select> <table> <tr><td>ABCDEF</td></tr> </table> </form> </div> </div> </body> </html>

The switch button should hide the form and its nested table, but this is not done in IE8. (version 8.0.60001) The contents of the form are hidden, but the border of the table continues to be displayed and retains its size. This is due to standard mode; it disappears in quirks mode.

Does anyone have a workaround?

This example page has been reduced to the extent that I can reduce it. If I remove select or any of the divs, the problem goes away. The selection must be present, and the table must be nested in the form, since it will contain the elements of the form.

The page itself is located at: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

I posted this issue earlier with an overly simplified example that was not reproducible. Thank you if you looked at him.

+6
jquery internet-explorer-8
source share
3 answers

http://api.jquery.com/detach/ may work for you if just hiding does not work - it will remove the element from dom, but save it so that you can reinsert it if you want (using http: // api. jquery.com/append/ or http://api.jquery.com/appendTo/ ). You can also try setting the css visibility attribute $(".content-panel").css("visibility","hidden"); as an additional measure (note that this will mean that the item still occupies a space, see also http://www.w3schools.com/css/pr_class_visibility.asp ) (change: return with $(".content-panel").css("visibility","visible"); ). And last but not least, you never know - maybe just using show(0); and hide(0); works, and toggle - in some way - is not likely, then again I assume that murphy is used in this case.

+2
source share

Why does your onclick handler have a javascript schema declaration in it:

 <button onclick="$('.content-panel').toggle();">Toggle</button>
+1
source share

Is it possible to wrap all form elements with an additional table? Something like that:

 <!DOCTYPE html> <html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> <head> <style type="text/css"> #content{position:relative} .inner {border-color:#999;border-style:solid} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button> <div id="content"> <div class="content-panel"> <form action='' method='post'> <table> <tr> <td> <select> <option>a </option> </select> </td> </tr> <tr> <td> <table class="inner"> <tr><td>ABCDEF</td></tr> </table> </td> </tr> </table> </form> </div> </div> </body> </html>

Or simply adding all the elements under the form to the table:

  <form action='' method='post'> <table> <tr> <td> <select> <option>a </option> </select> </td> </tr> <tr> <td> ABCDEF </td> </tr> </table> </form>
+1
source share

More articles:


All Articles