getting data and saving from DB - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data adapter, database, DB, mysql, php, scheduler, sql

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

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

Author

getting data and saving from DB Posts

December 20, 2017 at 12:25 pm 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>

December 20, 2017 at 12:43 pm 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.

December 21, 2017 at 8:39 am 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

January 4, 2018 at 12:11 pm 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

January 5, 2018 at 11:14 am 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

Author

Posts

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

You must be logged in to reply to this topic.