jQuery UI Widgets Forums Scheduler getting data and saving from DB

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 6 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • getting data and saving from DB #97987

    billz
    Participant

    Hi Guys
    I really want to buy this code Lib, but before I can get it signed off from Boss man, I have to have a working demo.

    basically, i need the scheduler to retrieve and save from and to a database, I’ve tried to analyse the Documentation/Tuts but i cant seem to figure out where i’m going wrong

    here is what I have

    DB details
    DBname: test
    table: sched
    columns :
    id
    description
    location
    subject
    calendar
    start
    end

    connect.php file

    <?php
    # FileName="connect.php"
    $hostname = "localhost";
    $database = "test";
    $username = "root";
    $password = "";
    ?>

    data.php file

    <?php
    #Include the connect.php file
    include ('connect.php');
    // 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 = 30;
    $query = "SELECT id, description, location, subject, calendar, start, end FROM sched LIMIT ?,?";
    $result = $mysqli->prepare($query);
    $result->bind_param('ii', $from, $to);
    $result->execute();
    /* bind result variables */
    $result->bind_result($id, $description, $location, $subject, $calendar, $start, $end);
    /* fetch values */
    while ($result->fetch())
    	{
    	$customers[] = array(
    		'id' => $id,
    		'description' => $description,
    		'location' => $location,
    		'subject' => $subject,
    		'calendar' => $calendar,
    		'start' => $start,
    		'end' => $end
    	);
    	}
    echo json_encode($sched);
    /* close statement */
    $result->close();
    /* close connection */
    $mysqli->close();
    ?>

    and the code inside my main webpage

    <script type="text/javascript">
    		$(document).ready(function () {
             
                // prepare the data
        var source ={
            datatype: "json",
            datafields: [{ name: 'id' },{ name: 'description' },{ name: 'location' },{ name: 'subject' },{ name: 'calendar' },{ name: 'start' } ,{ name: 'end' }],
    		id: 'id',
    		autoBind : true,
            url: 'data.php'
    		
                };
                var adapter = new $.jqx.dataAdapter(source);
                $("#scheduler").jqxScheduler({
                    date: new $.jqx.date(),
                    width: 700,
                    height: 500,
                    source: adapter,
                    view: 'weekView',
                    showLegend: true,
    				enableHover: true,
                    ready: function () {
                        $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                    },
                    resources:
                    {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source: new $.jqx.dataAdapter(source)
                    },
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "place",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    views:
                    [
                        'dayView',
                        'weekView',
                        'monthView'
                    ]
                });
            });
        </script>
    getting data and saving from DB #97988

    billz
    Participant

    is the answer that i set need to set the Events for scheduler ? or the Data/Adapter cant tell.

    getting data and saving from DB #98015

    Hristo
    Participant

    Hello billz,

    I would like to suggest you check your DataAdapter. Is it everything correct?
    You could use console.log(adapter); to check is there any records. Also, I would suggest you implement into the DataAdapter “loadError(jqXHR, status, error)” callback to check for errors.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    getting data and saving from DB #98146

    billz
    Participant

    Thanks Hristo
    i’ve managed to set it up so at lead it reads from DB
    to give my current code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxScheduler
        </title>
        <link rel="stylesheet" href="jqw/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jqw/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="jqw/scripts/demos.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxdate.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxscheduler.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxscheduler.api.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxradiobutton.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="jqw/jqwidgets/globalization/globalize.culture.de-DE.js"></script>
        <script type="text/javascript">
    		$(document).ready(function () {
             
                // prepare the data
        var source ={
            datatype: "json",
            datafields: [{ name: 'id' },{ name: 'description' },{ name: 'location' },{ name: 'subject' },{ name: 'resourceId' },{ name: 'start' } ,{ name: 'end' }],
    		id: 'id',
            url: 'data3.php'	
                };
                var adapter = new $.jqx.dataAdapter(source);
    			console.log(source);
                $("#scheduler").jqxScheduler({
                    date: new $.jqx.date(),
                    width: 700,
                    height: 500,
                    source: adapter,
                    view: 'weekView',
                    showLegend: true,
    				enableHover: true,
                    ready: function () {
                        $("#scheduler").jqxScheduler();
                    },
                    resources:
                    {
                        colorScheme: "scheme05",
                        dataField: "resourceId",
                        source: new $.jqx.dataAdapter(source)
                    },
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "location",
                        subject: "subject",
                        resourceId: "resourceId"
    					
                    },
                    views:
                    [
                        'dayView',
                        'weekView',
                        'monthView'
                    ]  
                });
    			
    			    $("#scheduler").on('appointmentAdd', function (event) {		
    				var args = event.args;
    				var appointment = args.appointment;			
    				console.log(appointment);
    				window.alert(appointment);	
    				
    				$.ajax({
                type: "POST",
                dataType: "json",
                url: "data4.php",
                data: {appointment},
                success: function(data){
                    alert('Items added');
                },
                error: function(e){
                    console.log(e.message);
                }
        });
    });
    });
    	
        </script>      
    </head>
    <body class='default'>
        <div id="scheduler"></div>
    </body>
    </html>
    <?php
        //open connection to mysql db
        $connection = mysqli_connect("localhost","root","","test") or die("Error " . mysqli_error($connection));
    
        //fetch table rows from mysql db
        $sql = "select * from sched";
        $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
    
        //create an array
        $emparray = array();
        while($row =mysqli_fetch_assoc($result))
        {
            $emparray[] = $row;
        }
        echo json_encode($emparray);
    
        //close the db connection
        mysqli_close($connection);
    ?>

    but now i am struggling with Ajax when using it with appointmentAdd

    			    $("#scheduler").on('appointmentAdd', function (event) {		
    				var args = event.args;
    				var appointment = args.appointment;			
    				console.log(appointment);
    				window.alert(appointment);	
    				$.ajax({
                                            type: "POST",
                                            dataType: "json",
                                            url: "data4.php",
                                            data: {appointment},
                                            success: function(data){
                                                     alert('Items added');
                },
                                            error: function(e){
                                                     console.log(e.message);
                }
        });
    }); 

    on data4.php i have

    <?php 
    $connection = mysqli_connect("localhost","root","","test") or die("Error " . mysqli_error($connection));
    $obj = json_decode($_POST['appointment'],true);
    foreach($obj as $item) {
           mysqli_query("INSERT INTO <code>test</code>.<code>sched</code> (id, start, end, description, location, subject, resourceId) 
           VALUES ('".$item['id']."', '".$item['start']."', '".$item['end']."', '".$item['description']."', '".$item['location']."', '".$item['subject']."',         
           '".$item['resourceId']."')");}
    mysqli_close($con);
    
       //}
       ?>

    in the console i get when saving/adding new appointments appointments

    Uncaught TypeError: Cannot read property 'dateData' of undefined
        at r.subtract (jqxdate.js:7)
        at e (jquery-1.11.1.min.js:4)
        at Vc (jquery-1.11.1.min.js:4)
        at Vc (jquery-1.11.1.min.js:4)
        at Vc (jquery-1.11.1.min.js:4)
        at Function.m.param (jquery-1.11.1.min.js:4)
        at Function.ajax (jquery-1.11.1.min.js:4)
        at HTMLDivElement.<anonymous> ((index):83)
        at HTMLDivElement.dispatch (jquery-1.11.1.min.js:3)
        at HTMLDivElement.r.handle (jquery-1.11.1.min.js:3)
    r.subtract @ jqxdate.js:7
    e @ jquery-1.11.1.min.js:4
    Vc @ jquery-1.11.1.min.js:4
    Vc @ jquery-1.11.1.min.js:4
    Vc @ jquery-1.11.1.min.js:4
    m.param @ jquery-1.11.1.min.js:4
    ajax @ jquery-1.11.1.min.js:4
    (anonymous) @ (index):83
    dispatch @ jquery-1.11.1.min.js:3
    r.handle @ jquery-1.11.1.min.js:3
    trigger @ jquery-1.11.1.min.js:3
    (anonymous) @ jquery-1.11.1.min.js:3
    each @ jquery-1.11.1.min.js:2
    each @ jquery-1.11.1.min.js:2
    trigger @ jquery-1.11.1.min.js:3
    _raiseEvent @ jqxscheduler.js:7
    addAppointment @ jqxscheduler.js:7
    (anonymous) @ jqxscheduler.api.js:7
    dispatch @ jquery-1.11.1.min.js:3
    r.handle @ jquery-1.11.1.min.js:3
    • This reply was modified 6 years, 1 month ago by  billz.
    getting data and saving from DB #98161

    Hristo
    Participant

    Hello billz,

    It looks like the way that you set the parameters there on data property of the AJAX is the reason for this issue.
    I would like to suggest you look at this forum topic, it could be helpful:
    https://www.jqwidgets.com/community/topic/add-delete-update-change-appointment/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.