Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11781
  • Last Modified:

Adding Dynamic rows and getting values in struts 2 action class

Hi All...

I am facing a problem...I am trying to add the dynamic rows to a table...but i am not able to succeed that..pls i need ur help in this..
 Description:
There is a Expense Table..with Expense Head and Years.like
Budget  2009  2010. user will enter expense Head name and subtypes of that expense head if required..in div id=est_budget section....suppose if he enters expence Head name:Furniture and
added two subtypes -->cost and expenses..these has to added to the main table with
under budget--> furniture ,under year 2009-->one textbox and under 2010 one textbox..follwed by subtype...and the same after that total of the expense head...pls help me in this...

and how to get the these expense head values in struts 2 action class....

pls find my code below..and the image that describes about my problem....

pls it is very urgent..thanks in advance experts...



<%@ include file="/inventx/jsp/common/init.jsp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>middle</title>
<link href="/inventx/css/invnetx.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 6px;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js"></script>
 
<SCRIPT language="javascript">  
        function addRow(tableID) {   
  
            var table = document.getElementById(tableID);   
            var rowCount = table.rows.length;   
            var row = table.insertRow(rowCount);   
  
            var cell1 = row.insertCell(0);   
            var element1 = document.createElement("input");   
            element1.type = "checkbox";   
            cell1.appendChild(element1);   
  
            var cell2 = row.insertCell(1);   
            cell2.innerHTML = '<span class="contenttext"><b>SubType:</b></span>' ;
  
            var cell3 = row.insertCell(2);   
            var element2 = document.createElement("input");   
            element2.type = "text";   
            cell3.appendChild(element2);   
  
        }   
  
        function deleteRow(tableID) {   
            try {   
            var table = document.getElementById(tableID);   
            var rowCount = table.rows.length;   
  
            for(var i=0; i<rowCount; i++) {   
                var row = table.rows[i];   
                var chkbox = row.cells[0].childNodes[0];   
                if(null != chkbox && true == chkbox.checked) {   
                    table.deleteRow(i);   
                    rowCount--;   
                    i--;   
                }   
  
            }   
            }catch(e) {   
                alert(e);   
            }   
        }  
		
		function checkThis(){
 
			alert("Hi");
			var expensename=document.getElementById("expenseName").value;
			alert(expensename);
 
		}
  
    </SCRIPT> 
<script type="text/javascript">
animatedcollapse.addDiv('est_budget', 'fade=1,height=50px')
animatedcollapse.ontoggle=function($, divobj, state){
}
animatedcollapse.init()
 
</script>
<link href="invnetx.css" rel="stylesheet" type="text/css" />
</head>
<body class="headertext">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/1pic.gif" width="1" height="10" /></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" class="headertext2">Budget</td>
  </tr>
</table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="singleline"><img src="images/1pic.gif" width="1" height="1" /></td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="buttonsbg">
        <tr>
          <td height="30" valign="middle" class="buttonsbg2">
		</td>
        </tr>
 </table>
<div id="est_budget" style="width:100% height:20px; display:none">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
  
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />  
 
	<INPUT type="button" value="Check Me" onclick="checkThis()" />  
  
    <table id="dataTable" width="350px" border="0">  
        <tr>  
            <td>&nbsp;</td>  
            <td><span class="contenttext"><b>Expense Head Name:</b></span></td>  
            <td> <input type="text" id="expenseName" /> </td>  
        </TR>  
    </TABLE>  
</div>
<table id="inv_table" width="100%" class="contentgrid" style="padding:3px">
<tr><td>
<table width="400px" class="header_table_inner" id="inv_table" border="0">
<tr>
<td width="15px" align="left" class="formtd"><span class="contenttext"><b>Budget</b></span><br /></td>
<td width="15px" align="left" class="formtd"><span class="contenttext"><b>2009</b></span><br /></td>
<td width="15px" align="left" class="formtd"><span class="contenttext"><b>2010</b></span><br /></td>
<td width="50px" align="left" class="formtd"><span class="contenttext"><input name="Submit" type="submit" class="formbutton" onclick="javascript:animatedcollapse.toggle('est_budget')" value="New" /></span><br /></td>		
</tr>
</table> 
<table id="inv_table" class="header_table_inner" width="100%">
<tr>
<td id="newExpenseHead" height="30px" width="45px">
<table border="0">
<tr>
<td width="15px" align="left" class="formtd"><span class="contenttext"><b>Cost</b></span><br /></td>
<td width="15px">&nbsp;</td>
<td width="15px">&nbsp;</td>
</tr>
<tr>
<td width="40px" align="left" class="formtd"><span class="contenttext"><b>Type</b></span><br /></td>
<td width="30px"><input name="workphone" type="text" class="textbox3" id="workphone" /></td>
<td width="30px"><input name="workphone" type="text" class="textbox3" id="workphone" /></td>
</tr>
<tr>
<td width="15px" align="left" class="formtd"><span class="contenttext"><b>Total</b></span><br /></td>
<td width="15px"><input name="workphone" type="text" class="textbox3" id="workphone" /></td>
<td width="15px"><input name="workphone" type="text" class="textbox3" id="workphone" /></td>
</tr>
</table>
</td>
 
