Update This is a complete update to my question
<!doctype html>
<html>
<meta charset="utf-8">
<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Pickadate.js</title>
<link rel="stylesheet" href="../../lib/themes/default.css">
<link rel="stylesheet" href="../../lib/themes/default.date.css">
<link rel="stylesheet" href="../../lib/themes/default.time.css">
<!--[if lt IE 9]>
<script>document.createElement('section')</script>
<style type="text/css">
.holder {
position: relative;
z-index: 10000;
}
.datepicker {
display: block;
}
</style>
<![endif]-->
<body>
<?php
require 'connect-db.php';
try{
$stmt = $db->query("SELECT ddate FROM testdates");
$result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
}catch(\PDOException $e){
echo $e->getMessage();
}
$json_array = json_encode($result)
?>
<section class="section">
<form>
<fieldset>
<h3><label for="datepicker_id">Pick a date.</label></h3>
<input
id="datepicker_id"
class="datepicker"
name="date"
type="text"
value=""
data-value="">
<br><br><br><br><br>
<h3><label for="timepicker_id">Pick a time</label></h3>
<input
id="timepicker_id"
class="timepicker"
value=""
type="time"
name="time">
<!-- valuee="2:30 AM"
data-value="0:00" -->
<!-- <button type="button">Disable all dates</button>
<input class="button" type="submit" value="open"> -->
</fieldset>
</form>
<div id="container"></div>
</section>
<script src="../jquery.1.9.1.js"></script>
<script src="../../lib/picker.js"></script>
<script src="../../lib/picker.date.js"></script>
<script src="../../lib/picker.time.js"></script>
<script src="../../lib/legacy.js"></script>
<script type="text/javascript">
//datepicker
var disdates = <?php echo $json_array; ?>
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: [ disdates
]
})
var picker = $input.pickadate('picker')
// picker.set('select', '14 October, 2014')
// picker.open()
// $('button').on('click', function() {
// picker.set('disable', true);
// });
</script>
<script type="text/javascript">
//timepicker
var dtimes = new Date(2015,11,28,5,30);
var $timeinput = $( '.timepicker' ).pickatime({
disable: [
[2,0],
dtimes
]
})
var timepicker = $timeinput.pickatime('picker')
</script>
</body>
</html> // i must thank users in php chatroom for helping me fix the errors.
That above, is a page where you see a calendar, and some dates are disabled, which are fetched from the database. I'm using this picker
disable: [
[2015,29,9], // disables today strangely month -1 and only accepts yyy,mm,dd
[some other array]
]
})
In my databese 'ddate' is varchar, no primary key, no unique id, nothing, containing
2015,9,30
2015,9,31
2015,10,30
the values aren't being passed or something from mysql to javascript or something, and i guess i want multidimentional array.
what i want the javascript array to have is month -1 because as I explained above, in disable option to disable this day, you have to enter last month number. and if first month, means 12.
Note I want to use the same for timepicker but I guess I could do on my own if I understand the issue with calendar
I assume, that your db content is:
ddate: varchar()
Values stored in table testdates (as strings):
2015-10-29
2015-10-15
2015-10-10
Select is still as is plus create a string for array build to js
try{
$stmt = $db->query("SELECT ddate FROM testdates");
$db_ddates = $stmt->fetchAll(\PDO::FETCH_ASSOC);
$js_ddates = "";
foreach ($db_ddates as $row => $record) {
$js_ddates .= '"' . $record['ddate'] . '",';
}
}
catch(\PDOException $e) {
echo $e->getMessage();
}
Now use that inside building the script part
// take dates as array of strings from db
var ddates_str_arr = [ <?php echo $js_ddates; ?> ];
// build dates array for picker
var disdates = [];
for (var i = 0; i < ddates_str_arr.length; i++) {
disdates.push(new Date(ddates_str_arr[i]));
}
// just use it in picker
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: disdates
});
ATTENTION: I have not test it but just write those lines from mind. There may some typing erratas but should work in general.
UPDATE:
Not sure about picker but give this a try too instead of the above script part
// just use it in picker
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: [ <?php echo $js_ddates; ?> ]
});
Related
I have the following problem when I want to visualize data in the famous Datatable library using a Store Procedure made in SQLServer, I use the Store Procedure to display my information in the table, the problem is that my data is not being reflected in the table, so this I use PHP and AJAX.
To see the information in my Datatable I use its API to attach secondary rows better known as Child Rows, the following is the AJAX code with which I build my table and its parameters:
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Currency</td>'+
'<td>'+d.Currency+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
// "processing": true,
"serverSide": true,
"ajax": {
url :"../utileria.php",
type: "POST",
data: {
param: 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "Order_Buy" },
{ "data" : "Currency" },
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
It is important to note that my parent row will contain the Order_Buy field and my child row the Currency field
The following is my PHP code where I call my Stored Procedure and the class conectar.php
utileria.php
<?php
header('Content-Type: text/html; charset=utf-8');
$param = $_POST['param'];
switch($param) {
case '1':
$query = array();
include 'conectar.php';
$sql = "{call SPTest(?)}";
$stmt = sqlsrv_query($conn, $sql);
if ( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC) ) {
$record = array(
"F.ORDER" => utf8_encode ($row['Order_Buy']), //Orden de compra
"F.CURRENCY" => utf8_encode ($row['Currency']), //Moneda
);
array_push($query, $record);
}
echo json_encode($query);
sqlsrv_free_stmt( $stmt);
sqlsrv_close($conn);
break;
}
?>
I do not know why my table does not show me data, it could be that I have something wrong in any of my codes.
If it helps to give a better clarity of the question I attach the HTML code with which I generate my Datatables table.
!doctype html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="libraries/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="libraries/css/estilos.css" type="text/css">
<script src="libraries/js/jquery-1.12.3.min.js"></script>
<script src="javascript/Example.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="icon" type="image/png" href="libraries/img/icon.png" />
</head>
<body>
<div class="cuerpo">
<div class="dividir menu">
<div class="centrar-vertical">
<img src="libraries/img/logo.jpg" width="200" height="40" alt="Test" class="img-responsive">
</div>
<div class="alinear-derecha centrar-vertical">
<button id="logout-btn" class="btn btn-default">Cerrar Sesión</button>
</div>
</div>
<div id="tablaDatatable">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th></th>
<th>Order_Buy</th>
<th>Currency</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
I have written a js datagrid as I was not happy with any of the available sources, just try it if you are after a data tables Hope it benefit you.
JS Datargid on github
cheers
I'm creating this bootstrap input tag in my project using PHP.
Now, how can I populate the restrictTo and suggestions with data from MySQL?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Send Memorandum</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/memo.css" rel="stylesheet">
<link href="css/bootstrap-tags.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="send.php" method="post" class="memo" style="padding-top:10px">
<div class="form-group row">
<div class="col-xs-8">
<label for="To" style="padding-top: 10px;" >To: </label><br>
<p>suggestOnClick</p>
<div id="suggestOnClick"></div>
</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tags.min.js"></script>
In this section i want to make the default value of the suggestions: to be removed and then replace it with my MySQL data values like "SELECT account_username FROM tbaccounts" into the suggestion: and restrictTo: Is that possible?
So this is my SCRIPT
<script>
$(function(){
$("#suggestOnClick").tags({
restrictTo: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
suggestions: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
promptText: "Click here to add new tags",
suggestOnClick: true
});
});
</script>
</body>
</html>
This is my PHP
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "fullcalendar");
$query = "
SELECT * FROM tbaccounts ORDER BY account_username
";
$result = mysqli_query($connect, $query);
$data = array();
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$data[] = $row["account_username"];
}
echo json_encode($data);
}
?>
Now, How can i put this json_enccode($data); to restricTo: and suggstions: in the SuggestOnClick Funtion?
You can always use jquery ajax.
js file
var app={
init:function(){
$(document).ready(this.initialize);
},
initialize:function(){
$.ajax({
url:'php/fetch.php',
METHOD:'GET',
success:function(data){
data=JSON.parse(data);
$("#suggestOnClick").tags({
restrictTo: data,
suggestions: data,
promptText: "Click here to add new tags",
suggestOnClick: true
});
}
});
}
};
app.init();
php/fetch.php
echo json_encode(array("alpha","bravo","charlie"));
I am using jqgrid and trying to edit a cell and update the value to table in database, but im missing something and couldnt make it work. please help me to correct if im missing something.below is the code for your reference. please help. thanks in advance.
HTML
$qr="SELECT id,`emp_id`,`emp_name`, `att_date`, `emp_join_date`, `intime`,`outtime`,`Total_Hours`,`OT Hours`,`Status` FROM `db_emp_attendance` WHERE Status='Absent' and att_date='2017-04-01'";
$q = mysql_query($qr);
$rows = array();
while($r = mysql_fetch_assoc($q)) {
$rows[] = $r;
}
$json_data=json_encode($rows);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/ecmascript" src="jquery.min.js"></script>
<script type="text/ecmascript" src="jquery.jqGrid.min.js"></script>
<script type="text/ecmascript" src="grid.locale-en.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
<meta charset="utf-8" />
</head>
<body>
<table id="rowed5"></table>
<script type="text/javascript">
var lastsel2
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 400,
autowidth: true,
colNames:['ID','Emp ID','Name', 'Join Date','Attendance Date', 'Time In','Time Out','Total Hours','OT Hours','Status','leave_type'],
colModel:[
{name:'id',index:'id', width:75,align:"center",key: true},
{name:'emp_id',index:'emp_id', width:75,align:"center"},
{name:'emp_name',index:'emp_name', width:150,align:"left"},
{name:'emp_join_date',index:'emp_join_date', width:150,align:"center"},
{name:'att_date',index:'att_date', width:100, align:"center"},
{name:'intime',index:'intime', width:80,align:"center"},
{name:'outtime',index:'outtime', width:80,align:"center"},
{name:'Total_Hours',index:'Total_Hours', width:80,align:"center"},
{name:'OT Hours',index:'OT Hours', width:80,align:"center"},
{name:'Status',index:'Status', width:150,align:"center"},
{name:'leave_type',index:'leave_type', width:150, sortable:false,editable: true,
edittype: "select",
editoptions: {
value: "SickLeave:SickLeave;DayOff:DayOff;Vacation:Vacation"}
}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
jQuery('#rowed5').jqGrid('editRow',id,true);
lastsel2=id;
}
},
editurl:'update.php',
caption: "Attendance"
});
var mydata2 =<?PHP echo $json_data;?>;
for(var i=0;i < mydata2.length;i++)
jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
</script>
</body>
</html>
DB UPDATE PHP FILE
if($_POST['oper']=='edit')
{
$id = mysql_real_escape_string($_POST['id']);
$leave_type = mysql_real_escape_string($_POST['leave_type']);
$sql = "UPDATE db_emp_attendance SET leave_type = '$leave_type' WHERE id = '$id'";
mysql_query($sql);
}
i found a solution and now it is updating in database. i had to add cellEdit : true, cellsubmit : 'remote', cellurl : 'update.php'
I have been trying to make a graph plot with flot, and have ran into a problem.I Think the problem is with the way m using the php variable with flot Aside from that the graph isn't showing so I must have done something wrong. Below is the graph code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.categories.js"></script>
</head>
<body>
<?php
//CONNECTING TO THE SERVER
$servername = "XXX";
$username = "YYY";
$password = "ZZZ";
conn = new mysqli($servername, $username, $password);
$sql = "SELECT NAME, AGE FROM pro_db";
$result = $conn->query($sql);
$wt=array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
//storing the values in the array
$wt[]=$row;//is this the right way
}
} else {
echo "0 results";
}
?>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
//accessing the array
var data = <?php echo $wt; ?>;
$.plot($("#placeholder"), [data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>
</body>
</html>``
Here's completely working example i made. If something doesn't work - there's some error with data. Try var_dump how your $wt array looks like in the end;
$data = [
['Andrew', 31],
['Helen', 29],
['Dasha', 24],
['Denis', 23]
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.categories.js"></script>
<script>
var data = <?php echo json_encode($data) ?>;
$("#canvas").plot([data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
</script>
</body>
</html>
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>