jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
172 lines (162 loc) • 5.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to create cascading ComboBox. The data source of the "Orders" Combobox is updated dynamically depending on the selected Customer.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var customersSource =
{
datatype: "json",
datafields: [
{ name: 'CompanyName'},
{ name: 'CustomerID'}
],
url: 'cascadingcombobox_data.php',
cache: false,
async: false
};
var customersAdapter = new $.jqx.dataAdapter(customersSource);
$("#customers").jqxComboBox(
{
source: customersAdapter,
width: 200,
height: 25,
promptText: "Select customer...",
displayMember: 'CompanyName',
valueMember: 'CustomerID'
});
var ordersSource =
{
datatype: "json",
datafields: [
{ name: 'CustomerID'},
{ name: 'OrderID'},
{ name: 'ShipCity'},
{ name: 'OrderDate'},
{ name: 'ShipName'},
{ name: 'ShipCountry'},
{ name: 'ShipAddress'}
],
url: 'cascadingcombobox_data.php',
cache: false,
async: false
};
var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
$("#orders").jqxComboBox(
{
width: 200,
height: 25,
disabled: true,
promptText: "Select order...",
displayMember: 'OrderID',
valueMember: 'CustomerID',
autoDropDownHeight: true
});
$("#customers").bind('select', function(event)
{
if (event.args)
{
$("#orders").jqxComboBox({ disabled: false, selectedIndex: -1});
var value = event.args.item.value;
ordersSource.data = {CustomerID: value};
ordersAdapter = new $.jqx.dataAdapter(ordersSource);
$("#orders").jqxComboBox({source: ordersAdapter});
}
});
$("#orders").bind('select', function(event)
{
if (event.args)
{
var index = $("#orders").jqxComboBox('selectedIndex');
if (index != -1)
{
var record = ordersAdapter.records[index];
var details = "<table><tr><td>OrderDate</td><td>ShipCity</td><td>ShipCountry</td><td>ShipAddress</td><td>ShipName</td></tr>";
details += "<tr><td>" + record.OrderDate + "</td><td>" + record.ShipCity + "</td><td>" + record.ShipCountry + "</td><td>" + record.ShipAddress + "</td><td>" + record.ShipName + "</td></tr>";
$("#orderInfo").html(details);
}
}
});
});
</script>
</head>
<body class='default'>
<div>
<span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Customers:</span><div style="margin-left: 5px; float: left;" id="customers"></div>
<div style='clear: both;'></div>
<div style='margin-top: 20px;'>
<span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Orders:</span><div style="margin-left: 5px; float: left;" id="orders"></div>
<br />
<div style="margin-top: 25px; font-size: 12px; font-family: verdana;" id="orderInfo"></div>
</div>
</div>
</body>
</html>
<!--cascadingcombobox_data.php
#Include the connect.php file
include ('connect.php');
// Connect to the database
// connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
{
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
if (isset($_GET['CustomerID']))
{
// get data and store in a json array
$query = "SELECT CustomerID, ShipCity, OrderID, OrderDate, ShipName, ShipAddress, ShipCountry FROM orders where CustomerID=?";
$result = $mysqli->prepare($query);
$result->bind_param('s', $_GET['CustomerID']);
$result->execute();
/* bind result variables */
$result->bind_result($CustomerID, $ShipCity, $OrderID, $OrderDate, $ShipName, $ShipAddress, $ShipCountry);
/* fetch values */
while ($result->fetch())
{
$orders[] = array(
'CustomerID' => $CustomerID,
'ShipCity' => $ShipCity,
'OrderID' => $OrderID,
'OrderDate' => $OrderDate,
'ShipName' => $ShipName,
'ShipAddress' => $ShipAddress,
'ShipCountry' => $ShipCountry
);
}
echo json_encode($orders);
/* close statement */
$result->close();
return;
}
// get data and store in a json array
$query = "SELECT CustomerID, CompanyName FROM Customers";
$result = $mysqli->prepare($query);
$result->execute();
/* bind result variables */
$result->bind_result($CustomerID, $CompanyName);
/* fetch values */
while ($result->fetch())
{
$customers[] = array(
'CustomerID' => $CustomerID,
'CompanyName' => $CompanyName
);
}
echo json_encode($customers);
$result->close();
/* close connection */
$mysqli->close();
-->