Add "Row Details" column after table insert

greenspacechunks

Hey all,

I'm new to DataTables, but I think I've been doing okay with it so far. Now this problem is bit outside of what I know. I searched the forums but couldn't find anything exactly like this.

I followed the row details page to create this page.

Here is the page:

http://sf.amy-tyler.com/?page_id=73

To reproduce:

Click Add and fill out data to add a new row.

I haven't really added a handler to add the Details column to a new row because I'm not sure how. The data does get inserted on my database fine as you can see after a page refresh.

Here is my code that is applicable to my issue... Sorry for all the lines of code; I imagine there is some hard coded HTML I could add to the add_review.php to return for render? Thanks in advance!

Javascript
[code]


//once document is ready
jQuery(document).ready(function ($)
{

TableHtml = $("#editable_reviews").html();


//Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#editable_reviews thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#editable_reviews tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

//Initialse DataTables
var oTable = $('#editable_reviews').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{
"bVisible": false,
"aTargets": [1]
},
{
"bVisible": false,
"aTargets": [3]
},
{ "sName": "first_name", "aTargets": [ 5 ] },
{ "sName": "last_name", "aTargets": [ 6 ] },
{ "sName": "gender", "aTargets": [ 7 ] },
{ "sName": "title", "aTargets": [ 8 ] },
{ "sName": "review_text", "aTargets": [ 9 ] }
]
}).makeEditable(
{
sUpdateURL: "/wp-content/themes/childtheme/update_review.php",
sAddURL: "/wp-content/themes/childtheme/add_review.php",
sAddNewRowFormId: "formAddNewReview",
sAddNewRowButtonId: "btnAddNewReview"
});



/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#editable_reviews tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "http://i.imgur.com/d4ICC.png";
findReviewPostings(nTr.id);
oTable.fnOpen(nTr, innerHTML, 'details');
oInnerTable = $("#editable_reviews_" + nTr.id).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
iTableCounter = iTableCounter + 1;
}
});
});
[/code]

This is the insert PHP to add to the database. Like I said, this works fine. Can I hard code the img src here to return back to datatables? One thing I worry about is that the action for expanding the details won't work after insert...
[code]
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path = $path . '/sf';

include_once $path . '/wp-config.php';
include_once $path . '/wp-load.php';
include_once $path . '/wp-includes/wp-db.php';
include_once $path . '/wp-includes/pluggable.php';
global $wpdb;

$client_name= $_POST['clientDDname'];
$client_id= $_POST['clientDD'];
$location_name= $_POST['locationDDname'];
$location_id= $_POST['locationDD'];
$fname= $_POST['first_name'];
$lname= $_POST['last_name'];
$gender= $_POST['gender'];
$review_title= $_POST['review_title'];
$review_text= $_POST['review_text'];
if($wpdb->insert("REVIEWS",array("CUSTOMER_ID"=>$client_id,"LOCATION_ID"=>$location_id,"FIRST_NAME"=>$fname,"LAST_NAME"=>$lname,"GENDER"=>$gender,"TITLE"=>$review_title,"REVIEW_TEXT"=>$review_text,"CREATE_DATE"=>current_time('mysql', 1)))===FALSE)
{
exit( var_dump( $wpdb->last_query ) );
}
else
{
echo $wpdb->insert_id;
}

?>

[/code]

greenspacechunks

I've noticed quite a few support posts without replies - if I can provide any more code or clarification just let me know. I've been banging my head on this one for awhile! Thanks again! Love me some DataTables.

greenspacechunks

So I actually found this code:

[code]
/* Test if detail column exists, otherwise, create it */
"fnDrawCallback": function () {
/* Recreate detail column for each redraw */
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});
[/code]

from http://goo.gl/KgAAc

He uses that in an AJAX post... I'm using Editable's sAddUrl:

[code]
makeEditable(
{
sUpdateURL: "/wp-content/themes/childtheme/update_review.php",
sAddURL: "/wp-content/themes/childtheme/add_review.php",
sAddNewRowFormId: "formAddNewReview",
sAddNewRowButtonId: "btnAddNewReview"
}
[/code]

Is there some way I can adopt that?

greenspacechunks

So I figured out how to implement the code above that I found... It inserts fine unless there is a row with the details expanded. I found another post that mentioned clarifying what rows we want to add the column to, but it doesn't seem to be working quite right for me.

[code]
/* Test if detail column exists, otherwise, create it */
"fnDrawCallback": function () {
/* Recreate detail column for each redraw */
$('#editable_reviews>thead>tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});
$('#editable_reviews>tbody>tr').each( function () {

if (this.childNodes[0].innerHTML != (nCloneTd.innerHTML)){
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
}
});
[/code]

Source: http://goo.gl/KgAAc

greenspacechunks

Oops, wrong source... http://goo.gl/7QkXJ

greenspacechunks

Appears I got it working! Guess it helps to talk to myself. Here's my non-elegant code... It works though!

[code]

TableHtml = $("#editable_reviews").html();


//Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
openedIconSRC="http://i.imgur.com/d4ICC.png";
nCloneTd.className = "center";
nCloneTd.id = "details";

//Initialse DataTables, with no sorting on the 'details' column
var oTable = $('#editable_reviews').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{
"bVisible": false,
"aTargets": [0]
},
{
"bVisible": false,
"aTargets": [2]
},
{ "sName": "first_name", "aTargets": [ 4 ] },
{ "sName": "last_name", "aTargets": [ 5 ] },
{ "sName": "gender", "aTargets": [ 6 ] },
{ "sName": "title", "aTargets": [ 7 ] },
{ "sName": "review_text", "aTargets": [ 8 ] }
],
/* Test if detail column exists, otherwise, create it */
"fnDrawCallback": function () {
/* Recreate detail column for each redraw */
$('#editable_reviews>thead>tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});
$('#editable_reviews>tbody>tr').each( function () {
if ((this.innerHTML.indexOf(nCloneTd.innerHTML) == -1) && (this.innerHTML.indexOf(openedIconSRC) == -1) && (this.innerHTML.indexOf("details") == -1))
{
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
}
});
[/code]