Replies

• paulrod Posts: 6Questions: 0Answers: 0

  November 2010

  sent a payment for your help. notes attached to payment, with further questions regarding your time. Thank you!
• allan Posts: 63,400Questions: 1Answers: 10,452 Site admin

  November 2010

  Hi paulrod,
  
  Thanks for the donation :-). fnOpen returns the TR element that it creates - so what you could do (assuming I've understood correctly) is something like this:
  
  [code]
  var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  
  $.ajax( {
  "dataType": 'json',
  "type": "POST",
  "url": sSource,
  "data": aoData,
  "success": function ( json ) {
  $('td', newRow).html( json.htmlParameter );
  }
  } );
  [/code]
  You could write "loading" into the cell for while the Ajax is going on as well to make it clear what is happening :-)
  
  Regards,
  Allan
• paulrod Posts: 6Questions: 0Answers: 0

  November 2010

  Allan,
  Thank you I will try this. So I am changing your example code to open the table from;
  
  /* Open this row */
  this.src = "_img/details_close.png";
  oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  
  to
  
  this.src = "_img/details_close.png";
  var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  
  and in the fnFormatDetails function i am inserting the ajax call?
  
  Thanks
  Paul
• paulrod Posts: 6Questions: 0Answers: 0

  November 2010

  if this goes in the fnFormatDetails function how do I get the results into sOut to be returned?
• paulrod Posts: 6Questions: 0Answers: 0

  November 2010

  just to clarify;
  
  I now have the following;
  
  [code]
  $('#example tbody td img').live('click', function ()
  {
  var nTr = this.parentNode.parentNode;
  if ( this.src.match('details_close') )
  {
  /* This row is already open - close it */
  this.src = "_img/details_open.png";
  oTable.fnClose( nTr );
  
  } else{
  /* Open this row */
  this.src = "_img/details_close.png";
  //oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  
  }
  } );
  [/code]
  
  so where in here is the ajax call?
  
  [code]
  function fnFormatDetails ( oTable, nTr )
  {
  var aData = oTable.fnGetData( nTr );
  var sOut = '';
  sOut += 'Rendering engine:'+aData[1]+' '+aData[11]+'';
  sOut += 'Link to source:Could provide a link here';
  sOut += 'Extra info:And any further details here (images etc)';
  sOut += '';
  sOut += '';
  return sOut;
  }
  [/code]
  
  the php will grab from the ajax post the value in aData[1] and pull up a series of records. I need to return those records back. I suppose the records returned from the php script will have to be json formated (var:val) ? If thats the case then this function will need to parse out and create the table rows for each record. not sure how.
  
  thanks again!
• paulrod Posts: 6Questions: 0Answers: 0

  November 2010 edited November 2010

  sorry to keep posting, but i think i figured it out. i now have;
  
  [code]
  this.src = "_img/details_close.png";
  //oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
  sID = fnFormatDetails(oTable, nTr)
  
  var newRow = oTable.fnOpen( nTr,
  $.ajax( {
  dataType: 'json',
  type: "POST",
  url: "processor.php",
  data: "custid="+sID,
  success: function ( json ) {
  var tableHead = '';
  $('td', newRow).html('Company IDempl_fnameempl_lnameempl_titleempl_phoneempl_faxempl_cell'+ json.postsuccess.................+'' );}} ), 'details' );
  
  }
  } );
  [/code]
  
  [code]function fnFormatDetails ( oTable, nTr )
  {
  var aData = oTable.fnGetData( nTr );
  return aData[1];
  }
  [/code]
• allan Posts: 63,400Questions: 1Answers: 10,452 Site admin

  November 2010

  Yup that looks like to should work okay (although I don't know what $.ajax() returns... whatever it is, DataTables will be writing it into the cell...). I think I personally would have done something a little bit more like this:
  
  [code]
  var newRow = oTable.fnOpen( nTr, "Loading data..." );
  $.ajax( {
  dataType: 'json',
  type: "POST",
  url: "processor.php",
  data: "custid="+sID,
  success: function ( json ) {
  ... process for html
  $('td', newRow).html( newHTML );
  }
  } );
  [/code]
  As it allows a 'loading' indicator to be put into the cell while the XHR is off getting the new data :-)
  
  Regards,
  Allan