Can't get AJAX form to commit MySQL data

Can't get AJAX form to commit MySQL data - php

I have these two files:
<?php
include('db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Generic Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#time_"+ID).hide();
$("#character_"+ID).hide();
$("#message_"+ID).hide();
$("#status_"+ID).hide();
$("#time_input_"+ID).show();
$("#character_input_"+ID).show();
$("#message_input_"+ID).show();
$("#status_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var time=$("#time_input_"+ID).val();
var character=$("#character_input_"+ID).val();
var message=$("#message_input_"+ID).val();
var status=$("#status_input_"+ID).val();
var dataString = 'id='+ ID +'&time='+ time + '&character='+ character + '&message='+ message+ '&status='+ status;
$("#character_"+ID).html('<img src="load.gif" />');
if(time.length>0 && message.length>0 && character.length>0 && status.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#time_"+ID).html(time);
$("#character_"+ID).html(character);
$("#message_"+ID).html(message);
$("#status_"+ID).html(status);
}
});
}
else
{
alert('Enter something.');
}
});
$(".editbox").mouseup(function()
{
return false
});
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:135px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
</style>
</head>
<body bgcolor="#dedede">
<div style="margin:0 auto; width:750px; padding:10px; background-color:#fff; height:800px;">
<table width="100%">
<tr class="head">
<th>Time</th><th>Character</th><th>Message</th><th>Status</th>
</tr>
<?php
$sql=mysql_query("select * from script");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$character=$row['character'];
$time=$row['time'];
$message=$row['message'];
$status=$row['status'];
if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="10%" class="edit_td">
<span id="time_<?php echo $id; ?>" class="text"><?php echo $time; ?></span>
<input type="text" value="<?php echo $time; ?>" class="editbox" id="time_input_<?php echo $id; ?>" />
</td>
<td width="25%" class="edit_td">
<span id="character_<?php echo $id; ?>" class="text"><?php echo $character; ?></span>
<input type="text" value="<?php echo $character; ?>" class="editbox" id="character_input_<?php echo $id; ?>"/>
</td>
<td width="55%" class="edit_td">
<span id="message_<?php echo $id; ?>" class="text"><?php echo $message; ?></span>
<input type="text" value="<?php echo $message; ?>" class="editbox" id="message_input_<?php echo $id; ?>"/>
</td>
<td width="10%" class="edit_td">
<span id="status_<?php echo $id; ?>" class="text"><?php echo $status; ?></span>
<input type="text" value="<?php echo $status; ?>" class="editbox" id="status_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
$i++;
}
?>
</table>
</div>
</body>
</html>
and
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$time=mysql_escape_String($_POST['time']);
$character=mysql_escape_String($_POST['character']);
$message=mysql_escape_String($_POST['message']);
$status=mysql_escape_String($_POST['status']);
$sql = "update script set time='$time',character='$character',message='$message',status='$status' where id='$id' ";
mysql_query($sql)
or die("display_db_query:" . mysql_error());
}
?>
They don't seem to be throwing errors, but edits also aren't committing to the database. Where am I going wrong?
db.php contains the connect script with all the right "stuff" (all the right fields are showing, the UPDATE just doesn't seem to want to play right)
A working demo to show what it's supposed to do (most of the code is borrowed) is at http://demos.9lessons.info/table_edit/TableEdit.htm
Thanks in advance for any light you can help shed on this, I'm a stumped noob.

character is a reserved word in MySQL. If you want to use it, you'll need to escape it with backticks
UPDATE script SET time='$time', `character` = '$character' ...

Related

Using jquery- $.post(); inside php- foreach() function, to send variable data to URL file

I am trying to delete files inside folder, using delete_file.php, which is action file offcourse. It can recieve data as $_POST['filename1'] only, but for every foreach() iteration , this value is getting over-written. Any suggestions, what else can SOLVE this subject? Thanks in Advance.
Problem:
delete_file.php is catching filename1 as $_POST['filename1']
But with each foreach iteration, filename1 is getting over-written.
And delete_file.php, is deleting LAST ENTRY ONLY, EVERY TIME.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--[if lte IE 8]>
<script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ie8.css"/><![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ie9.css"/><![endif]-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.leanModal.min.js"></script>
</head>
<body class="no-sidebar">
<table border="1px solid" style="text-align:center; margin-left:auto; margin-right:auto; width:900px">
<tr>
<th><strong>S.No</strong></th>
<th><strong>Image-Name</strong></th>
<th><strong>Image/Logo</strong></th>
<th><strong>Image Size</strong></th>
<th><strong>Action</strong></th>
</tr>
<?php
$dirname = "../assets/img/logos/";
$images = glob($dirname . "*.{jpg,png,gif,tiff,jpeg,JPG}", GLOB_BRACE);
$sn = 1;
foreach ($images as $image) {
$imageName = str_replace("../assets/img/logos/", "", $image);
$variable_id = str_replace(".", "_", $imageName);
?>
<!---///////////////////// IMAGE-<?= $sn++ ?> STARTS //////////////////////----------->
<tr>
<td><?= $sn++ ?></td>
<td><?php echo $imageName; ?></td>
<td><img src="<?php echo $image; ?>" width="150px" height="100px"/></td>
<td><?php echo filesize($image) / 1000 . " KB"; ?></td>
<!-------
<td>
<a id="delete" href="delete_plogos.php?filename=<?//=$imageName ?>" style="color:#D00A0D"><strong>Delete</strong></a>
</td>
-------->
<td>
<p style="text-align: center; font-size: 10px; margin-top: 5px;">
<a id="modaltrigger_<?= $variable_id ?>" href="#<?= $variable_id ?>" class="btn"
style="border: none !important;">Delete</a>
</p>
</td>
</tr>
<!----------------------popup for delete----------------------->
<div id="<?= $variable_id ?>" class="popupContainer" style="display:none;">
<header class="popupHeader" style="background: #F4F4F2;
position: relative;
padding: 10px 20px;
border-bottom: 1px solid #DDD;
font-weight: bold; height: 55px;">
<span class="header_title">Delete</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<!-- Register Form -->
<div class="deleteplogo_<?= $variable_id ?>">
<form id="newpageform_<?= $variable_id ?>" name="newpageform_<?= $variable_id ?>" method="post">
<input name="filename_<?= $variable_id ?>" id="filename_<?= $variable_id ?>" type="text" style="display:none"
value="<?= $imageName ?>"/>
<p><strong><?= $imageName ?> - Image will be deleted Permanently. <br/>Proceed
?</strong></p>
<br/>
<div class="action_btns">
<div class="one_half" style="float:none;">
<a id="ajax-submit_<?= $variable_id ?>" class="btn btn_red" style="cursor: pointer"
>Yes! I
Agree
.Delete</a></div>
</div>
</form>
</div><!--------delete_plogo----------->
</section>
</div> <!----------------------#modal ENDS----------------------->
<!---------------- delete image : pop up ------------------------------>
<script type="text/javascript">
var magica = "<?php echo $variable_id; ?>";
$('#modaltrigger_' + magica).leanModal({top: 200, overlay: 0.6, closeButton: ".modal_close"});
$(function () {
$('#modaltrigger_' + magica).click(function () {
$('.deleteplogo_' + magica).show();
return false;
});
})
/////// 3.) AJAX-FORM SUBMIT - + then reload
$("#ajax-submit_"+magica).click(function () {
var filename = $("#filename_"+magica).val();
if (filename == '') {
alert("File doesn't EXIST....!!");
} else {
$.post("delete_plogos_action.php", {filename1: filename}, function (data) {
$("span.modal_close > i").trigger("click"); // to auto-close leanModal window
alert(data).fadeOut("slow");
window.location=trustedpartners_listviewdel_logos.php;
//close_modal("modal");
});
}
});
</script>
<!---///////////////////// IMAGE-ENDS //////////////////////----------->
<?php
}
?>
</table>
</body>
</html>

You can try something like removing the php loop:
<script type = "text/javascript" >
$(function() {
$('div[id^="modaltrigger_"]').leanModal({
top: 200,
overlay: 0.6,
closeButton: ".modal_close"
});
$('div[id^="modaltrigger_"]').click(function() {
magica = $(this).attr('id').split('_')[1];
$('.deleteplogo_' + magica).show();
return false;
});
})
$('div[id^="ajax-submit_"]').click(function() {
magica = $(this).attr('id').split('_')[1];
var filename = $("#filename_" + magica).val();
if (filename == '') {
alert("File doesn't EXIST....!!");
} else {
$.post("delete_file.php", {
filename1: filename
}, function(data) {
$("span.modal_close > i").trigger("click");
//alert(data).fadeOut("slow"); damn you can't fade out a alert box :))
window.location = mypage.php;
} // else ends here
});
}); < /script>
A better solution will be to replace the ids with a class and append a data-attribute to the elements iwth the value of magica

Deleted all AJAX-JQUERY code & used :
file1.php
<td>
<p style="text-align: center; font-size: 10px; margin-top: 5px;">
<a id="modaltrigger_<?= $variable_id ?>" href="delete.php?id=<?php echo $imageName; ?>" class="btn"
style="border: none !important;">Delete</a>
</p>
</td>
delete.php
<?php
$filePath = "D:/folder/".$_GET['id'];
if(is_file($filePath)){
#unlink($filePath);
echo ('<strong>SUCCESS! Deleted: <span style="color:red">'. $_GET['id']. '</span>, file from Directory</strong>');
}
else if(!unlink($filePath)){
echo ("Error deleting file : ". $_GET['id']. " Already deleted OR doesn't EXIST");
}
?>
Worked like Charm ! Thanks !

How to use pagination in php

Hi i am retrieving data from database using pagination which i am able to retrieve but i am facing problem that in my pagination next and last button is not working
here is my code
** index.php**
<script type="text/javascript">
function searchboxfun(numRecords, pageNum ) {
$.ajax({
type: "GET",
url: "usersearchboxresult.php?search=" + document.getElementById("UserSearchBox").value,
data: "show="+numRecords+"&pagenum="+pageNum,
cache: false,
beforeSend: function () {
$('#content').html('<img src="loader.gif" alt="" width="24" height="24" style=" padding-left:469px;">');
},
success: function(html) {
$("#RightPaneContainerDiv").html( html );
}
});
return false;
}
function changeDisplayRowCount(numRecords) {
searchboxfun(numRecords, 1);
}
$( document ).ready(function() {
searchboxfun(10, 1);
});
</script>
<form name="myForm" id="Myform" action="#" onsubmit="return searchboxfun(); ">
<input type="text" id="UserSearchBox" name="UserSearchBox" style="width: 95%; margin-top: 15px; margin-left: 2%;" placeholder="Search Box"/>
<div style="float: right; margin-right: 2%; margin-top: 0px;">
<input type="submit" name="Search" value="Search" id="search" onclick='searchboxfun();'>
</div>
</form>
usersearchboxresult.php
<?php
session_start();
?>
<head>
<style>
.hidden { display: none; }
</style>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="javascript" src="users.js" type="text/javascript"></script>
<script src="jquery.js"></script>
</head>
<?php
require_once("configure.php");
// Very important to set the page number first.
if (!(isset($_GET['pagenum']))) {
$pagenum = 1;
} else {
$pagenum = $_GET['pagenum'];
}
//Number of results displayed per page by default its 10.
$page_limit = ($_GET["show"] <> "" && is_numeric($_GET["show"]) ) ? $_GET["show"] : 10;
// Get the total number of rows in the table
//$sql = "SELECT * FROM tbl_pagination WHERE 1" ;
$search=$_GET['search'];
$eid=$_SESSION['eid'];
$sql="select * from clientreg where eid=$eid and (mobile like '%$search%' or fname like '%$search%' or service like '%$search%')";
//$select_table = "";
$cnt = mysql_num_rows( mysql_query($sql))or die("There is no record in Database!");
//Calculate the last page based on total number of rows and rows per page.
$last = ceil($cnt/$page_limit);
//this makes sure the page number isn't below one, or more than our maximum pages
if ($pagenum < 1) {
$pagenum = 1;
} elseif ($pagenum > $last) {
$pagenum = $last;
}
$lower_limit = ($pagenum - 1) * $page_limit;
$sql2 = $sql . " limit ". ($lower_limit)." , ". ($page_limit). " ";
$rs = mysql_query($sql2);
?>
<form name="frmUser" method="post" action="">
<div style="width:98%; margin-left:20px;">
<table border="0" cellpadding="10" cellspacing="1" width="100%" class="tblListForm">
<?php
$j=0;
$countleadmodified=array();
$countResult = 0;
while ( $row = mysql_fetch_array($rs) ) {
<tr>
<td><input type="checkbox" name="users[]" class="users" value="<?php echo $row["id"]; ?>" ></td>
<td>✰</td>
<td><?php echo $_SESSION['user'];?></td>
<td><?php echo $row["fname"];?></td>
<td><?php echo $row["lname"];?></td>
<td><?php echo $row["mobile"];?></td>
</tr>
<?php
$j++;
}
?>
</table>
</div>
</form>
<div id="paging">
<div class="height30"></div>
<table width="50%" border="0" cellspacing="0" cellpadding="2" align="center">
<tr>
<td valign="top" align="left">
<label> Rows Limit:
<select name="show" onChange="changeDisplayRowCount(this.value);">
<option value="10" <?php if ($_GET["show"] == 10 || $_GET["show"] == "" ) { echo ' selected="selected"'; } ?> >10</option>
<option value="20" <?php if ($_GET["show"] == 20) { echo ' selected="selected"'; } ?> >20</option>
<option value="30" <?php if ($_GET["show"] == 30) { echo ' selected="selected"'; } ?> >30</option>
</select>
</label>
</td>
<td valign="top" align="center" >
<?php
if ( ($pagenum-1) > 0) {
?>
First
Previous
<?php
}
//Show page links
for($i=1; $i<=$last; $i++) {
$j=1;
if ($i == $j) {
?>
<!--<a href="javascript:void(0);" class="selected" ><?php echo $i ?></a>-->
<?php
} else {
?>
<a href="javascript:void(0);" class="hidden" onclick="displayRecords('<?php echo $page_limit; ?>', '<?php echo $i; ?>');" ><?php echo $i ?></a>
<?php
}
$j++;}
if ( ($pagenum+1) <= $last) {
?>
Next
<?php } if ( ($pagenum) != $last) { ?>
<a href="javascript:void(0);" onclick="displayRecords('<?php echo $page_limit; ?>', '<?php echo $last; ?>');" class="links" >Last</a>
<?php
}
?>
</td>
<td align="right" valign="top">
Page <?php echo $pagenum; ?> of <?php echo $last; ?>
</td>
</tr>
</table>
</div>
here i this code i am able to retrive data from data base but any pagination is not working
where i am wrong how can i achieve my goal
Any help will be appreciated

append data and write comment the comment repeated

I have a problem
When added 3 posts and write a comment on the Post number 2 comment repeated.
Clarify more
when i added 3 posts
post 1 = a
post 2 = b
post 3 = c
and write a comment on post 2 this comment repeated pleas help
like this photo
this is the file
index.php
<? include("../post/includes/config.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#update_state").submit(function(){
var text = $(".text") .val();
var s = {
"text":text
}
$.ajax({
url:'action.php',
type:'POST',
data:s,
cache: false,
beforeSend: function (){
$(".loading") .show();
$(".loading") .html("loading...");
},
success:function(html){
$("#show_new_posts") .prepend(html);
$(".loading") .hide();
$(".text") .val("");
}
});
return false;
});
//add comment
$(".comment_form").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel="+id_post+"]") .val();
var s = {
"id_post":id_post,
"text_comm":text_comm
}
$.ajax({
url:'add_comment.php',
type:'post',
data:s,
beforeSend: function (){
$(".loadingcomm[rel="+id_post+"]") .show();
$(".loadingcomm[rel="+id_post+"]") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success:function(html){
$(".loadingcomm[rel="+id_post+"]").hide();
$(".commtext[rel="+id_post+"]") .val("");
$(".shownewcomm[rel="+id_post+"]").append(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="update_state">
<textarea class="text" name="text"></textarea>
<input type="submit" value="go" />
</form>
<div class="loading"></div>
<div id="show_new_posts"></div>
<?
$select_posts = $mysqli->query("SELECT * FROM posts ORDER BY id DESC LIMIT 4 ");
$num_posts = $select_posts->num_rows;
if($num_posts){
while ($rows_posts = $select_posts->fetch_array(MYSQL_ASSOC)){
$id_posts = $rows_posts ['id'];
$post_posts = $rows_posts ['post'];
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<? echo $post_posts; ?>
</div>
<div class="shownewcomm" rel="<? echo $id_posts; ?>"></div>
<form rel="<? echo $id_posts; ?>" class="comment_form">
<textarea rel="<? echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<?
}
}
?>
</body>
</html>
action.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".comment_form").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel="+id_post+"]") .val();
var s = {
"id_post":id_post,
"text_comm":text_comm
}
$.ajax({
url:'add_comment.php',
type:'post',
data:s,
beforeSend: function (){
$(".loadingcomm[rel="+id_post+"]") .show();
$(".loadingcomm[rel="+id_post+"]") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success:function(html){
$(".loadingcomm[rel="+id_post+"]").hide();
$(".commtext[rel="+id_post+"]") .val("");
$(".shownewcomm[rel="+id_post+"]").append(html);
}
});
return false;
});
});
</script>
<?php
include("../post/includes/config.php");
$text = $_POST['text'];
$insert = $mysqli->query("INSERT INTO posts (id, post) VALUE ('', '$text')");
$id_posts = $mysqli->insert_id;
if($insert){
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<? echo $text; ?>
</div>
<div class="shownewcomm" rel="<? echo $id_posts; ?>"></div>
<form rel="<? echo $id_posts; ?>" class="comment_form">
<textarea rel="<? echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<?
}
?>
add_comment.php
<?php
$id_post = $_POST['id_post'];
$text_comm = $_POST['text_comm'];
?>
admin : <? echo $text_comm; ?>
<br />

