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>
Related
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 would like to get the value sent from php via AJAX in php. But i can not get value. Where is my mistake?
It is my functions.js
$(document).ready(function(){
$(".yeni_problem").click(function(){
var uid = 1;
$.ajax({
url: 'admin.php',
type: "post",
data: {'uid': uid},
success: function(data){
// $("#cvb").text(data);
},
statusCode: {
404: function(){
alert("admin.php not found");
}
}
});
});
});
and it is my php page that, i control sending value in here. The Codes is large but i write small form. Which that when i run the small codes on other folders as other site it does't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELPDESK</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/icon.css">
</head>
<body>
<button class="yeni_problem">Yeni Problem</button>
<?php
if(isset($_POST['uid'])){
echo "Value:".$_POST['uid'];
}else{
echo "<hr>Value not found<br/>";
}
var_dump($_POST);
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<?php
echo "</body>
</html>";
?>
When i click to ".yeni_problem" class i can not get value.
1st- check you include Jquery
2nd- Be sure admin.php page in the same directory with file you called functions.js in if not check its path
3rd- you pass uid not data so in php use
<?php
if(isset($_POST['uid'])){
echo "Value:".$_POST['uid'];
}else{
echo "Value not found";
}
?>
4th: and if you dynamically generate the element with class="yeni_problem" .. so use
$('body').on('click',".yeni_problem", function(){
instead of
$(".yeni_problem").click(function(){
5th: if yeni_problem is a submit button or anchor so you need to use e.preventDefault(); to prevent page from reloading
$(".yeni_problem").click(function(e){
e.preventDefault();
// rest of code here
6th: if yeni_problem is a form use .submit()
$(".yeni_problem").submit(function(e){
e.preventDefault();
// rest of code here
Pay attention to your code: in the JS snippet, the parameter passed to the server is "uid", which means your server will be getting a $_POST array with a position labeled "UID".
<?php
if(isset($_POST["uid"])){
echo "Value:".$_POST["uid"];
}else{
echo "Value not found";
}
?>
You should also check what is in the $_POST variable, insert var_dump($_POST) and comment out the rest of the code.
Hi I am trying to make a personal code playground... I am using Code Mirror to turn into looking like an IDE (I also plan to add features of an IDE later but...). My current code is basically..
HTML (index.html)
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet" />
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
<textarea id="htmlWindow"></textarea>
<textarea id="cssWindow"></textarea>
<textarea id="jsWindow"></textarea>
<input type="submit" />
</form>
<script class="code">
var htmlCodeMirror = CodeMirror(function(elt) {
htmlWindow.parentNode.replaceChild(elt, htmlWindow);
}, {value: "<!-- HTML goes here -->",
lineNumbers: true,
mode: "text"});
</script>
<script class="code">
var cssCodeMirror = CodeMirror(function(elt) {
cssWindow.parentNode.replaceChild(elt, cssWindow);
}, {value: "/* CSS goes here. */",
lineNumbers: true,
mode: "css"});
</script>
<script class="code">
var jsCodeMirror = CodeMirror(function(elt) {
jsWindow.parentNode.replaceChild(elt, jsWindow);
}, {value: "// JavaScript goes here.",
lineNumbers: true,
mode: "javascript"});
</script>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
</body>
PHP (codePush.php)
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_GET['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_GET['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_GET['htmlWindow'];
?>
</body>
</html>
I have made sure the link to the iFrame works because when adding text to the PHP file in the body section it displays when submit is pressed.
I hope I have made it clear and would appreciate any help...
Just for reference I am a bit of a NOoB when it comes to PHP
I'm not entriely sure what you're trying to achieve with all the code you provided, but here's a simplified version that will fix the main issue of the code not processing in codePush.php:
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
HTML:<textarea id="htmlWindow" name="htmlWindow"></textarea>
CSS:<textarea id="cssWindow" name="cssWindow"></textarea>
JS:<textarea id="jsWindow" name="jsWindow"></textarea>
<input type="submit" />
</form>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
CodePush.php
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_POST['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_POST['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_POST['htmlWindow'];
?>
</body>
</html>
Note that CodePush.php uses 'POST' not 'GET' so that it is consistent with your form. You were also missing 'name' attributes on the textareas which is what is used in the post (not the ids).
You might want to consider adding in some checks if the fields aren't complete to avoid errors etc.
i want to delete a record that are showing in while loop from the database but before deleting i want to display a confirmation box.The code i have written is below.it is working fine but to delete record i need to pass an id that i haave described in the code
------index.php starts
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
<div class="item">
<div class="delete"></div>
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
----index.php ends
----jquery.confirm.js file starts
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += ''+name+'<span></span>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
----jquery.confirm.js file ends
-----script.js file starts
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
elem.slideUp();
//sql delete query will be written here... in where condition i need to pass the fetched record id from index.php file in where condtion
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});
-----script.js ends
You can use the html data attribute and retrieve it with .data jQuery method
In your HTML:
<div class="delete" data-id="{$id}"></div>
In your Javascript
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
var id = elem.data('id'); /* this is your db id */
});
Are you sure you want to send a query from Javascript? The usual way to do this is to send a request (via jQuery) with that specific id, to a script which runs the query (server side), and returns a response.
Now, since you add the item divs, using a while, why not add an id property to the divs, which contain the id from the database, something like
<div id="item<?php echo $row['id'];?>" class="item">
<div class="delete">
</div>
This way, the $('.item .delete').click handler has access to the item's id, by parsing the target's id property, and you don't need to pass it explicitly to jQuery.
Here you can use hidden field to save value for id and then use jquery to retrieve it from hidden field..
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<input type="hidden" id="hid_id" value="<?php echo 'fetched id';?>" />
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
And then in jquery when using confirm box you can get value by id hid_id .
I'm trying to refresh a div with jquery that loads the time which is generated with php.
I've read some of the articles on jquery that were already on here and tried using those to refresh my div, but I failed.
echo '<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>' . $title . '</title>
<link type="text/css" rel="stylesheet" media="all" href="styles/style.css" />
<link type="text/css" rel="stylesheet" media="all" href="styles/layout.css" />
<link type="text/css" rel="stylesheet" media="all" href="styles/' . $bodycss . '" />
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function update() {
$.get("'.$_SERVER['REQUEST_URI'].'", function(data) {
$("#time").html(data);
window.setTimeout(update, 500);
});
}
</script>
<div id="container">
<header id="header" class="margin5">
<div id="info"> <img src="images/logo.jpg" alt="Oppasweb" /> </div>
<div id="time"><time datetime=' . getTimeForTag() . '>' . getTime() . '</time></div>
<div class="clear"></div>
';
}
The javascript should refresh the div every .5 of a second, generating the new time, however it doesn't do that, the time stays static.
your setInterval function is wrong (never closed).
you should not need it for that.
function update() {
$.get("'.$_SERVER['REQUEST_URI'].'", function(data) {
$("#time").html(data);
window.setTimeout(function() {update();}, 500);
});
}
$(document).ready(function () {
update();
});
moreover, with looping so often, you might want to id your call (with a i++), and append to the times to the div instead of replacing the full html. You might want to look for the difference between setTimeout and setInterval.
note: true, full html as string is bad practice. but for test purposes, it's not that important (imo)