Hi !
I want to use Datable like the http://datatables.net/examples/api/select_single_row.html sample, but instead of delete the row, I want to make a POST on another php page.
Thank you very much for your quick answer gutzofter.
I'll study and test your code, but i don't really want to act with a doubleclic on the raw.
In this sample, the thing i like is to use a simple html link outside the table.
Here we get the raw and delete it :
[code]
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( oTable );
oTable.fnDeleteRow( anSelected[0] );
} );
[/code]
(the full code is here : http://datatables.net/examples/api/select_single_row.html)
In place of the delete code "oTable.fnDeleteRow( anSelected[0] );"
i'll like to "POST" the content of the row to another php page.
So change dblclick to single click or hover or any other event, but hey how about this:
[code]
/* Add a click handler for the post row */
$('#posting_row').click(function() {
var anSelected = fnGetSelected(oTable);
$.ajax({
type: 'POST',
url: '/posting_row.php',
data: anSelected[0],
async: false,
success: function(response) {
//wicked it worked
}
});
});
Thanks gutzofter, but infortunately it doesn't work.
I use this link :
[code]
Post selected row
[/code]
Here is my code :
[code]
var oTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the post row */
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
$.ajax({
type: 'POST',
url: '/posting_row.php',
data: anSelected[0],
async: false,
success: function(response) {
//wicked it worked
}
});
} )
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
put your alert after the comments 'wicked it works'. this will tell you if the Ajax request was successful.
If you use Firebug (add-on for firefox browser) you will be able to see the xhr request go to the server. you also will be able to see the parameters sent to the server. Usually when you don't get anything back from the server it would be because you don't have the correct path to the page you're sending to.
posting_row.php
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
somehow your server is sending the processed php file to the client. The only data that should be sent back is "success".
Got it! Ding! Ding!
Scenario:
Your on the data tables page.
You click on row
You get directed to posting_row.php
The data that you selected is displayed.
Correct?
If so. Sorry I led you up the wrong tree. you need to create a link and append the data. DON'T use Ajax request. in a bit I will show you how to append the data to a link.
Scenario:
1)I'm on the data tables page.
2)I click on row
3)I click on the Post selected row
4)I get directed to posting_row.php
5)The data that i selected is displayed
I'm stopped on the 4) point.
Here is the state of the code :
[code]
var oTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the post row */
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
var aData = oTable.fnGetData(iRow);
var x = aData[1];
$.ajax({
type: 'POST',
url: './posting_row.php',
/*data: anSelected[0],*/
data: x,
async: false,
success: function(response) {
//wicked it worked
alert('you have: ' + response + ' in posting data to posting_row.php');
}
});
/*alert(x);*/
} );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
I though you were posting data to the server. I did not realize that you were directing to a new page. Sorry!
[code]
posting data
[/code]
[code]
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var serialized = $.param(anSelected);
var link = $('#post').attr('href');
$('#post').attr('href', link + '?' + serialized);
} )
[/code]
This code should serialize the anSelected value then appends it to the href attribute of your link. NOTE: not actually tested with real anSelected data.
In the posting_row.php I try to get like this :
[code]
<?php
print_r($GLOBALS['HTTP_RAW_POST_DATA']);
echo $GLOBALS['HTTP_RAW_POST_DATA'];
echo $_GET['ID'];
echo 'success';
?>
[/code]
in the nav bar i ca see : http://posting_row.php?undefined=undefined
Is it a problem of method or no data ?
For the moment I get directed to posting_row.php but only "success" is echo.
I find a parade doing this :
[code]
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
var aData = oTable.fnGetData(iRow);
var x = aData[1];
/*var serialized = $.param(anSelected);*/
var serialized = 'ID=' + x;
var link = $('#post').attr('href');
$('#post').attr('href', link + '?' + serialized);
} );
[/code]
And it works !!
the code for fnGetSelected :
[code]
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
So it is the serialization of the data, that is the problem now.
Try this for serialization:
[code]
var serialized = $.param(anSelected[0]);
[/code]
This is somewhat what you are looking for:
[code]
"kit_number=THX-1138&kit_description=A+Doohickey+used+on+Jaberwockies"
[/code]
Above not tested.
I will be able to devote more time to helping more later this afternoon California time. I have a deadline right now.
Replies
http://datatables.net/forums/comments.php?DiscussionID=1838
When you double-click it will send out a request to the server to bring up an editor for the row item.
I'll study and test your code, but i don't really want to act with a doubleclic on the raw.
In this sample, the thing i like is to use a simple html link outside the table.
Here we get the raw and delete it :
[code]
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( oTable );
oTable.fnDeleteRow( anSelected[0] );
} );
[/code]
(the full code is here : http://datatables.net/examples/api/select_single_row.html)
In place of the delete code "oTable.fnDeleteRow( anSelected[0] );"
i'll like to "POST" the content of the row to another php page.
[code]
/* Add a click handler for the post row */
$('#posting_row').click(function() {
var anSelected = fnGetSelected(oTable);
$.ajax({
type: 'POST',
url: '/posting_row.php',
data: anSelected[0],
async: false,
success: function(response) {
//wicked it worked
}
});
});
[/code]
I use this link :
[code]
Post selected row
[/code]
Here is my code :
[code]
var oTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the post row */
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
$.ajax({
type: 'POST',
url: '/posting_row.php',
data: anSelected[0],
async: false,
success: function(response) {
//wicked it worked
}
});
} )
$('tr').click( function (event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
} );
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"aaSorting": [[ 3, "asc" ]]
});
} );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
I change :
[code]data: anSelected[0][/code]
with :
[code]data: 'test'[/code]
the alert box pop up, but nothing append with the posting_row.php, i hoped the page to open..
Maybe the probleme is with my posting_row.php file ?
Here it is :
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
InfoDyne Clients
@import "dataTables-1.7/media/css/demo_page.css";
Clients InfoDyne
<?php print_r($GLOBALS['HTTP_RAW_POST_DATA']); ?>
[/code]
If you use Firebug (add-on for firefox browser) you will be able to see the xhr request go to the server. you also will be able to see the parameters sent to the server. Usually when you don't get anything back from the server it would be because you don't have the correct path to the page you're sending to.
posting_row.php
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
InfoDyne Clients
@import "dataTables-1.7/media/css/demo_page.css";
Clients InfoDyne
<?php
print_r($GLOBALS['HTTP_RAW_POST_DATA']);
echo 'success';
?>
[/code]
[code]
$.ajax({
type: 'POST',
url: '/posting_row.php',
data: anSelected[0],
async: false,
success: function(response) {
//wicked it worked
alert('you have: ' + response + ' in posting data to posting_row.php'');
}
});
[/code]
The alert() dispaly this :
[code]
you have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
InfoDyne Clients
@import "dataTables-1.7/media/css/demo_page.css";
Clients InfoDyne
success
in posting data to posting_row.php
[/code]
I imagine the POST is made, but i was expected the openning of posting_raw.php but it doesn't apend, I don't understand why?
Got it! Ding! Ding!
Scenario:
Your on the data tables page.
You click on row
You get directed to posting_row.php
The data that you selected is displayed.
Correct?
If so. Sorry I led you up the wrong tree. you need to create a link and append the data. DON'T use Ajax request. in a bit I will show you how to append the data to a link.
1)I'm on the data tables page.
2)I click on row
3)I click on the Post selected row
4)I get directed to posting_row.php
5)The data that i selected is displayed
I'm stopped on the 4) point.
Here is the state of the code :
[code]
var oTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the post row */
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
var aData = oTable.fnGetData(iRow);
var x = aData[1];
$.ajax({
type: 'POST',
url: './posting_row.php',
/*data: anSelected[0],*/
data: x,
async: false,
success: function(response) {
//wicked it worked
alert('you have: ' + response + ' in posting data to posting_row.php');
}
});
/*alert(x);*/
} );
$('tr').click( function (event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
} );
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"aaSorting": [[ 3, "asc" ]]
});
} );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
[code]
posting data
[/code]
[code]
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var serialized = $.param(anSelected);
var link = $('#post').attr('href');
$('#post').attr('href', link + '?' + serialized);
} )
[/code]
This code should serialize the anSelected value then appends it to the href attribute of your link. NOTE: not actually tested with real anSelected data.
But...I belive we don"t get any data.
In the posting_row.php I try to get like this :
[code]
<?php
print_r($GLOBALS['HTTP_RAW_POST_DATA']);
echo $GLOBALS['HTTP_RAW_POST_DATA'];
echo $_GET['ID'];
echo 'success';
?>
[/code]
in the nav bar i ca see : http://posting_row.php?undefined=undefined
Is it a problem of method or no data ?
For the moment I get directed to posting_row.php but only "success" is echo.
[code]
$results = $_GET;
foreach ($results as $result) {
echo $result."
";
}
[/code]
[code]
$('#post').click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
var aData = oTable.fnGetData(iRow);
var x = aData[1];
/*var serialized = $.param(anSelected);*/
var serialized = 'ID=' + x;
var link = $('#post').attr('href');
$('#post').attr('href', link + '?' + serialized);
} );
[/code]
And it works !!
[code]
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
Try this for serialization:
[code]
var serialized = $.param(anSelected[0]);
[/code]
This is somewhat what you are looking for:
[code]
"kit_number=THX-1138&kit_description=A+Doohickey+used+on+Jaberwockies"
[/code]
Above not tested.
I will be able to devote more time to helping more later this afternoon California time. I have a deadline right now.
(like : file.php?x=bla&y=bli&z=....)
http://datatables.net/forums/comments.php?DiscussionID=2361&page=1#Item_4
Good luck!
Thread resolved and closed.