Question

I have a iframe containing div to be shown later that is initially hidden using a class. When I remove the class from the container div, everything inside it is shown. but textbox inside iframe is not shown.

parent.htm

<style>
    .hide
    {
        display: none;
    }
</style>
<script>

    function showSearchWindow(show) {
        if (show) {
            $('div.overlay').removeClass('hide');
        }
        else {
            $('div.overlay').addClass('hide');
        }
    }

</script>

<form id="form1">
<div class='overlay hide'>
    <input type="text" id='txt1' value='test1' />
    <iframe id="frame" src="frame.htm"></iframe>
</div>
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' />
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' />
</form>

frame.htm

//Reference to jQuery 1.4.1 js file

<form id="form1">
     <input type="text" id='txt2' value='test'/>
</form>

when I click ‘btnShow’, ‘txt1’ is shown but ‘txt2’ is not shown.
I did not work in IE 7,8 and 9. in other major browsers it works fine.

Answer 1

Reloading the page after removing the class is the best solution I found so far.

function showSearchWindow(show) {
    if (show) {
        $('div.overlay').removeClass('hide');
    $('#frame').attr('src', 'frame.htm');
    }
    else {
        $('div.overlay').addClass('hide');
    $('#frame').attr('src', 'about:blank');
    }
}

<iframe id="frame" src="about:blank"></iframe