Button click in IE hiding content which is correctly should in Chrome/Firefox

Question

I have a web page which I have a right hand panel with different content in - which is populated as a result of clicking a link in left hand anchor tags. The Policy" link content has a button with a click event.

If you click on this button it will display the output in a label in this right hand panel (in this case a result of a random number). This works fine in chrome/firefox but in IE the panel gets hidden as soon as the button is clicked.

Debugging through the code in IE/Edge I can see that the label in the panel gets updated but I'm not sure why in IE it then decides to hide the panel. The only clue I see is that the console in IE shows

HTML1300: Navigation occurred.

I've extracted the simple repro files and am looking for any assistance that can explain what IE/Edge are doing and how to remedy it so that I get same behaviour as Chrome.

REPRO.HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="js/jquery.js"></script>
    <script src="js/repro.js"></script>
    <script src="js/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>abc</h1>
        </div>
        <div class="row">
                <div class="col-md-6">

                <div id="mainpanel" class="well bs-component panel panel-    default">
                    <h2>Jumper Details</h2>
                    <form>                        

                    <fieldset class="form-group">
                        <!-- Repro1 Content In Panel-->
                            <div class="checkbox">                                
                                <a href="#"     onclick="displayContent('repro1')">Membership</a>
                            </div>

                            <!-- Policy Content In Panel -->
                            <div class="checkbox">                                
                                <a href="#" onclick="displayContent('repro2')">Policy</a>
                            </div>
                        </fieldset>

                    </form>
                </div>
            </div>

            <div class="col-md-6">
                <div id="contentpanel" class="panel panel-default ">
                    <div id="cp_inner" hidden>
                        <div class="panel-heading">
                            <h3 id="cp_heading">Content Panel Heading</h3>
                        </div>

                        <div class="panel-body">
                            <div id="cp_content">
                                <!--Content will be displayed in here..... -->
                            </div>
                        </div>
                        <div class="panel-footer ">
                            <!--   Possible Button to be clicked to confirm     that you have read and checkbox will be updated -->
                            <button>OK (TO BE IMPLEMENTED)</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

REPROCONTENT1.HTML

<div>    
    <label id="ABC1">This is a test label for repro 1</label>
</div>

REPROCONTENT2.HTML

<form>
    <div class="form-group">
        <button id="ValidateButton" class="btn"     onclick="validate123()">Validate</button>
    </div>
    <div>
        <label id="PolicyResult" hidden></label>
        <label id="Result"></label>
    </div>
</form>

<script>       
    function validate123() {
        var xresult = Math.floor((Math.random() * 3) );

        //Display results
        var sResult = "";

        switch (xresult) {
            case 0:    
                sResult = "Result 0"
                break;
            case 1:
                sResult = "Result 1"
                break;
            case 2:
                sResult = "Result 2"
                break;
            case 3:
                sResult = "Result 3"
                break;

            default:
                sResult = "<p>Unknown</p>";
                break;
        }

        //Display the output string
        document.getElementById('Result').style.display = "block";
        document.getElementById('Result').innerHTML = sResult
    }
</script>

REPRO.JS

var KnownChkItems = [
     { Name: "Repro1", Heading: "Membership", ContentURL: "content/reproContent1.html" },
     { Name: "Repro2", Heading: "Policy", ContentURL: "content/reproContent2.html" },
]

function displayContent(name) {
// This will get the content pages for each of the check items.
//  It is done this way to separate the content details from the basic page framework.

var contentHeading = "";
var chkItem = findKnownChkItem(name);
if (chkItem != null) {
    $("#cp_inner").attr("hidden", false)

    if (name.toLowerCase() === "repro2") {
        $.ajaxSettings.cache = false;

        $("#cp_content").load(chkItem.ContentURL + '?caching=' + new Date().getTime(), function () {
            console.log("policy content");
        });

    }
    else {            
        $("#cp_content").load(chkItem.ContentURL);
        console.log(name + " content");
    }
    $("#cp_heading").text(name);
}
else {
    // display unknown chkitem detail
//    $("#cp_inner").attr("hidden", true)
}

}


function findKnownChkItem(name) {
// case insensitive search of names and Headings against the KnownChkItems array
// we use these KnownChkItems to set content and headings for the content panel.

//Search Names
for (var i = 0; i < KnownChkItems.length; i++) {
    if (KnownChkItems[i].Name.toLowerCase() === name.toLowerCase()) {
        return KnownChkItems[i];
        break;
    }
}

//Search Headings
for (var i = 0; i < KnownChkItems.length; i++) {
    if (KnownChkItems[i].Heading.toLowerCase() === name.toLowerCase()) {
        return KnownChkItems[i];
        break;
    }
}
return null;
}

Answer 1

Try using the display property instead of "hidden".

$("#cp_inner").attr("display", "none"); // to hide

$("#cp_inner").attr("display", ""); // to show. "block" and "inline" also work but look them up before you use them to understand the difference.

Button click in IE hiding content which is correctly should in Chrome/Firefox

Question

1 answers

solution1
0 2015-12-10 18:44:00

Button click in IE hiding content which is correctly should in Chrome/Firefox

Question

1 answers

solution1 0 2015-12-10 18:44:00

solution1
0 2015-12-10 18:44:00