[solved] Select Single Row and POST

[solved] Select Single Row and POST

ZahionZahion Posts: 12Questions: 0Answers: 0
edited July 2010 in General
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.

Someone could help me please ?

Replies

  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    You might want to check this out.
    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.
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    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.
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    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
    }
    });
    });

    [/code]
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    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
    }
    });
    } )


    $('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
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    I put an alert('ok') after the $.ajax(...), it doesn't work...

    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]
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    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">





    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]
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    I had a path pb, now it's resolved, but the navigator don't change the page...

    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?
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    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.
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    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);*/
    } );

    $('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
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    edited July 2010
    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.
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    Hi, gutzofter, we are near the solution !

    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.
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    I made a loop on $_GET, it contain only "undefined"
    [code]
    $results = $_GET;
    foreach ($results as $result) {
    echo $result."
    ";
    }
    [/code]
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    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 !!
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    Could you list your code for fnGetSelected and fnGetPosition?
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    the code for fnGetSelected :
    [code]
    /* Get the rows which are currently selected */
    function fnGetSelected( oTableLocal )
    {
    var aReturn = new Array();
    var aTrs = oTableLocal.fnGetNodes();

    for ( var i=0 ; i
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    edited July 2010
    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.
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    You have to somehow get the field names also
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    Thanks for your attention gutzofter the serialization don't pass any parameters at all.
    (like : file.php?x=bla&y=bli&z=....)
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    @Zahion - See this post:

    http://datatables.net/forums/comments.php?DiscussionID=2361&page=1#Item_4

    Good luck!
  • ZahionZahion Posts: 12Questions: 0Answers: 0
    edited July 2010
    That's perfect ! Thanks for your time and patience gutzofter ;)

    Thread resolved and closed.
  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    No Problem!
This discussion has been closed.