jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
108 lines (101 loc) • 3.48 kB
HTML
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to populate the jqxDropDownList with data from MySQL Database. Each item in the list has label and value fields. The label is displayed to the user. When you click on the Submit button, the selected item's value will be displayed.</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/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<style type="text/css">
.demo-iframe {
border: none;
width: 600px;
height: 400px;
clear: both;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName'},
{ name: 'ContactName'},
{ name: 'ContactTitle'},
{ name: 'Address'},
{ name: 'City'},
],
url: 'dropdownlistdata.php',
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#dropdownlist").jqxDropDownList(
{
source: dataAdapter,
width: 250,
height: 25,
selectedIndex: 0,
displayMember: 'CompanyName',
valueMember: 'ContactName'
});
$('#sendButton').jqxButton({ width: 70});
});
</script>
</head>
<body class='default'>
<form class="form" id="form" target="form-iframe" method="post" action="dropdownlist.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
<div name="list" id="dropdownlist"></div>
<input style="margin-top: 10px;" type="submit" value="Submit" id="sendButton" />
</form>
<div>
<iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe>
</div>
</body>
</html>
<!--dropdownlistdata.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();
}
// get data and store in a json array
$from = 0;
$to = 30;
$query = "SELECT CompanyName, ContactName, ContactTitle, Address, City FROM customers LIMIT ?,?";
$result = $mysqli->prepare($query);
$result->bind_param('ii', $from, $to);
$result->execute();
/* bind result variables */
$result->bind_result($CompanyName, $ContactName, $ContactTitle, $Address, $City);
/* fetch values */
while ($result->fetch())
{
$orders[] = array(
'CompanyName' => $CompanyName,
'ContactName' => $ContactName,
'ContactTitle' => $ContactTitle,
'Address' => $Address,
'City' => $City
);
}
echo json_encode($orders);
/* close statement */
$result->close();
/* close connection */
$mysqli->close();
--dropdownlist.php--
echo $_POST["list"];
-->