Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  ivailo 8 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxInput to MySQL Demo #77469

    vincmeister
    Participant

    Hello,

    Is there any demo of jqxInput to MySQL ?
    I want to create master-detail , master using form input, detail using grid.
    Please advise, thank you

    • This topic was modified 8 years, 7 months ago by  vincmeister.
    jqxInput to MySQL Demo #77481

    ivailo
    Participant

    Hi vincmeister,

    Here is a demo, adapted to northwind database.

    index.html//

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.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/jqxinput.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    			$("#jqxinput").jqxInput(
                {
                    theme: 'classic',
    				width: 200,
    				height: 25,
    				source: function (query, response) {
    					var dataAdapter = new $.jqx.dataAdapter
    					(
    						{
    							datatype: "json",
    					   	    datafields: [
    								{ name: 'CompanyName', type: 'string'}
    							],
    							url: 'data.php'
    						},
    						{
    							autoBind: true,
    							formatData: function (data) {
    								data.query = query;
    								return data;
    							},
    							loadComplete: function (data) {
    								if (data.length > 0) {
    									response($.map(data, function (item) {
    										return item.CompanyName;
    									}));
    								}
    							}
    						}
    					);
    				}
                });        
            });
        </script>
    </head>
    <body class='default'>
       <input id="jqxinput"/>
    </body>
    </html>

    data.php//

    <?php
    $hostname = "localhost";
    $database = "northwind";
    $username = "root";
    $password = "";
    
    // Connect to the database
    $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 = 10;
    $searchQuery = "{$_GET['query']}%";
    // $searchQuery = $_GET['query'];
    $query = "SELECT CompanyName, ContactName, ContactTitle, Address, City FROM customers WHERE CompanyName LIKE ? LIMIT ?,?";
    $result = $mysqli->prepare($query);
    $result->bind_param('sii', $searchQuery, $from, $to);
    $result->execute();
    /* bind result variables */
    $result->bind_result($CompanyName, $ContactName, $ContactTitle, $Address, $City);
    /* fetch values */
    while ($result->fetch())
    	{
    	$customers[] = array(
    		'CompanyName' => $CompanyName,
    		'ContactName' => $ContactName,
    		'ContactTitle' => $ContactTitle,
    		'Address' => $Address,
    		'City' => $City
    	);
    	}
    //echo json_encode(utf8_encode($customers));
    $json = html_entity_decode(json_encode($customers));
    echo $json;
    /* close statement */
    $result->close();
    /* close connection */
    $mysqli->close();
    ?>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    jqxInput to MySQL Demo #77484

    vincmeister
    Participant

    Hello Ivailo,

    Thank you for the respond. I meant for the sql insert into (add new row) to mysql
    Please advise, thank you

    jqxInput to MySQL Demo #77494

    ivailo
    Participant

    Hi vincmeister,

    Here is a demo how to send post request to the server script.
    Then you can manipulate and insert your data to MySQL.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.