You have $(".comment_form").submit with ajax call in index.php and action.php. And in index.php you are prepending action.php result like this
$("#show_new_posts").prepend(html);
May be because of this there will be more than one ajax call. Remove all JavaScript code from action.php and try
Update:
Changes made in action.php are as below:
Removed jquery reference from it as already there in index.php and moved other JS code at the end
Added id in form
<form rel="<?php echo $id_posts; ?>" id="comment_form_<?php echo $id_posts; ?>" class="comment_form">
Updated submit handler to use form id like this:
$("#comment_form_<?php echo $id_posts; ?>").submit(function(){
Updated action.php code is as below:
<?php
include("../post/includes/config.php");
$text = $_POST['text'];
$insert = $mysqli->query("INSERT INTO posts (id, post) VALUE ('', '$text')");
$id_posts = $mysqli->insert_id;
if ($insert) {
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<?php echo $text; ?>
</div>
<div class="shownewcomm" rel="<?php echo $id_posts; ?>"></div>
<form rel="<?php echo $id_posts; ?>" id="comment_form_<?php echo $id_posts; ?>" class="comment_form">
<textarea rel="<?php echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<script type="text/javascript">
$(function() {
$("#comment_form_<?php echo $id_posts; ?>").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel=" + id_post + "]").val();
var s = {
"id_post": id_post,
"text_comm": text_comm
}
$.ajax({
url: 'add_comment.php',
type: 'post',
data: s,
beforeSend: function() {
$(".loadingcomm[rel=" + id_post + "]").show();
$(".loadingcomm[rel=" + id_post + "]").html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success: function(html) {
$(".loadingcomm[rel=" + id_post + "]").hide();
$(".commtext[rel=" + id_post + "]").val("");
$(".shownewcomm[rel=" + id_post + "]").append(html);
}
});
return false;
});
});
</script>
<?php
}
?>

