jQWidgets Forums

Tagged: angular 2 switchbutton, angular switchbutton, bootstrap switchbutton, javascript switchbutton, jquery switchbutton, jqwidgets switchbutton, jqxSwitchButton, typescript switchbutton

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

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

Author

How can I run the code of another php page when I click on a jqxswitchbutton Posts

November 15, 2016 at 11:56 pm How can I run the code of another php page when I click on a jqxswitchbutton #89074

christophe.toussaint

Participant

Hello,
First of all, you have to know that I’m a beginner… sorry for that 🙁
My goal is to populate a dropdownlist with data from MSSQLserver db when I switch on the jqxSwitchButton.
For that, I have created 3 different files:
connect.php containing the MSSQL credentials:

<?php
	$hostname = "localhost";
	$database = "Customers";
	$username = "sa";
	$password = "azerty";
?>

data.php executing the SQL query and return the value to the jqxDropDownList

<?php
	#Include the connect.php file
	include('connect.php');

	//SQL connection info
	$ConnectionInfo = array( "Database"=>$database, "UID"=>$username, "PWD"=>$password );
	//Connect to the database
	$conn = sqlsrv_connect( $hostname, $ConnectionInfo );
	//If connection problem then display "Connection to the server failed !"
	if ($conn === false)
	{
		echo '<script language="javascript">';
		echo 'alert("Connection to the server failed !")';
		echo '</script>';
		die( print_r( sqlsrv_errors(), true ));
		exit;
	}

	// get data and store in a json array
	$query = "SELECT * FROM Customers";
	$result = sqlsrv_query( $conn, $query );
	if( $result === false) 
	{
		echo '<script language="javascript">';
		echo 'alert("A problem in the query is detected!")';
		echo '</script>';
		die( print_r( sqlsrv_errors(), true) );
		exit();

	}

	while( $row = sqlsrv_fetch_array( $result, SQLSRV_FETCH_ASSOC ) ) 
		{
			$customers[] = array(
			'CompanyName' => $row['CompanyName'],
			'ContactName' => $row['ContactName'],
			'ContactTitle' => $row['ContactTitle'],
			'Address' => $row['Address'],
			'City' => $row['City']
			  );
		}

	echo json_encode($customers);

	sqlsrv_free_stmt( $result);
?>

index.php where I simply populate directly the jqxdropdownlist because I don’t know how to run it only when I click on the jqxswitchbutton. In the example, the connection to SQLServer is working well and the data are correctly inserted in the jqxdropdownlist.

<html>
	<head>
		<title>Test</title>
		<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.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">
			$(document).ready(function () {
					// prepare the data
					var source =
					{
						datatype: "json",
						datafields: [
							{ name: 'CompanyName' },
							{ name: 'ContactName' },
							{ name: 'ContactTitle' },
							{ name: 'Address' },
							{ name: 'City' },
						],
						url: 'data.php'
					};
					var dataAdapter = new $.jqx.dataAdapter(source);
					$("#dropdownlist").jqxDropDownList(
					{
						source: dataAdapter,
						theme: 'classic',
						width: 200,
						height: 25,
						selectedIndex: 0,
						displayMember: 'CompanyName',
						valueMember: 'ContactName'
					});
				});
		</script>
	</head>
	<body>
		<div id="dropdownlist"></div>
	</body>
</html>

Then, to use the jqxswitchbutton, I will have to add:

<script type=”text/javascript” src=”jqwidgets/jqxswitchbutton.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var label = {
‘button’: ‘Keyboard clicks’
};
$(‘#button’).jqxSwitchButton({ height: 27, width: 81, checked: false });
$(‘.jqx-switchbutton’).on(‘checked’, function (event) {
$(‘#events’).text(label[event.target.id] + ‘: OFF’);
});
$(‘.jqx-switchbutton’).on(‘unchecked’, function (event) {
$(‘#events’).text(label[event.target.id] + ‘: ON’); //how can I run the data.php here?
});
});
</script>

Then, my question is how can I run the data.php here in the $(‘.jqx-switchbutton’).on(‘unchecked’, function (event) {.. ???

Thanks in advance,
Christophe Toussaint

November 16, 2016 at 8:16 am How can I run the code of another php page when I click on a jqxswitchbutton #89076

Hristo

Participant

Hello Christophe Toussaint,

First I would like to recommend you bind the events to the ID selector $('#button').on('checked', function (event) { ... } (as in your case when you know the SwitchButton’s ID).
Also, you should use one script tag with just one $(document).ready(function () { ... }, there you could create whole logic.
To get data information simple could use var data = dataAdapter.records will retrieve an array of recorded items.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 16, 2016 at 7:03 pm How can I run the code of another php page when I click on a jqxswitchbutton #89099

christophe.toussaint

Participant

Hello Hristo Hristov,

Thank you for your fast reply. I bind the events on $('.jqx-switchbutton').on('unchecked', function (event) { (not on ‘checked’ event but this is a personal choice).
I used only one $(document).ready(function () {
I didn’t understand the way to use var data = dataAdapter.records, can you please explain me?

That code is working but it also could be interesting to know your opinion about var data = dataAdapter.records.


		<script type="text/javascript">
			$(document).ready(function () {
				$('#button').jqxSwitchButton({ height: 27, width: 81, checked: false });
				$("#dropdownlist").jqxDropDownList({});
				$('.jqx-switchbutton').on('unchecked', function (event) {
					// prepare the data
					var source =
					{
						datatype: "json",
						datafields: [
							{ name: 'CompanyName' },
							{ name: 'ContactName' },
							{ name: 'ContactTitle' },
							{ name: 'Address' },
							{ name: 'City' },
						],
						url: 'data.php'
					};
					var dataAdapter = new $.jqx.dataAdapter(source);
					$("#dropdownlist").jqxDropDownList(
					{
						source: dataAdapter,
						width: 200,
						height: 25,
						selectedIndex: 0,
						displayMember: 'CompanyName',
						valueMember: 'ContactName'
					});
				});

				$('.jqx-switchbutton').on('checked', function (event) {

					$("#dropdownlist").jqxDropDownList({
						source: "",
					});
				});
			});
		</script>

Thanks a lot for your advice!
Best regards,
Christophe Toussaint

November 17, 2016 at 10:40 am How can I run the code of another php page when I click on a jqxswitchbutton #89108

Hristo

Participant

Hello Christophe Toussaint,

I understand you want to represent the data from the ‘data.php’ in the scope of the ‘unchecked’ event.
You could use var data = dataAdapter.records; and after that with iteration to shows this array on desired way.
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.