</tr>
</table> 
</table> 
</td></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="singleline"><img src="images/1pic.gif" width="1" height="1" /></td>
        </tr>
</table>
 <table width="100%" border="0" cellpadding="0" cellspacing="0" class="buttonsbg">
        <tr>
          <td height="30" valign="middle" class="buttonsbg2">
		</td>
        </tr>
 </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="singleline"><img src="images/1pic.gif" width="1" height="1" /></td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="buttonsbg">
        <tr>
          <td height="30" valign="middle" class="buttonsbg2"><table border="0" align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td>&nbsp;</td>
              <td width="53" height="21"><input name="Submit2" type="submit" class="formbutton" value="Cancel" /></td>
              <td width="53" height="21"><input name="Submit3" type="submit" class="formbutton" value="Reset" /></td>
              <td width="53" height="21"><input name="Submit" type="submit" class="formbutton" value="Add" /></td>
              </tr>
          </table>
		</td>
        </tr>
      </table>
</p>
</body>
</html>

Open in new window

expensehead.jpg
0
satyaala06
Asked:
satyaala06
  • 2
1 Solution
 
satyaala06Author Commented:
Here I am adding js files that i am using for showing div
//** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 24th, 08'- Script rewritten and updated to 2.0.
//** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).
//** March 5th, 09'- Version 2.2, which adds the following:
			//1) ontoggle($, divobj, state) event that fires each time a DIV is expanded/collapsed, including when the page 1st loads
			//2) Ability to expand a DIV via a URL parameter string, ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly
 
//** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly.
 
var animatedcollapse={
divholders: {}, //structure: {div.id, div.attrs, div.$divref}
divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
statusholders: {}, //structure: {[statuselement.id, stype, [opensrc, closedsrc]], $target}
lastactiveingroup: {}, //structure: {lastactivediv.id}
 
show:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "show")
	}
	else
		this.showhide(divids, "show")
},
 
hide:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "hide")
	}
	else
		this.showhide(divids, "hide")
},
 
toggle:function(divid){ //public method
	if (typeof divid=="object")
		divid=divid[0]
	this.showhide(divid, "toggle")
},
 
addDiv:function(divid, attrstring){ //public function
	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
	}
	this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
	return this
},
 
showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
		}
		else{
			this.slideengine(divid, action)
		}
	}
},
 
slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			if (animatedcollapse.ontoggle){
				try{
					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
				}
				catch(e){
					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
				}
			}
		})
		return false
	}
},
 
generatemap:function(){
	var map={}
	for (var i=0; i<arguments.length; i++){
		if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
			map[arguments[i][0]]=arguments[i][1]
		}
	}
	return map
},
 
init:function(){
	var ac=this
	jQuery(document).ready(function($){
		animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
		var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
			this.$divref=$('#'+this.id)
			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
			}
			else{
				var cssdisplay=this.getAttr('hide')? 'none' : null
			}
			if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
				cssdisplay='block' //set div to "block", overriding any other setting
			}
			else if (urlparamopenids[0]=="none"){
				cssdisplay='none' //set div to "none", overriding any other setting
			}
			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
				if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
					targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
				}
				if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence								
					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
				this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
			}
		}) //end divholders.each
		jQuery.each(ac.divgroups, function(){ //loop through each group
			if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
				ac.divholders[this.lastactivedivid].$divref.show()
		})
		if (animatedcollapse.ontoggle){
			jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
				animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
			})
		}
/* //reserved for future implementation
		var $allcontrols=$('a[rel]').filter('[@rel^="collapse["], [@rel^="expand["], [@rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
		$allcontrols.each(function(){ //loop though each control link
			this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
			$(this).click(function(){ //assign click behavior to each control link
				var relattr=this.getAttribute('rel')
				var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
				if (divids.length>0){
					animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
					return false
				}
			}) //end control.click
		})// end control.each
*/
		$(window).bind('unload', function(){
			ac.uninit()
		})
	}) //end doc.ready()
},
 
uninit:function(){
	var opendivids='', groupswithpersist=''
	jQuery.each(this.divholders, function(){
		if (this.$divref.css('display')!='none'){
			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
		}
		if (this.getAttr('group') && this.getAttr('persist'))
			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
	})
	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
	this.setCookie('acopendivids', opendivids)
	this.setCookie('acgroupswithpersist', groupswithpersist)
},
 
getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},
 
setCookie:function(name, value, days){
	if (typeof days!="undefined"){ //if set persistent cookie
		var expireDate = new Date()
		expireDate.setDate(expireDate.getDate()+days)
		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
	}
	else //else if this is a session only cookie
		document.cookie = name+"="+value+"; path=/"
},
 
urlparamselect:function(){
	window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
	return (RegExp.$1!="")? RegExp.$1.split(",") : []
}
 
}

Open in new window

0
 
satyaala06Author Commented:
I got the solution..Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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