editing CSS of PHP grid

I have an editable grid where I want to edit the CSS such that the textarea to show the maximum width, but somehow I can't increase the width of the text area.
My database has three columns:
ID
Name
Gossip
I'm retrieving everything and displaying it in an editable grid using PHP.
index.php code
<?php
$db = new mysqli('localhost', 'root', '', 'bollywood');
$db->set_charset('utf8');
if ($db->connect_errno) {
die('Check the database connection again!');
}
$userQuery = 'SELECT Id,Name,Gossip FROM bollywood';
$stmt = $db->query($userQuery);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var textBefore = '';
$('#grid').find('td input').hover(function() {
textBefore = $(this).val();
$(this).focus();
}, function() {
var $field = $(this),
text = $field.val();
$(this).blur();
// Set back previous value if empty
if (text.length <= 0) {
$field.html(textBefore);
} else if (textBefore !== text) {
// Text has been changed make query
var value = {
'row': parseInt(getRowData($field)),
'column': parseInt($field.closest('tr').children().find(':input').index(this)),
'text': text
};
$.post('user.php', value)
.error(function() {
$('#message')
.html('Make sure you inserted correct data')
.fadeOut(3000)
.html('&nbsp');
$field.val(textBefore);
})
.success(function() {
$field.val(text);
});
} else {
$field.val(text);
}
});
// Get the id number from row
function getRowData($td) {
return $td.closest('tr').prop('class').match(/\d+/)[0];
}
});
</script>
<title></title>
</head>
<body>
<?php if ($stmt): ?>
<div id="grid">
<p id="message">Click on the field to Edit Data</p>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gossip</th>
</tr>
</thead>
<tbody>
<?php while ($row = $stmt->fetch_assoc()): ?>
<tr class="<?php echo $row['Id']; ?>">
<td><input type="text" value="<?php echo $row['Id']; ?>" /> </td>
<td><input type="text" value="<?php echo $row['Name']; ?>" /></td>
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<?php else: ?>
<p>No actors added yet</p>
<?php endif; ?>
</body>
</html>
user.php code
<?php
// Detect if there was XHR request
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$fields = array('row', 'column', 'text');
$sqlFields = array('Id', 'Name', 'Gossip');
foreach ($fields as $field) {
if (!isset($_POST[$field]) || strlen($_POST[$field]) <= 0) {
sendError('No correct data');
exit();
}
}
$db = new mysqli('localhost', 'root', '', 'bollywood');
$db->set_charset('utf8');
if ($db->connect_errno) {
sendError('Connect error');
exit();
}
$userQuery = sprintf("UPDATE bollywood SET %s='%s' WHERE Id=%d",
$sqlFields[intval($_POST['column'])],
$db->real_escape_string($_POST['text']),
$db->real_escape_string(intval($_POST['row'])));
$stmt = $db->query($userQuery);
if (!$stmt) {
sendError('Update failed');
exit();
}
}
header('Location: index.php');
function sendError($message) {
header($_SERVER['SERVER_PROTOCOL'] .' 320 '. $message);
}
style.css code
body {
font: normal 14px Comic Sans, Comic Sans MS, cursive;
}
table {
width: 500px;
}
td, th {
border: 1px solid #d8d8bf;
}
th {
padding: 5px;
font: bold 14px Verdana, Arial, sans-serif;
}
td {
padding: 10px;
width: 200px;
}
td input {
margin: 0;
padding: 0;
// width:200px;
font: normal 14px sans-serif;
/** Less flicker when :focus adds the underline **/
border: 1px solid #fff;
}
td input:focus {
outline: 0;
border-bottom: 1px dashed #ddd !important;
}
#grid input {
// width: 200%;
}

