Trouble getting Jeditable working...
Trouble getting Jeditable working...
jeffsass
Posts: 2Questions: 0Answers: 0
As the discussion heading indicates I am having trouble getting jeditable working.
I am a newbie to jquery and datatables so don't be too harsh :>)
I have sifted through the forums and gotten to the point where I can display the data without any problem, and filter the data as well.
the last piece of the puzzle is editing the information in place and updating the database.
I have a simple table pulling info from a single MySql db table, here is the code:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Document
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "extras/TableTools/media/css/TableTools.css";
/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"sSwfPath": "/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf",
"aaSorting": [ [2,'asc'] ],
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"sPaginationType": "full_numbers",
} );
/* Apply the jEditable handlers to the table */
$('td.edit', oTable.fnGetNodes()).editable( 'examples/examples_support/editable_ajax.php', {
indicator : 'Saving...',
tooltip : "Double click to edit.",
event : "dblclick",
onblur : 'submit',
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"col_id": this.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );
<?php
//connection string to DB here
$sql = "Select * FROM nldb_youthcontact";
$result = mysql_query($sql);
echo "
IDFirst NameLast NameAddressCityStateZipDOBGrad YearEmailPendingActive";
echo "";
while ( $row = mysql_fetch_array($result) ) {
echo "";
echo "" .$row['ID']."";
echo "" .$row['FName']."";
echo "" .$row['LName']."";
echo "" .$row['Address']."";
echo "" .$row['City']."";
echo "" .$row['State']."";
echo "" .$row['Zip']."";
echo "" .$row['DOB']."";
echo "" .$row['GradYear']."";
echo "" .$row['Email']."";
echo "" .$row['Pending']."";
echo "" .$row['Active']."";
echo "";
}
echo "";
echo "";
?>
[/code]
The page the information posts to looks like this:
[code]
<?php
//connection string to db here
$column = $_POST['col_id'];
$id = $_POST['row_id'];
$updateValue = $_POST['value'];
mysql_query("UPDATE nldb_youthcontact SET ".$column."='".$updateValue."' WHERE ID=".$id);
//echo $_POST['value'].' [cDB updated]';
echo $_POST['value'].' (server updated)';
?>
[/code]
When I try to edit a record on the page I get the "Saving..." message however nothing is updated in the DB.
Any help in getting this going would be greatly appreciated.
Thanks.
I am a newbie to jquery and datatables so don't be too harsh :>)
I have sifted through the forums and gotten to the point where I can display the data without any problem, and filter the data as well.
the last piece of the puzzle is editing the information in place and updating the database.
I have a simple table pulling info from a single MySql db table, here is the code:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Document
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "extras/TableTools/media/css/TableTools.css";
/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"sSwfPath": "/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf",
"aaSorting": [ [2,'asc'] ],
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"sPaginationType": "full_numbers",
} );
/* Apply the jEditable handlers to the table */
$('td.edit', oTable.fnGetNodes()).editable( 'examples/examples_support/editable_ajax.php', {
indicator : 'Saving...',
tooltip : "Double click to edit.",
event : "dblclick",
onblur : 'submit',
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"col_id": this.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );
<?php
//connection string to DB here
$sql = "Select * FROM nldb_youthcontact";
$result = mysql_query($sql);
echo "
IDFirst NameLast NameAddressCityStateZipDOBGrad YearEmailPendingActive";
echo "";
while ( $row = mysql_fetch_array($result) ) {
echo "";
echo "" .$row['ID']."";
echo "" .$row['FName']."";
echo "" .$row['LName']."";
echo "" .$row['Address']."";
echo "" .$row['City']."";
echo "" .$row['State']."";
echo "" .$row['Zip']."";
echo "" .$row['DOB']."";
echo "" .$row['GradYear']."";
echo "" .$row['Email']."";
echo "" .$row['Pending']."";
echo "" .$row['Active']."";
echo "";
}
echo "";
echo "";
?>
[/code]
The page the information posts to looks like this:
[code]
<?php
//connection string to db here
$column = $_POST['col_id'];
$id = $_POST['row_id'];
$updateValue = $_POST['value'];
mysql_query("UPDATE nldb_youthcontact SET ".$column."='".$updateValue."' WHERE ID=".$id);
//echo $_POST['value'].' [cDB updated]';
echo $_POST['value'].' (server updated)';
?>
[/code]
When I try to edit a record on the page I get the "Saving..." message however nothing is updated in the DB.
Any help in getting this going would be greatly appreciated.
Thanks.
This discussion has been closed.
Replies
I would check to make sure that 'this' in the editable submitdata function is the correct 'this' you intend, and that the parent node is being returned properly, and that the id for the row is being accessed correctly, etc.
Have you set an id for every cell (col_id)? You might need a more robust way of getting the column name (you can get it from the oTable.fnSettings().aoColumns object).
If you output your query in the PHP file to an output file, you can check to make sure it's well-formed.
----------------
You might also consider using the editable integration that already exists for datatables http://code.google.com/p/jquery-datatables-editable/ but if you have editable working the way you like, it's not necessary.
Thanks for responding. In an effort to make this as simple as possilbe I've tried implementing the editable integration you referenced.
My page is pretty dirt simple and according to your link, "should" be set up properly.
Here is the code:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Document
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "extras/TableTools/media/css/TableTools.css";
$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "JQuery-DataTables-Editable-1.3/UpdateData.php"
});
});
<?php
DB LINK !!!
$sql = "Select * FROM nldb_youthcontact";
$result = mysql_query($sql);
echo "
IDFirst NameLast NameAddressCityStateZipDOBGrad YearEmailPendingActive";
echo "";
while ( $row = mysql_fetch_array($result) ) {
echo "";
echo "" .$row['ID']."";
echo "" .$row['FName']."";
echo "" .$row['LName']."";
echo "" .$row['Address']."";
echo "" .$row['City']."";
echo "" .$row['State']."";
echo "" .$row['Zip']."";
echo "" .$row['DOB']."";
echo "" .$row['GradYear']."";
echo "" .$row['Email']."";
echo "" .$row['Pending']."";
echo "" .$row['Active']."";
echo "";
}
echo "";
echo "";
?>
[/code]
the update page looks like this:
[code]
DB LINK !!
$id = $_REQUEST['id'] ;
$value = $_REQUEST['value'] ;
$column = $_REQUEST['columnName'] ;
$columnPosition = $_REQUEST['columnPosition'] ;
$columnId = $_REQUEST['columnId'] ;
$rowId = $_REQUEST['rowId'] ;
mysql_query("UPDATE nldb_youthcontact SET ".$column."='".$value."' WHERE ID=".$id);
echo $value;
[/code]
As of right now everything displays nicely, but when you double click on a cell "Nothing Happens".
By this I mean that no editing window opens.
Any additional help would be greatly appreciated.