Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Hendry Betts on Aug 21, 2008 07:38
open dhtmlx forum
DHTMLXWindows does not load in IE

I have some very simple code that works great in FF and Safari (Windows) but it fails in IE. I get an exception in IE v6 that reads "Internet Explorer cannot open the Internet site http://172.18.8.79:8990/sandbox-dhtmlxSandbox-context-root/dhtmlxwindows.html. Operation aborted"

Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>DHTMLXWindows Test</title>
<link rel="stylesheet" type="text/css"
href="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/dhtmlxwindows.css"></link>
<link rel="stylesheet" type="text/css"
href="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_viasat.css"></link>
<script type="text/javascript" src="includes/js/prototype/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="includes/js/dhtmlxsuite/dhtmlxcommon.js"></script>
<script type="text/javascript"
src="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script type="text/javascript">

</script>
</head>
<body style="height:550px;width:900px;background-color:gray;margin:auto;">
<div id="testBody" style="border:1px solid green; background-color:white; height:100%; width:100%;"
<form name="addUserForm" id="addUserForm" action="dhtmlxwindows.html" method="post">
<fieldset>
<legend>
Test Fields
</legend>
<label for="userName">User Name</label><input type="text" name="userName" id="userName"/>
<label for="password">Password</label><input type="password" name="password" id="password"/>
</fieldset>
</form>
<script type="text/javascript">
var addWindow = new dhtmlXWindows();
//addWindow.setSkin("standard");
addWindow.setImagePath('img');
var bodyOffset = $('testBody').viewportOffset();
console.info(bodyOffset);
var bodyY = bodyOffset[1];
var bodyX = bodyOffset[0];
var addUserWin = addWindow.createWindow("addUser",bodyX+5,bodyY+5,300,350);
addUserWin.attachEvent("onParkDown", function(win){
win.setDimension(document.body.getWidth()-10,win.getDimension()[1]);
});
addUserWin.attachEvent("onParkUp", function(win){
win.setDimension(300,win.getDimension()[1]);
});
addUserWin.park();
addUserWin.button("close").hide();
addUserWin.button("minmax1").hide();
addUserWin.setIcon('/icons/addUser.gif','/icons/addUser.gif');
addUserWin.setText("Create New User");
addUserWin.attachObject("addUserForm");
</script>
</div>
</body>
</html>

Any help with this would be appreciated
Answer posted by Hendry Betts on Aug 21, 2008 07:53
It's great when you can find your own solution.  So I will share this with the community at large :-)

The solution was to move the constructor into the head of the document as a function and call the function onLoad of the body (see the following code)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
    <title>DHTMLXWindows Test</title>
    <link rel="stylesheet" type="text/css"
          href="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/dhtmlxwindows.css"></link>
    <link rel="stylesheet" type="text/css"
          href="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_viasat.css"></link>
    <script type="text/javascript" src="includes/js/prototype/prototype-1.6.0.2.js"></script>
    <script type="text/javascript" src="includes/js/dhtmlxsuite/dhtmlxcommon.js"></script>
    <script type="text/javascript"
            src="includes/js/dhtmlxsuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
    <script type="text/javascript">
        function onInit(){
            var addWindow = new dhtmlXWindows();
            //addWindow.setSkin("standard");
            addWindow.setImagePath('img');
            var bodyOffset = $('testBody').viewportOffset();
            var bodyY = bodyOffset[1];
            var bodyX = bodyOffset[0];
            var addUserWin = addWindow.createWindow("addUser",bodyX+5,bodyY+5,300,350);
            addUserWin.attachEvent("onParkDown", function(win){
                win.setDimension($('testBody').getWidth()-10,win.getDimension()[1]);
            });
            addUserWin.attachEvent("onParkUp", function(win){
                win.setDimension(300,win.getDimension()[1]);           
            });
            addUserWin.park();
            addUserWin.button("close").hide();
            addUserWin.button("minmax1").hide();
            addUserWin.setIcon('/icons/addUser.gif','/icons/addUser.gif');
            addUserWin.setText("Create New User");
            addUserWin.attachObject("addUserForm");
        }
    </script>
  </head>
  <body onLoad="onInit();" style="height:550px;width:900px;background-color:gray;margin:auto;">
    <div id="testBody" style="border:1px solid green; background-color:white; height:100%; width:100%;">
        <form name="addUserForm" id="addUserForm" action="dhtmlxwindows.html" method="post">
            <fieldset>
              <legend>
                Test Fields
              </legend>
              <label for="userName">User Name</label><input type="text" name="userName" id="userName"/>
              <label for="password">Password</label><input type="password" name="password" id="password"/>
            </fieldset>
        </form>
    </div>
  </body>
</html>
Answer posted by Alex (support) on Sep 17, 2009 08:07

Thank you for the provided solution. It can be useful for people who faced with the same issue.