Getting blank webpage with 'event.returnValue is deprecated' warning

Question

I know this has been asked before and it used to be a bug etc, but I am using jQuery v1.11.0 which should have fixed it. The problem I am having is that when I load my page, there is suppose to be a slide in effect (as an intro) then a button appears that will let you enter the main page. In my main page I have a flot real-time chart which is placed in a div called "placeholder". Now everything works perfectly fine, but as soon as i try to nest the "placeholder" div in any other div, I get the event.returnValue is deprecated warning and a blank screen. So basically when I load my screen now, I just get a blank white page, no intro nothing. This is the only code that gets executed:

$(window).load(function () {
        //Display Intro
            $("#main").hide();
            $("#blocker").hide();
            $("#blocker").fadeIn(2000);//make my intro sexy
            $("#btnEnter").show();

    });//when this line is hit, it then throws that warning and I get a blank screen

This is my entire code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebSockets.aspx.cs" Inherits="WebSockets_and_Multi_Threading.WebSockets" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Real Time Display</title>

<!-- Meta tag  (for safari) -->
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport" />

<!-- Javascript -->
<script src="flot/jquery.js" type="text/javascript"></script>
<!-- <script src="jQuery-Mobile/jquery.mobile-1.4.1.js"></script> -->
<script src="flot/jquery.flot.js" type="text/javascript"></script>
<script src="flot/jquery.flot.crosshair.js" type="text/javascript"></script>
<script src="flot/jquery.flot.resize.js" type="text/javascript"></script>
<script src="flot/jquery.flot.threshold.js" type="text/javascript"></script>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="CSS/Intro.css" />
<link href="jQuery-Mobile/jquery.mobile-1.4.1.css" rel="stylesheet" />
<script type="text/javascript">

    $(window).load(function () {
        //Display Intro
            $("#main").hide();
            $("#blocker").hide();
            $("#blocker").fadeIn(2000);
            $("#btnEnter").show();
    });

    function loadMainMenu() {
        debugger;
        $("#blocker").hide();
        $("#btnEnter").hide();
        $("#main").show();
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" ScriptMode="Release" />

    <!-- main menu -->
    <div id="main">
        <h1>ITPS Real Time Monitoring</h1>

        <!-- Div for flot graph -->
        <div id="chart-container">
            <div id="placeholder" style="width: 600px; height: 220px;" />
            <div id="placeholder2"></div>
        </div>
    </div>


    <!-- Intro div -->
    <div id="blocker">
        <img id="introImage" src="Images/Untitled.png" alt="some_text" />
        <input id="btnEnter" type="button" value="Enter" onclick="loadMainMenu();" />
    </div>

    <asp:Label ID="LabelError" runat="server" />

</form>

EDIT: after the $("#btnEnter").show() is called, the console then goes into this little bit of jquery code (from the library) :

// Triggered event must either 1) be non-exclusive and have no namespace, or
            // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
            if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) {

                event.data = handleObj.data;
                event.handleObj = handleObj;

                ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
                        .apply( matched.elem, args );

                if ( ret !== undefined ) {
                    event.result = ret;
                    if ( ret === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }

and in the console(while debugging) ret seems to be 'undefined'.

Answer 1

I found it. You missed a closing div tag here:

<div id="placeholder" style="width: 600px; height: 220px;" />

This should be:

<div id="placeholder" style="width: 600px; height: 220px;"></div>

You cannot use self-closing div tags. This is what's causing your error.

See it here: http://jsfiddle.net/fkXY9/1/

Javascript:

$(document).ready(function () {
    $("#main").hide();
    $("#blocker").hide();
});
$(window).load(function () {
    $("#blocker").fadeIn(2000);
});

function loadMainMenu() {
    debugger;
    $("#blocker").hide();
    $("#btnEnter").hide();
    $("#main").show();
}

HTML:

<form id="form1" runat="server">
    <div id="main">
        <h1>ITPS Real Time Monitoring</h1>
        <!-- Div for flot graph -->
        <div id="chart-container">
            <div id="placeholder" style="width: 600px; height: 220px;"></div>
            <div id="placeholder2"></div>
        </div>
    </div>
    <div id="blocker">
        <img id="introImage" src="Images/Untitled.png" alt="some_text" />
        <input id="btnEnter" type="button" value="Enter" onclick="loadMainMenu();" />
    </div>
</form>

I also moved your hide events to a $(document).ready() function. When it was in the window.load() function it was displaying briefly and then hiding, this fixed that.

Getting blank webpage with 'event.returnValue is deprecated' warning

Question

1 answers

solution1
2 ACCPTED 2014-02-21 15:35:06

Getting blank webpage with 'event.returnValue is deprecated' warning

Question

1 answers

solution1 2 ACCPTED 2014-02-21 15:35:06

solution1
2 ACCPTED 2014-02-21 15:35:06