Custom Alert doesn't work in JQuery UI

[pintee]

Hi,

As the title states, I am encountering a weird bug in javascript. In my php I am echoing out javascript that renders a jquery popup alert box to the screen.

echo '<link rel="stylesheet"   
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
                <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
                <link rel="stylesheet" href="/resources/demos/style.css" />
                <script src="../functions.js"></script>
                <script type="text/javascript"> $(document).ready(function() { JQueryAlert("POO!", 120); }); </script>';

functions.js

 function JQueryAlert(message,windowHeight){
    if (!windowHeight) var windowHeight = 470;

    $("#msgdialog").remove();

    $("body").append("<div id=\'msgdialog\'></div>"); 

    thatmsg = $("#msgdialog");

    $("#msgdialog").dialog({
        resizable: false,
        draggable: false,
        width: 770,
        height: windowHeight,
        context: thatmsg,
        modal: true,
        autoOpen: false,
        buttons: {
            "Cancel" : function (){
                thatmsg.dialog("close");
            },
            "OK" : function (){
                loadPage("combat.php");
            }
        }
    });     

    $("#msgdialog").html(message);
    $("#msgdialog").dialog(\'open\');
}

However, it only displays the pop up alert box sometimes. The rest of the time the screen just flashes and doesn't display the pop up box. Any ideas why it is behaving this way?? Thanks for your time.

 

[nogray]

Probably because you are escaping the quotes in open command and the dialog id in your function

\'msgdialog\'

(\'open\');

[pintee]

Ah. Thanks for pointing that out. Corrected it, but the problem remains......

[nogray]

Another thing to consider is the (context: thatmsg) is thatmsg globally defined?

[Irate]

Another thing to consider is the (context: thatmsg) is thatmsg globally defined?

 

 

thatmsg = $("#msgdialog");

 

Right there.

 

Edit: Sorry, didn't see the globally part.

[nogray]

Than it's most likely something else in your page that causing the error (e.g. another javascript error) because I tested your code and it seems to work fine http://jsfiddle.net/2uYE8/

[pintee]

I debugged it using chrome's js console and apparently its giving me a: Uncaught TypeError: Object [object Object] has no method 'dialog'