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:
[code]
function fnFormatDetails (nTr) {
var iIndex=oTable.fnGetPosition( nTr );
var aData=oTable.fnSettings().aoData[iIndex]._aData;
var sOut = '';
$("#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),'.');
}
});
});
[/code]
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 ...

    [code]
    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 '';
    }
    [/code]

    then OpenClose ....

    [code]
    /* 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' );
    }
    } );
    } );
    }
    [/code]

    ... in dataTable settings

    [code]
    .
    .
    .
    ,
    "fnDrawCallback": fnOpenClose,
    .
    .
    .
    [/code]

    ... 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:
    [code]
    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 "";
    }
    [/code]
    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 :
    [code]
    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';
    }
    [/code]

    after close details remains open table a second with 'Hello world' inside !
    The first 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.