You doing it wrong
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
Should be:
<td ><textarea cols="500" rows="100"><?php echo $row['Gossip']; ?></textarea>

textarea is html tag name but not input type. so change this.
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
to
<td ><textarea cols="500" rows="100"><?php echo $row['Gossip']; ?></textarea>
also add this css.
<style>
textarea {
resize: both;
width:700px;
}
</style>
also are you sure that you can get content using this.
<?php echo $row['Gossip']; ?>

how to edit table column data with jquery/ajax and save to mysql

I am using the following code to edit a table of data on the fly for an admin area. It works well with only two columns, but when I add more I am not able to edit the data and have it save to mysql. Can someone show me how to add 5 more columns that will work. Here is a demo and where the code originates DEMO
<?php include('db.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Table Edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".edit_tr").click(function() {
var ID = $(this).attr('id');
$("#first_" + ID).hide();
$("#last_" + ID).hide();
$("#first_input_" + ID).show();
$("#last_input_" + ID).show();
}).change(function() {
var ID = $(this).attr('id');
var first = $("#first_input_" + ID).val();
var last = $("#last_input_" + ID).val();
var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
$("#first_" + ID).html('<img src="load.gif" />');
if (first.length && last.length > 0) {
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html) {
$("#first_" + ID).html(first);
$("#last_" + ID).html(last);
}
});
}
else {
alert('Enter something.');
}
});
$(".editbox").mouseup(function() {
return false
});
$(document).mouseup(function() {
$(".editbox").hide();
$(".text").show();
});
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
</style>
</head>
<body>
<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<?php
$sql=mysql_query("select * from fullnames");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname=$row['firstname'];
$lastname=$row['lastname'];
if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span>
<input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
$i++;
}
?>
</table>
</body>
</html>
Here is the code for the ajax file table_edit_ajax.php
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
mysql_query($sql);
}
?>
edited code
<?php include('db.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Table Edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".edit_tr").click(function() {
var ID = $(this).attr('id');
$("#first_" + ID).hide();
$("#last_" + ID).hide();
$("#othercolumn3_" + ID).hide();
$("#othercolumn4_" + ID).hide();
$("#othercolumn5_" + ID).hide();
$("#first_input_" + ID).show();
$("#last_input_" + ID).show();
$("#othercolumn3_input_" + ID).show();
$("#othercolumn4_input_" + ID).show();
$("#othercolumn5_input_" + ID).show();
}).change(function() {
var ID = $(this).attr('id');
var first = $("#first_input_" + ID).val();
var last = $("#last_input_" + ID).val();
var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last + '&othercolumn3=' + othercolumn3 + '&othercolumn4=' + othercolumn4 + '&othercolumn5=' + othercolumn5;
$("#first_" + ID).html('<img src="load.gif" />');
if (first.length && last.length && othercolumn3.length && othercolumn4.length && othercolumn5.length > 0) {
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html) {
$("#first_" + ID).html(first);
$("#last_" + ID).html(last);
$("#othercolumn3_" + ID).html(othercolumn3);
$("#othercolumn4_" + ID).html(othercolumn4);
$("#othercolumn5_" + ID).html(othercolumn5);
}
});
}
else {
alert('Enter something.');
}
});
$(".editbox").mouseup(function() {
return false
});
$(document).mouseup(function() {
$(".editbox").hide();
$(".text").show();
});
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
</style>
</head>
<body>
<table width="100%">
<tr class="head">
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
</tr>
<?php
$sql=mysql_query("select * from offers");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname = $row['one'];
$lastname = $row['two'];
$othercolumn3 = $row['three'];
$othercolumn4 = $row['four'];
$othercolumn5 = $row['five'];
if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span>
<input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn3_<?php echo $id; ?>" class="text"><?php echo $othercolumn3; ?></span>
<input type="text" value="<?php echo $othercolumn3; ?>" class="editbox" id="othercolumn3_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn4_<?php echo $id; ?>" class="text"><?php echo $othercolumn4; ?></span>
<input type="text" value="<?php echo $othercolumn4; ?>" class="editbox" id="othercolumn4_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn5_<?php echo $id; ?>" class="text"><?php echo $othercolumn5; ?></span>
<input type="text" value="<?php echo $othercolumn5; ?>" class="editbox" id="othercolumn5_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
$i++;
}
?>
</table>
</body>
</html>
ajax
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$othercolumn3 = mysql_escape_String($_POST['othercolumn3']);
$othercolumn4 = mysql_escape_String($_POST['othercolumn4']);
$othercolumn5 = mysql_escape_String($_POST['othercolumn5']);
$sql = "update offers set firstname='$firstname',lastname='$lastname', othercolumn3='$othercolumn3', othercolumn4='$othercolumn4, othercolumn5='$othercolumn5' where id='$id'";
mysql_query($sql);
}
?>

