ansaurus

Question

How to hide nested form from jQuery under IE8

Answer 1

+1 A:

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

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

2010-06-10 19:46:44

Well, to disambiguate the language from all those *other* language run-times in the browser, of course. Sometimes my code is paranoid. Sometimes it is not paranoid enough.

pduel 2010-06-10 21:24:12

My mistake... haven't seen anybody use VBScript or the like for quite some time.Have you tried toggling a class on the div? That way you could set some rules in your CSS to cascade to the table and any other child elements...

2010-06-19 23:55:36

Answer 2

+2 A:

http://api.jquery.com/detach/ might work for you if merely hiding doesn't work - it will remove the element from the dom, but save it so that you can reinsert it if you want to (using http://api.jquery.com/append/ or http://api.jquery.com/appendTo/). You might also try setting the visibility css attribute $(".content-panel").css("visibility","hidden"); as an additional measure (note that that will mean that the element still takes up space, see also http://www.w3schools.com/css/pr_class_visibility.asp) (edit: revert with $(".content-panel").css("visibility","visible");). Last but not least, you never know - maybe just using show(0); and hide(0); works and toggle is borked in some way - not probable, then again I guess murphy applies in this case.

tkolar 2010-06-12 11:03:41

Answer 3

+1 A:

Is it ok with you to wrap the whole form elements with additional table? Something like this:

<!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"&gt;&lt;/script&gt;
</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 just adding all elements under the form to the table you have:

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

ifaour 2010-06-17 14:58:38

ansaurus

tags:

views:

answers:

How to hide nested form from jQuery under IE8

related questions