Data from Ajax, Edit in Place

Data from Ajax, Edit in Place

jwingatejwingate Posts: 3Questions: 0Answers: 0
edited April 2009 in General
The code I have currently grabs a result set and build the table dynamically. However, I cannot figure out how to get jeditable to work with the dynamically created table. I have viewed the examples, and they are all for data that is already in the table. Thanks for any information!

Replies

  • mdcookmdcook Posts: 7Questions: 0Answers: 0
    I am also having a similar problem. Within a Drupal site, I have a search form for users to query a science database. Initially the page loads with the search form above a dynamically created table containing the whole database. After a user submits a search query using the form, using the results I build a new array for the table, but I can not figure out how to update/edit the table.

    Thanks for any help. If I figure this out, I will post what I did.
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Hi guys,

    The issue is that the DOM is created after the table has been created, therefore you need to add the events after that event. These links might be useful for you:

    http://datatables.net/examples/example_events_pre_init.html
    http://datatables.net/examples/example_events_post_init.html
    http://datatables.net/forums/comments.php?DiscussionID=159
    http://sprymedia.co.uk/article/Visual+Event - lets you see what elements have events applied to them.

    Regards,
    Allan
  • jwingatejwingate Posts: 3Questions: 0Answers: 0
    edited May 2009
    Here is the code I ended up going with which works great, even with pagination. My table has about 1500 rows, and this worked perfectly. (The part to pay attention to is in the row callback...."fnRowCallback"

    [code]
    oTable = $('#displayData').dataTable(
    {
    "sDom" : '<"top"flip>rt<"bottom"<"clear">',
    "bAutoWidth" : false,
    "bProcessing" : true,
    "fnRowCallback" : function (nRow, aData, iDisplayIndex) {
    $(nRow).attr('id', 'row_' + aData[0]);

    for (i = 0; i < aData.length; i ++) {
    $('td:eq(' + i + ')', nRow).editable('/async/edit/', {
    'callback': function (sValue, y) {
    var aPos = oTable.fnGetPosition(this);
    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
    },
    'height': '14px'
    });
    }

    return nRow;
    },
    "sAjaxSource" :
    '<?= $this->baseUrl(); ?>/async/fetchall/type/' + type + '/db/' + db
    }
    );
    [/code]

    * Edited by Allan to add code highlighting.
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Awesome stuff - thanks for sharing this jwingate!!
  • jwingatejwingate Posts: 3Questions: 0Answers: 0
    Well thank you for dataTables....its amazing!
This discussion has been closed.