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: 

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • mickpah
    Member

    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>


    Peter Stoev
    Keymaster

    Hi,

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mickpah
    Member

    HI 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.


    Peter Stoev
    Keymaster

    Hi,

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mickpah
    Member

    I am trying to retrieve a list of people selected by data of birth
    the php

    <?php
    #Include the connect.php file
    include('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);
    ?>

    mickpah
    Member

    don’t worry found the problem – my php left a debugging message in there –> echo $_GET[DOB];

    thanks

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

You must be logged in to reply to this topic.