jQWidgets Forums
jQuery UI Widgets › Forums › Editors › DateTimeInput › I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid
Tagged: datetimeinput
This topic contains 5 replies, has 2 voices, and was last updated by mickpah 12 years, 3 months ago.
-
Author
-
April 10, 2013 at 12:49 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18920
Hi
I am trying to teach myself JS and have hit a wall.
the following code generated a json return but is not binding to the grid. I have been on this for days can anyone tell me my stupid mistake please?
<!DOCTYPE html>
<html lang=”en”>
<head><link rel=”stylesheet” href=”../assets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../assets/jqwidgets/styles/jqx.fresh.css” type=”text/css” />
<script type=”text/javascript” src=”../assets/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”../assets/scripts/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../assets/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript”>
$(document).ready(function ()
{
var theme = getDemoTheme();
// prepare the data//
$(“#jqxDateTimeInput”).jqxDateTimeInput({ width: ‘270px’, height: ’25px’, theme: theme });
$(‘#jqxDateTimeInput ‘).jqxDateTimeInput(‘setDate’, new Date(1977, 0, 1));
$(‘#jqxDateTimeInput’).bind(‘close’, function (event) {
// $(‘#Events’).jqxPanel(‘clearcontent’);
var url = “data.php”;
// var date = “1977/05/05”;
var date = event.args.date.defaultView();var datasource =
{
datatype: “json”,
datafields: [
{ name: ‘pa_surname’},
{ name: ‘pa_firstname’},
{ name: ‘pa_dob’, type: ‘date’}
],
type: ‘GET’,
data: {DOB:date},
url: url,
id: ‘id’,
root: ‘data’
// cache: false
// async: false};
var dataAdapter = new $.jqx.dataAdapter(datasource);
$(“#grid”).jqxGrid({theme: theme,
source: dataAdapter,
autoheight: true,
width: 480,
columns: [
{datafield: ‘pa_surname’, text: ‘Surname’,width: 150},
{datafield: ‘pa_firstname’, text: ‘First Name’, width: 150 },
{ datafield: ‘pa_dob’, cellsformat: “d”, text: ‘DOB’,width: 180 }]
});});
// $(“#jqxSubmitButton”).on(‘click’, function () {
// $(“#events”).find(‘span’).remove();
// $(“#events”).append(‘<span>Submit Button Clicked</span>’);
// });
});
// small function to convert js date format to dd/mm/yyyy to pass to php query
Date.prototype.defaultView=function(){
var dd=this.getDate();
if(dd<10)dd=’0’+dd;
var mm=this.getMonth()+1;
if(mm<10)mm=’0’+mm;
var yyyy=this.getFullYear();
return String(mm+”\/”+dd+”\/”+yyyy)
}
</script>
</head><body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana,serif; float: left;”>
<div style=’float: left;’>
<div style=”margin-top: 7px; margin-bottom: 5px;” ‘ id=’jqxDateTimeInput’>
</div>
<div id=”grid”></div>
</div>
</body></html>
April 10, 2013 at 5:03 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18936Hi,
I am not sure what is: “var date = event.args.date.defaultView();” in your code. If you want to get the Date string from the jqxDateTimeInput, do the following:
var date = $(“#jqxDateTimeInput”).val();
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comApril 10, 2013 at 5:32 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18940HI Peter
.defaultView(); is badly named its a function that formats the date to dd/mm/yyyy to pass the the php script.thats actually working. using the developer tools in chrome I can see the json reply is being created but it’s not appearing in the grid.
April 10, 2013 at 5:57 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18945Hi,
Can you access your DOB variable in the PHP script?
What is the purpose of that variable?
Could you post a complete sample which demonstrates your scenario including your server and client scripts with the HTML part.For code formatting, see: http://www.jqwidgets.com/community/topic/code-formatting/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comApril 10, 2013 at 6:10 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18949I am trying to retrieve a list of people selected by data of birth
the php<?php#Include the connect.php fileinclude('connect.php');echo $_GET[DOB];#Connect to the database//connection String//$connect = mysql_connect($hostname, $username, $password)$connect = pg_connect("host=$hostname dbname=$database port=5432 user=$username password=$password") or die ("Could not connect to server\n");if (isset($_GET[DOB])){// get data and store in a json array$query = "SELECT\n". "\"public\"pa_surname,\n". "\"public\"pa_firstname,\n". "\"public\"pa_dob\n".// "\"public\".address.ad_phone_no,\n".// "\"public\".address.ad_mobile_no\n". "FROM\n". "\"public\".patient\n". "INNER JOIN \"public\".address ON \"public\"pa_address_serial = \"public\".address.ad_serial\n". "WHERE\n". "\"public\"pa_dob = '".$_GET[DOB]."'";}$result = pg_query($connect,$query)or die('Query failed: ' . pg_last_error());$resultArray = array();while ($row = pg_fetch_array($result, null, PGSQL_ASSOC)) { $resultArray[] = $row;}echo json_encode($resultArray);?>
April 10, 2013 at 6:18 am I’m stuck trying to use change event on jqxDateTimeInput to return data to a jqxgrid #18950don’t worry found the problem – my php left a debugging message in there –> echo $_GET[DOB];
thanks
-
AuthorPosts
You must be logged in to reply to this topic.