• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1760
  • Last Modified:

Ajax: Adding new rows to table.

I'm trying to figure out how to insert new rows into a table after making an Ajax call.  I want to insert the new rows right before the row I click on.  I have a cfc that I'm calling with Ajax and it's passing back the data already formatted into table rows.  Not sure of the best way of doing this.  Below is some of the code that I'm using.  Also, please let me know if I should do some of this a different way.


P.S. I'm using the ajax engine from lalabird.com

Thanks,
Tim
<!---  The method I'm calling --->
<cffunction name="dailyTotals" access="remote"  returntype="void" output="true">
	<cfargument name="department" type="string" required="yes" />
 
	<cfstoredproc procedure="sp_OMR_qry_DailyHours" datasource="#session.database#" username="#session.DBID#" password="#session.DBPass#" >
		<cfprocparam type="in" cfsqltype="cf_sql_varchar" dbvarname="department" value="#arguments.department#" null="no" />
		<cfprocresult name="qry_dailyhours" resultset="1" />
	</cfstoredproc>
	
	
	<cfsavecontent variable="content">
		<cfoutput query="qry_dailyhours">
		<cfset sumHours = 0>
 
		<tr >
			<cfset rowClass = "reportDataRow#Int(qry_dailyhours.CurrentRow MOD 2)#">
			<td class="#rowClass#"></td>
			<td class="#rowClass#">#DateFormat(qry_dailyhours.recordDate, "MM/DD/YYYY")#</td>
			<!--- <td>#qry_dailyhours.TimecardWeek#</td> --->
			<!--- <td>#qry_hours.SupDepartment#</td> --->
			<td class="#rowClass#"><cfif #qry_dailyhours.Direct# EQ "">0<cfelse>#Round(qry_dailyhours.Direct)# <cfset sumHours = sumHours + qry_dailyhours.Direct></cfif></td>
			<td class="#rowClass#"><cfif #qry_dailyhours.indirect# EQ "">0<cfelse>#Round(qry_dailyhours.Indirect)# <cfset sumHours = sumHours + qry_dailyhours.Indirect></cfif></td>
			<td class="#rowClass#"><cfif #qry_dailyhours.Nonop# EQ "">0<cfelse>#Round(qry_dailyhours.NonOp)# <cfset sumHours = sumHours + qry_dailyhours.Nonop></cfif></td>
			<td class="#rowClass#">#Round(sumHours)#</td>
			<td class="#rowClass#">#Round(qry_dailyhours.OT)#</td>
			<td class="#rowClass#"><cfif sumHours NEQ '0'>#DecimalFormat((qry_dailyhours.OT/sumHours)*100)#%</cfif></td>
		</tr>
	
		</cfoutput>
	</cfsavecontent>
	
	<cfwddx action="CFML2JS" input="#content#" toplevelvariable="r">
</cffunction>
 
<!--- How I'm calling the method --->
	function get_week(department,weekend){ 
		param = 'department='+ department + '&weekend=' + weekend;
    	http( 'POST'  , 'components/ajax.cfc?method=dailyTotals' , add_rows, param); 
    }
 
What is the best way to write the add_rows function?

Open in new window

0
tim_cs
Asked:
tim_cs
2 Solutions
 
HonorGodCommented:
Hopefully this helps
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Before and After </title>
<script type='text/javascript'>
  function $( id ) {
    return document.getElementById( id );  
  }
  
  function hilite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass ) {
        klass += ' hilite';
      } else {
        klass = 'hilite';
      }
      tds[ i ].setAttribute( 'class', klass );
      tds[ i ].className = klass;
    }
  }
 
  function lolite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass && ( klass.search( /\bhilite\b/ ) > -1 ) ) {
        klass = klass.replace( /\bhilite\b/, '' );
        tds[ i ].setAttribute( 'class', klass );
        tds[ i ].className = klass;
      }
    }
  }
 
  function After( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    var row = here.cloneNode( true );
    here.parentNode.insertBefore( row, here.nextSibling);
    lolite( here.parentNode );
    hilite( row );
  }
 
  function Before( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    var row = here.cloneNode( true );
    here.parentNode.insertBefore( row, here );
    lolite( here.parentNode );
    hilite( row );
  }
</script>
<style type='text/css'>
  .hilite { background-color : yellow; }
</style>
</head>
<body>
 
<table border='1'>
 
  <tr>
    <td>uno</td>
    <td>dos</td>
    <td>tres</td>
    <td>quatro</td>
    <td>...</td>
    <td><input type='button' value='After'  onclick='After(this)' />
    <td><input type='button' value='Before' onclick='Before(this)' />
    </td>
  </tr>
 
  <tr>
    <td>Now</td>
    <td>is</td>
    <td>the</td>
    <td>time</td>
    <td>...</td>
    <td><input type='button' value='After'  onclick='After(this)' />
    <td><input type='button' value='Before' onclick='Before(this)' />
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
stanscott2Commented:
The best way to do this is probably using something like this:

function addToTable(tblName) {
     var tbl = document.getElementById(tblName);     // set reference to table
     var tblBody = tbl.getElementsByTagName("tbody")[0];     // set reference to tbody.  All rows are added to this
     for (t=0;  t<xxx; t++) {   // pseudocode -- replace xxx with a counter for the number of new rows
          var newRow = document.createElement("TR");  // create a new row
          newRow.innerHTML = something;    // replace something with the entire new row
          tblBody.appendChild(newRow);       // appends new row at end
      }
}

I've used the innerHTML property because the information is coming down as HTML.  My preference is to return the data as XML and then parse it into individual cells.  In that situation, you can keep adding new TD elements, and appending text nodes to them containing the information coming back.  One big advantage here is that you don't need to return redundant data, such as the rowClass style.  Just add the style in the loop, above.




}
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now