CODEWITHSUNDEEP
javascriptjqueryhtml
Fabrizio
Fabrizio

Reputation: 51

page blank after opening jquery dialog

I have a small issue with my jQuery dialog. This is the body of the .html page

<body onload="document_load()">

    <div class="center" style="position: relative;">
        <canvas style="position: absolute;" id="canvas" width="1300" height="1000" tabindex="0"></canvas>

        <input type="button" id="state" value="Print State" style="position: absolute; top: 100px; left: 5px; width: 110px; height: 25px;" ondblclick="printState();" />
        <input type="button" id="opener" value="Information" style="position: absolute; top: 140px; left: 5px; width: 110px; height: 25px;" onclick="open();" />
        <label id="label" style="position: absolute; top: 400px; left: 200px; width: 500px; height: 19px; font: 200; color:black"></label>


        <div id="dialog-message" title="Important information" style="display:none">
            <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
            <div style="margin-left: 23px;">
                <p>
                    Example
                    <br /><br />
                    Example.<br /><br />
                    Another line which demonstrates the auto height adjustment of the dialog component.
                </p>
            </div>
        </div>

    </div>
</body>

The "opener" button should open the dialog, and this is the open() function :

    function open() {
    $("#dialog-message").dialog({

        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                return false;
            }
        }
    });
}

But when I click the button the page turns blank and there is nothing. Why? I tried to put the dialog-message <div> out of center <div> , but the result is the same.

Upvotes: 0

Views: 779

Answers (1)

K K
K K

Reputation: 18099

Change the function name from open to something else. I am not sure why is this happening. Maybe because there is some internal function too of the same name. Demo: http://jsfiddle.net/GCu2D/531/

function openD() { // I changed the name and it worked.
    $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "OK": function() {
                $(this).dialog("close");
                return false;
            }
        }
    });
}

Upvotes: 1

Related Questions