You mean this?
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$othercolumn1 = mysql_escape_String($_POST['othercolumn1']);
...
$othercolumn5 = mysql_escape_String($_POST['othercolumn5']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname', othercolumn1='$othercolumn1', ..., othercolumn5='$othercolumn5' where id='$id'";
You'd have to create the appropriate input elements and add the required code to the jquery that's calling the script:
var first = $("#first_input_" + ID).val();
var last = $("#last_input_" + ID).val();
var othercolumn1 = $("#othercoumn1_input_" + ID).val();
...
var othercolumn5 = $("#othercoumn5_input_" + ID).val();
var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last + '&othercolumn1=' + othercolumn1 + ... + '&othercolumn5=' + othercolumn5;
$("#first_" + ID).html('<img src="load.gif" />');
if (first.length && last.length > 0) {
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html) {
$("#first_" + ID).html(first);
$("#last_" + ID).html(last);
$("#othercolumn1_" + ID).html(othercolumn1);
...
$("#othercolumn5_" + ID).html(othercolumn5);
}
But you should be able to sort things like this out for yourself. ;)

A better way is to add the html attribute "contenteditable" to the table cells to allow inline editing on clicking cell view
and then attach a function the onblur event to update the database using ajax.

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

Can't get AJAX form to commit MySQL data - php

character is a reserved word in MySQL. If you want to use it, you'll need to escape it with backticks UPDATE script SET time='$time', `character` = '$character' ...

Related

Using jquery- $.post(); inside php- foreach() function, to send variable data to URL file

How to use pagination in php

append data and write comment the comment repeated

editing CSS of PHP grid

how to edit table column data with jquery/ajax and save to mysql

Categories

Resources