jQWidgets Forums

Forum Replies Created

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

Author

Posts

January 4, 2018 at 12:11 pm in reply to: getting data and saving from DB 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

December 20, 2017 at 12:43 pm in reply to: getting data and saving from DB 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.

Author

Posts

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