jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by MartinWalke 12 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Frames, IE8 and IE9 Posts

February 22, 2013 at 11:37 am Frames, IE8 and IE9 #15681

Member

Hi,

I seem to have got into a right pickle using the JQXTree plugin. I have been developing quite happily using IE8 and frames to show the tree on the left side of the browser. Then M$ waved their magic wand and suddenly I’ve got IE9 (which I didn’t really want) but have to put up with. But that made me think about FF as well although it’s intended to be used in IE.

However, this has presented me with some problems when running jqxTree. My ultimate usage will be as a set of local files – no web server, no HTTP in sight. But I can’t get the tree to display, or I get an error about ‘parentlocation’.

So a summary of what happens:

IE8 – using http: and frames – everything fine.
IE9 – using http: and frames – everything fine.
FF – using http: and frames – everything fine.

IE8 – local files and frames – no display
IE9 – local files and frames – no display
FF – local files and frames – no display

IE8 – local files and no frames – everything fine
IE9 – local files and no frames – everything fine
FF – local files and no frames – everything fine

My DOCTYPE is set, as is the meta line, as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />

So is this a browser problem, a frames problem or an HTTP problem?

TIA

February 22, 2013 at 11:42 am Frames, IE8 and IE9 #15683

Peter Stoev

Keymaster

Hi MartinWalke,

Could you please send us a sample which demonstrates this behavior?
In addition, provide information about the jQuery and jQWidgets version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 22, 2013 at 11:45 am Frames, IE8 and IE9 #15684

MartinWalke

Member

Hi Peter,

Thanks for the quick reply. I’ll send it asap

Martin

February 22, 2013 at 11:59 am Frames, IE8 and IE9 #15686

MartinWalke

Member

Peter,

The code is in 3 sections:

1. Frame set page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Complex Data Visualisation</title>
</head>
<frameset cols="200" frameborder="0" border="0" framespacing="0">
	<frame name="tree" src="jqxtest.htm" marginheight="0" marginwidth="0" scrolling="auto">
<noframes>
<p>We're sorry but this web page requires that the ability to display frames is turned on in your browser and so is unable to display.</p>
</noframes>
</frameset>
</html>

2. Actual jqxTree code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Tree</title>
  <meta name="generator" content="TSW WebCoder">
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
  <script type="text/javascript" src="scripts/gettheme.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
<style>
body {
      font-family:arial;
      font-size:0.8em;
     }
</style>
</head>
<body>
  <script type="text/javascript">
  var loadedXml;
  var jsonData = new Array();
  var detailFrame;
  var filterFrame;
  $(document).ready(function () {
    var theme = 'ui-sunny';
    $.get('vt.xml',
          function(xml){
            loadedXml = xml;
            for (i=0;i<xml.getElementsByTagName("node").length;i++) {
              var node = xml.getElementsByTagName("node")[i];
              var xmlNode = new Object();
              xmlNode["id"] = node.getAttribute("id");
              xmlNode["text"] = node.getAttribute("name");
              xmlNode["parentid"] = node.getAttribute("parentid");
              jsonData.push(xmlNode);
            }
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' }
                ],
                id: 'id',
                localdata: jsonData
            };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
            // specifies the mapping between the 'text' and 'label' fields.
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
            var thisFrame = top.frames["tree"];
            $('#jqxWidget').jqxTree({
               source: records,
               width: $(thisFrame).width(),
               theme: theme,
               toggleMode: 'none' });
            $('#jqxWidget').css("border", 0);
          },
          'xml');
  });
  </script>
  <div id='jqxWidget'>
  </div>
</body>
</html>
</body>
</html>

3. Input xml file – vt.xml

<?xml version="1.0" encoding="UTF-8"?>
<cat>
	<node name="Capabilities" id="capability_top" parentid="-1" type="capability"/>
	<node name="ATC Service Delivery Management" id="F16E7535_52ED_423e_A1ED_D63C90FCFA29" parentid="capability_top" type="capability"/>
	<node name="ATC Staff Management" id="E49484B5_F80A_44c4_BFDD_0FC01CEC5439" parentid="capability_top" type="capability"/>
	<node name="ATM Service Status" id="4DE48D86_AA03_4036_AE2A_1A254F97FA4D" parentid="capability_top" type="capability"/>
	<node name="Actual" id="7B3A11E3_FE2A_4b39_80B3_3F3E3FC3071B" parentid="capability_top" type="capability"/>
</cat>