jQWidgets Forums
This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.
-
Hi,
I would like to know if it is possible to have a splitter with 2 panels, the panel of the left needs to have a tree that fires an ajax call to retrieve data from a php service and binds the data to a listbox which is in the right panel. Everything works ok, but the splitter is throwing an exception, the code is the following:
<?php
include (‘/DAL/Articulo.php’);
?>
<html>
<head>
<title>Arcana by HTML5 UP</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<!–[if lte IE 8]><script src=”css/ie/html5shiv.js”></script><![endif]–>
<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<!–<script src=”js/jquery.min.js”></script>–>
<script src=”js/jquery.dropotron.min.js”></script>
<script src=”js/skel.min.js”></script>
<script src=”js/skel-layers.min.js”></script>
<script src=”js/init.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.summer.css” type=”text/css” />
<noscript>
<link rel=”stylesheet” href=”css/skel.css” />
<link rel=”stylesheet” href=”css/style.css” />
<link rel=”stylesheet” href=”css/style-wide.css” /></noscript>
<script>
$(document).ready(function () {var source =
{
url: “data.php”,
datatype: “json”,
type: “POST”,
data: { ‘ListarTree’: ‘true’ },
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘value’ },
{ name: ‘items’ }
],
id: ‘id’,
async: false
};
// 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’ }]);$(‘#jqxTree’).jqxTree({ theme: ‘energyblue’, source: records, width: ‘300px’ });
$(‘#jqxTree’).css(‘visibility’, ‘visible’);
$(‘#jqxTree’).on(‘select’, function (event) {
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var value = item.value;
if (item.level == “1”) {
$.ajax({
url: ‘data.php’,
type: ‘post’,
data: { ‘ListarElementoTree’: value },
success: function (data, status) {
var source = jQuery.parseJSON(data);
$(‘#listBox’).jqxListBox({ source: source, displayMember: “Titulo”, valueMember: “IdArticulo”, width: ‘100%’, height: 250 });
},
error: function (xhr, desc, err) {
console.log(xhr);
console.log(“Details: ” + desc + “\nError:” + err);
}
}); // end ajax call
}
});
$(‘#splitter’).jqxSplitter({ width: ‘100%’, height: 500, panels: [{ size: 150 }] });
});
</script>
</head>
<body>
<div><div id=”header”>
<div id=”logo”>
<h1>Archivos de Neurociencias</h1>
</div>
<div id=”logo-img”>
<h1>
</h1>
</div>
<nav id=”nav”>-
<li class=”current”>Home
- Número actual
- Números anteriores
- Publicaciones
- ¡Registrate!
</nav>
</div><section id=”banner”>
<header>
<h2>Phasellus quam turpis, , feugiat sit amet ornare in.</h2>
Leer más…
</header>
</section>
</div>
<div id=’splitter’>
<div>
<div id=’jqxTree’ />
</div>
<div>
<div id=’listBox’ />
</div>
</div>
<!–<div id=’listBox’ />–>
</body>
</html>and the problem is:
0x800a139e – JavaScript runtime error: Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.
Can anyone can help me?
You must be logged in to reply to this topic.