fnOpenClose > fnFormatDetails load() external content into div

fnOpenClose > fnFormatDetails load() external content into div

achlanachlan Posts: 20Questions: 0Answers: 0
edited April 2010 in General
Hi,

I´m having a datatable with detaildata that is shown via fnOpenClose.
I need a possibility to load external content as detaildata just on click demand from the database with an ajax function like load().
I tried with creating an div and loading into, but this is not working:
function fnFormatDetails (nTr) { var iIndex=oTable.fnGetPosition( nTr ); var aData=oTable.fnSettings().aoData[iIndex]._aData; var sOut = '<div id="detail'+aData[1]+'"><img src="/img/indicator.gif" title="Loading data"></div>'; $("#detail"+aData[1]).load("/detail.php?id="+aData[1]); return sOut; } /* Event handler function */ function fnOpenClose (oSettings) { $("td img.openclose", oTable.fnGetNodes()).each(function () { $(this).click(function () { var nTr=this.parentNode.parentNode; if(this.src.match('details_close')) { /* This row is already open - close it */ this.src="/img/tables/details_open.png"; this.title="details"; /* fnClose doesn't do anything for server-side processing - do it ourselves :-) */ var nRemove=$(nTr).next()[0]; nRemove.parentNode.removeChild(nRemove); } else if(this.src.match('details_open')) { /* Open this row */ this.src="/img/tables/details_close.png"; this.title="close details"; oTable.fnOpen(nTr,fnFormatDetails(nTr),'.'); } }); }); I tried to find info about this in the forum and I thought I read about sometime in the past. But I couldn´t find actually...
Is there any chance to load() external detail info with fnOpenClose?

Regards
achlan

Replies

  • pakypaky Posts: 106Questions: 0Answers: 0
    ....I try for a week a solution to this problem! but it seems that there is no way out ....

    :(
  • pakypaky Posts: 106Questions: 0Answers: 0
    edited April 2010
    I may have found a way ...

    function fnFormatDetails ( nTr ) { var aData = Table_list_project.fnGetData( nTr ); var id_progetto=aData[1]; // table -> first column value $.ajax({ type:"POST", url: 'includes/__ajax_gear/_get_details_progetti.php', cache: false, data:'id_proj='+id_progetto, success: function(msg) { Table_list_project.fnOpen( nTr, msg, 'details' ); } }); return ''; }
    then OpenClose ....

    /* Event handler function */ function fnOpenClose ( oSettings ) { $('td img', Table_list_project.fnGetNodes() ).each( function () { $(this).click( function () { var nTr = this.parentNode.parentNode; if ( this.src.match('details_open') ) { // This row is already open - close it this.src = "images/icons/details_close.png"; // fnClose doesn't do anything for server-side processing - do it ourselves :-) var nRemove = $(nTr).next()[0]; nRemove.parentNode.removeChild( nRemove ); } else { // Open this row this.src = "images/icons/details_open.png"; Table_list_project.fnOpen( nTr, fnFormatDetails(nTr), 'details' ); } } ); } ); }
    ... in dataTable settings

    . . . , "fnDrawCallback": fnOpenClose, . . .
    ... remains a small problem :( during the closing table hangs a few pixels high that contains the function return value fnFormatDetails !

    paky
  • achlanachlan Posts: 20Questions: 0Answers: 0
    Hi paky,

    great. it just works!
    I use it like this:
    function fnFormatDetails ( nTr ) { var iIndex = oTable.fnGetPosition( nTr ); var aData = oTable.fnSettings().aoData[iIndex]._aData; $.ajax({ type: "POST", url: "detail.php", cache: false, data:'w='+aData[1], success: function(msg) { oTable.fnOpen( nTr, msg, 'details' ); } }); return ""; } I´m having no problems/bugs with this
    thanks for your code!

    Regards,
    achlan.
  • pakypaky Posts: 106Questions: 0Answers: 0
    Great :) my bugs/problems is a empty table after the closing !!! Maybe css solution ?!

    achlan your table (of details) is grey border-color ?

    Hi and thanks for suggestion to psjandhyala ;)
  • achlanachlan Posts: 20Questions: 0Answers: 0
    edited April 2010
    do you mean a table inside the ajax loaded detail.php?
    I don´t have a table in there. I´ll build an jqueryui accordeon to load different separate new data in this area on click.
    I´m having absolutely no problems by closing the detail view. maybe you should try it for testing with a blank detail php page without css?
  • pakypaky Posts: 106Questions: 0Answers: 0
    edited April 2010
    mmm.... my problem is on return of fnFormatDetails().

    Now return blank value...

    If I set :
    function fnFormatDetails ( nTr ) { var iIndex = oTable.fnGetPosition( nTr ); var aData = oTable.fnSettings().aoData[iIndex]._aData; $.ajax({ type: "POST", url: "detail.php", cache: false, data:'w='+aData[1], success: function(msg) { oTable.fnOpen( nTr, msg, 'details' ); } }); return 'hello world'; }

    after close details remains open table a second <table> with 'Hello world' inside !
    The first <table> works fine !!!!
  • achlanachlan Posts: 20Questions: 0Answers: 0
    edited April 2010
    I just have some other nice effects...
    when I open a detail view, the navigation paging shows only the same page number by clicking to another page. I can navigate to the next page, but the "active" number is still the same.
    And when I jump to the first page, some random detail views are opened automatically. really strange...
  • achlanachlan Posts: 20Questions: 0Answers: 0
    edited April 2010
    Firefox error console says:
    Error: jQuery.fn.dataTableExt is undefined
    in: ......./jquery/jquery.dataTables.js
    row: 482

    Something disturbes parts of the main functionality of datatables...

    This Message is thrown by clicking the navigation
This discussion has been closed.