I've been working on developing fullCalendar drag and drop events with a resource column. For now, I've hard coded the draggable events area; now trying to fetch it from the database.
The database previously had two tables - Resources and Events. The events after being dropped on the calendar, gets updated in the events table. The resource column is being fetched from the database and for adding new resources, I've built a rooms button which saves the new resources in the resource table.
Till now, I only had five draggable events in the main file, but now I'm working on fetching those from database as well. So, I created one more table in the database named draggableevents. The table contains two columns id and EventName.
Here's the code:
draggableevents.php
<?php
require "connection.php";
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sql = "Select * FROM DraggableEvents";
$stmt = $conn->prepare($sql);
if ($stmt->execute()) {
while($result = $stmt->fetch(PDO::FETCH_ASSOC));
return $result;
} else {
return null;
}
?>
form.php
<head>
<link href='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-common#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.js'></script>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="main.css" rel="stylesheet">
<script src='main.js'></script>
</head>
<?php
require 'draggableevents.php';
?>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'><?php $result['EventName']; ?></div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
The above code results in a blank draggable events area. The draggableevents.php file doesn't seem to be loaded on refreshing the page. I don't see it in the network panel and hence no error related to it.
There are some obvious logical issues, none of which have anything much to do with fullCalendar:
1) I have mentioned this a number of times before in your previous questions: return does not return a value when you aren't inside a function. Where do you imagine you are returning that to, exactly? require doesn't have any way to
2) even if that worked, you'd never return any events, because your while loop is closed and doesn't do anything.
3) $result would be out of scope outside your while loop anyway.
4) You never execute your query
5) You didn't echo the event name.
You need to get all your database results into an array, and then loop through that array to generate as many fc-event divs as there are entries in the array.
Here's one way to do it - I've put the functionality of draggableevents.php into a function which you can call when you need it.
draggableevents.php
<?php
require "connection.php";
function getDraggableEvents() {
$conn = DB::databaseConnection();
$sql = "Select * FROM DraggableEvents";
$stmt = $conn->prepare($sql);
$stmt->execute();
$results = array();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$results[] = $row;
}
return $results;
}
?>
form.php
<html>
<head>
<link href='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-common#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.js'></script>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="main.css" rel="stylesheet">
<script src='main.js'></script>
</head>
<body>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<?php
require 'draggableevents.php';
$events = getDraggableEvents();
foreach ($events as $event)
{
?>
<div class='fc-event'><?php echo $event['EventName']; ?></div>
<?php
}
?>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
</html>
Related
I am trying to create a collapsible div (using the jQuery Mobile feature) using the data from a MYSQL database. The collapsible styles are not being applied and i cant figure out what the problem is?
possible the php script?
here's what i have
page.html
<html>
<head>
<title>My App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<!-- css files -->
<!--BoilerPlate-->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />-->
<!--end boilerplate styles-->
<!--my custom css-->
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<!-- jQuery mobile js/css -->
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css" />
<!-- end of custom styles -->
<!-- END css declaration -->
</head>
<body>
<div id="canvasArea"></div>
<canvas id="cnvChart"></canvas>
<!-- JAVASCRIPT Libraries -->
<script src="chart.js/Chart.js" type="text/javascript"></script>
<script src="js/lineGraph.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.js" type="text/javascript"></script>
<script>
// Listen for orientation changes
window.addEventListener("orientationchange", function () {
location.reload(true);
// Announce the new orientation number
}, false);
var canvasAreaDiv = document.getElementById(
'canvasArea');
if(window.innerHeight > window.innerWidth) {
//portrait mode, so show the php script!
$(canvasAreaDiv).load("php/reflective-notes.php");
}
else {
//show the graph
showGraph();
}
</script>
</body>
script.php
$username = $_SESSION['username'];
$reflectiveMessageQuery = "SELECT date, notes FROM table WHERE
userName = '$username'";
$result = mysqli_query($conn, $reflectiveMessageQuery) or die(mysqli_error());
$count = mysqli_num_rows($result);
$rowCount = 0;
while ($row = mysqli_fetch_array($result)) {
$date = $row['date'];
$note = $row['notes'];
if($note === NULL){
$note = "no notes...";
}
echo'<div data-role="collapsible"><h1>'. $date . '</h1> <p>'.$note.'</p>'
.'</div>';
}
?>
code:
<?php
include "init.php";
include_once('tbs_class.php');
$TBS = new clsTinyButStrong;
$TBS->LoadTemplate('/home/b2bmomo/www/templates/templateb2bmomo.htm');
$TBS->Show();
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
$query = "SELECT * FROM information_schema.tables";
$risultati=$db->mysqli_query($query);
while ( $row = $risultati->fetch_row() ){
$table = $row[0];
echo '<h3>'.$table.'</h3>';
}
}
?>
This is the query of my index should print me all the tables in my db which I connect in init.php that comes included , the part is loaded into a html template tiny butstrong , this is the structure of html
code:
<html>
<head>
<title>B2BMOMO</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="/include/css/bootflat.min.css">
<link rel="stylesheet" href="/include/css/app.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.css"/>
</head>
<body>
<div align="center">ELENCA TABELLE PRESENTI NEL DB</div>
<form method="post" action="index.php" style="text-align: center;">
<INPUT type="submit" value="Invia">
<br><br>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="/include/js/bootstrap-contextmenu.js"></script>
<script type="text/javascript" src="/include/js/bootflat.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/bs/pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.js"></script>
</body>
</html>
Now , I wish that clicking the button in the index is given me to output the list of tables in the db , but at present the query was
code:
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
$query = "SELECT * FROM information_schema.tables";
$risultati=$db->mysqli_query($query);
while ( $row = $risultati->fetch_row() ){
$table = $row[0];
echo '<h3>'.$table.'</h3>';
}
}
I will not print anything, does anyone have any idea ? thank you
First of all, unless you're using a custom class, I think that you confuse procedural and objected oriented style.
This doesn't work:
$db->mysqli_query( $query );
This works:
$db->query( $query );
In addition, SELECT * FROM information_schema.tables doesn't show all the tables in our database. It display instead all the rows in table TABLES from database information_schema (it's not the same: see more about information_schema tables).
To display a list of all tables from your current database, use this query:
"SHOW TABLES"
I am new in jtable, I am retrieving "name","sex" field from mysql database. How to display records using jquery jtable. Please be specific.
<?php
<link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="jtable.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jquery.jtable.js" type="text/javascript"></script>
$sql="select name,sex from user";
$result=mysqli_query($db,$sql);
?>
In Codeigniter I have a view theme-fonts.php that I am loading in another view page.php.
page.php
<?php $this->load->view('theme-fonts'); ?>
<script type="text/javascript">
try{
var fontsArray = <?php json_encode($font_list); ?>;
console.log(fontsArray);
}catch(err){
console.log(err.message);
}
</script>
Following is the definition inside my theme_fonts.php file:
<link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Michroma" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />
<?php
$font_list = array();
array_push($font_list,"Aclonica");
array_push($font_list,"Michroma");
array_push($font_list,"Paytone+One");
array_push($font_list,"Denk+One");
array_push($font_list,"Wendy+One");
array_push($font_list,"Fjalla+One");
?>
So my question is how to access php array from view theme-fonts.php in main view page.php?
Regards: Jehanzeb
in MVC frameworks singleton class is available from everywhere, so you need store you variable to some property in your case the best place is config object,
$this->config->set_item('item_name', 'item_value');
read about CI config
You need to pass the array to your view:
<?php $this->load->view('theme-fonts', array('font_list' => $font_list); ?>
I suggest rather declaring the array in your controller and passing it to the main view, that way the array will be available in all the views you load.
Well after I solved the issue, I feel that it was a stupid question. As I am loading theme-fonts view inside page view and not in parallel. I can simply write my script code in theme-fonts view. This will in turn write it to my page view.
page.php
<?php $this->load->view('theme-fonts'); ?>
theme-fonts.php
<link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Michroma" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />
<?php
$font_list = array();
array_push($font_list,"Aclonica");
array_push($font_list,"Michroma");
array_push($font_list,"Paytone+One");
array_push($font_list,"Denk+One");
array_push($font_list,"Wendy+One");
array_push($font_list,"Fjalla+One");
?>
<script type="text/javascript">
try{
var fontsArray = <?php print(json_encode($font_list)); ?>;
console.log(fontsArray);
}catch(err){
console.log(err.message);
}
</script>
I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:
Saving changes in SlickGrid
So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:
Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:
<?php
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');
$data = '';
$i = 0;
$query = "
SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data .= '
data['.$i.'] = {
id: "'.$row['id'].'",
title: "'.$row['title'].'",
duration: "'.$row['duration'].'",
percentComplete: "'.$row['percentComplete'].'",
start: "'.$row['start'].'",
finish: "'.$row['finish'].'",
effortDriven: "'.$row['effortDriven'].'"
};
';
$i++;
echo $data;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<?php // include("includes/cms_head_scripts.php"); ?>
<link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" src="js/jquery.json.js"></script>
</head>
<body>
<div id="content_cont">
<div id="main">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
pricing
</div><!-- #main -->
</div><!-- #content_cont -->
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title", editor:TextCellEditor},
{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
{id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
{id:"start", name:"Start", field:"start", editor:TextCellEditor},
{id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true
};
$(function() {
<?php echo $data ?>
grid = new Slick.Grid($("#myGrid"), data, columns, options);
})
</script>
<form method="POST" action="save_price.php">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
</body>
</html>