how to refresh paritcular div of a table

Question

nish123 0 Junior Poster in Training

14 Years Ago

hello friends have a look on my attechments..

the rows are dynamically genrated from database..!! In column Amount user fills values....!!!

when user click on add ledger.. a new popup window will open with a form... after adding ledger and closing the popup window...!! the parent page will refresh.. so that new ledger can be seen in the list...!!

but now problem comes that when page refresh.. the values which user filled got vanished...!! :(

so i wondering is there any way to hold the values..!!

what if i take particular column in div... and after close the popup..i made refresh that div only....!!!

is it possible..!!

waiting for positive reply :)

javascript

2 Contributors
9 Replies
2K Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 9 Replies

essential 84 Posting Shark

14 Years Ago

Sorry i am unable to open your attached file. Can you post the actual code, or would you prefer a different sample?

essential 84 Posting Shark

14 Years Ago

Since you've provided me with insufficient code, then i will just have to mimic everything on this demo.

To be able for this to work, you must provide all valid variables and including querystring on each document, especially inside the ledger.php where it needs valid information, so it can provide valid results sent back to the AJAX request.

This program offers easy update's w/o reloading the actual page ( parent page ).

Here's the code for the mainpage:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
td { padding : .300em .300em 0 .300em; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var xmlHttp;
var win;
var wintitle = "Form Window";
var winprops;
var myPopWindow = function( loc, w, h ) {
   var winW = (( screen.width ) ? screen.width : (( window.clientWidth ) ? window.clientWidth : window.innerWidth ));
   var winH = (( screen.Height ) ? screen.Height : (( window.clientHeight ) ? window.clientHeight : window.innerHeight ));
   w = (( w ) ? (( winW ) - w ) : winW );
   h = (( h ) ? (( winH ) - h ) : winH );
   var opened = "active";
   var winprops = "";
   winprops += "width=" + w;
   winprops += ", height=" + h;
   winprops += ", top=0, left=0";
   winprops += ", scrollbars=yes";
   winprops += ", menubar=yes";
   winprops += ", toolbar=yes";
   winprops += ", resizable=yes"; 
   winprops += ", location=yes";   
   if ( window.status === loc ) {
      if ( typeof win !== "undefined" ) {
         if ( typeof (( win.opener ) ? win.opener : win.parent ) !== "undefined" ) { 
         win.focus();
         return false;
         } else {
         win = window.open( loc, target = opened, wintitle, winprops );
         win.focus();
         return false;
         }
      } else { 
      win = window.open( "", target = opened, wintitle, winprops );
      win.focus();
      return false; 
      }      
   } else if ( window.status !== loc ) {
      if ( typeof win !== "undefined" ) {
         if ( typeof (( win.opener ) ? win.opener : win.parent ) !== "undefined" ) {
         win.location.href = loc;
         window.status = loc;
         win.focus();
         return false;
         } 
      }
   } win = window.open( loc, target = opened, wintitle, winprops );
     window.status = loc;
     return false;
};
 
var update = function() {
   if ( xmlHttp.readyState === 4 || xmlHttp.readyState === "complete" ) {
      if ( xmlHttp.status === 200 ) {
   (( document.getElementById ) ? document.getElementById("main") : document.all.main ).innerHTML = xmlHttp.responseText;
      }
   }
};

var sendRequest = function( method, qstr ) { 
   url = (( method === "GET" ) ? "ledger.php?getledger=" + qstr : "ledger.php?" );
   try {
      if ( "XMLHttpRequest" in window ) {
      xmlHttp = new XMLHttpRequest(); 
      } else if ( "ActiveXObject" in window ) {
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
         try {
            for ( var i = 0; i < client.length; i++ ) {
            xmlHttp = new ActiveXObject( client[ i ] ); 
            }
         } catch( er ) { }
      }  
   } catch( e ) {
      if ( "createRequest" in window ) {
      xmlHttp = window.createRequest();
      } xmlHttp = null;
   } if ( xmlHttp !== null ) {
   (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   xmlHttp.onreadystatechange = update;
   xmlHttp.open( method, encodeURIComponent( url ), true );
   (( method === "POST" && "setRequestHeader" in xmlHttp ) ? xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8;") : xmlHttp );
   xmlHttp.send((( method === "POST" ) ? "getledger=" + qstr : "" ));
   return false;
   } alert( "Your browser does not handle AJAX Request!" );
};
window.onload = function() {
sendRequest( "GET", "someValidQueryString" );
}
// ]]>
</script>
</head>
<body>
<div id="main">Updates will be displayed inside this container.</div>
</body>
</html>

code for the ledger.php:

<form id="testform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" onsubmit="return false;">
<table id="table" frame="void" rules="none" summary="AJAX Powered!">
<?php
/*><!--?*/
$queryString = $_GET["getledger"];
$dbs = mysql_connect( 'localhost', 'testvalue', 'myvalue' );
   if ( !dbs ) {
      die( 'Unable to connect: '.mysql_error() );
   } mysql_select_db( "ajax_powered", $dbs );
$qs = "SELECT * FROM user WHERE rowid = '".$queryString."'";
$result = mysql_query( $qs );
while( $row = mysql_fetch_array( $request )) { 
/*--><?*/ ?>
<tr>
<td><?php echo $row[ 'ledgerName' ]; ?></td>
<td><input type="text" value="" onchange="sendRequest( 'GET', this.value );" /></td></tr>
<?php } 
mysql_close( $dbs );
?>
<tr>
<td><input type="button" value="add new ledger" onclick="myPopWindow('form.html');" /></td><td><input type="submit" value="update field" /></td></tr>
</table>
</form>

form test sample inside the popUpWindow

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[

var postData = function( form ) {
   qString = (( document.getElementById ) ? document.getElementById( form ) : document.all[ form ] ).txt.value;
   if ( opener !== null ) {
   opener.sendRequest( "GET", qString );
   opener.win.close();
   } return false;
};

// ]]>
</script>
</head>
<body>
<div id="main">
<form id="formwin" action="#" onsubmit="return postData( 'formwin' );">
<div>
<label for="txt">Test Data: <input type="text" id="txt" name="txt" value="" size="30" /></label> <input type="submit" value="post data" /></div>
</form>
</div>
</body>
</html>

NOTE: One invalid information that you will provide, will prevent everything not to work.

essential 84 Posting Shark

14 Years Ago

Ok i'll post back when i am done checking your codes.

essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nish123 0 Junior Poster in Training · Answer 1 · 2009-07-04T10:24:49+00:00

nish123 0 Junior Poster in Training

14 Years Ago

No replies... is it not possible...?????? :O

nish123 0 Junior Poster in Training · Answer 2 · 2009-07-04T13:57:52+00:00

<?while($row=mysql_fetch_array($result))
{?>
<td><?echo $row['ledgerName']; ?></td>// column name Ledgers
<td><input type="textbox"></td>// column name Amount
<?}?>
<input type='button' value='add New ledger' onclick='myPopWindow();'>

<input type='submit'>

Now Suppose there are 5 records in database.. means five rows will appear on the page.. user start filling the values in textbox... after filling the value... user want to add a new Ledger..!! then he will click on Add new ledger button.. and a pop-up window will appear..and after adding the ledger... the parent page(in which i m showing the listing..) will refresh.. so that new ledger can seen in the list..... but the values which user fill disappears on page refresh....!!!

so i thought instead of full page refresh... LedgerName column in div and refresh that part only..!!

nish123 0 Junior Poster in Training · Answer 3 · 2009-07-06T18:33:48+00:00

this is my full page code..!!! its a dirty work..lolzz..!! Kindly Explain your code little bit.. i m unable to understand..!!!! Thanks for reply..!! :)

<?  include_once('session.php');?>       

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr"><head>
<title>Budget</title><meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<link href="default.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript">

function formValidate(obj){
   // alert('hi');
	var obj = document.frm;
	var chkCount = obj.counter.value;	
	for(var i=0;i<chkCount;i++){
		var chkBox = eval('document.frm.chk'+i+'.checked');
		var bTxt = eval('document.frm.bamt'+i+'.value');
		 if(chkBox == true && bTxt == ''){
			alert('Please enter budget amount');
			return false;
		}
		else
			{
			if(chkBox == true && isNaN(bTxt))
				{
			        alert('Amount must be integer');
			        return false;
				}
			}
		}
	}
	

function countCheckboxes() 
{
   // alert('count'); 
    var obj;
    var count = 0;
    var form = document.frm;
  for (var i=0; i<form.elements.length; i++) 
  {
    obj = form.elements[i];
    if (obj.type == "checkbox" && obj.checked) {
        
        count++;
        }
  }
  if(count == 0)
  {
      alert('select ek atleast One ledger');
      return false;
  }
  else{
  document.getElementById('check').value = count;
  }     
} 

var cnt =0;
function disable(obj)
{  
    if(document.getElementById(obj.id).checked)
    {
        document.getElementById('bamt'+obj.value).disabled=false;
        showb('ledger'+obj.value);
       cnt = obj.value;
    }
    
    else
    {
        if(document.getElementById(obj.id).checked==false)
        {
            document.getElementById('bamt'+obj.value).disabled=true;
            document.getElementById('bamt'+obj.value).value =" ";
            document.getElementById('txtHint'+obj.value).value =" ";
            document.getElementById('txtHnt'+obj.value).value =" ";
        }
    }

} 
function able(obj)
{  
    if(document.getElementById(obj.id).checked)
    {
        document.getElementById('bamt'+obj.value).disabled=false;
        showe('ledger'+obj.value);
        cnt = obj.value;
    }
    else
    {
        if(document.getElementById(obj.id).checked==false)
        {
            document.getElementById('bamt'+obj.value).disabled=true;
            document.getElementById('bamt'+obj.value).value =" ";
            document.getElementById('txtHint'+obj.value).value =" ";
            document.getElementById('txtHnt'+obj.value).value =" ";
        }
    }
}

var xmlHttp;    
function showb(str)
{
	//alert('hi');         
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	} 
	 var userid = document.getElementById('userid').value;    
	var ledgerValue = document.getElementById(str).value;    
	var url="showbudget.php";
	url=url+"?q="+ledgerValue;
	url=url+"&uid="+userid;
	url=url+"&sid="+Math.random();                       
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}
    
    function stateChanged() 
    { 
        
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
        {             
            document.getElementById("txtHint"+cnt).value=xmlHttp.responseText;
        
        } 
    }
    
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     //Internet Explorer
     try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
     catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
    return xmlHttp;
    }

var xmlHttp1;    
function showe(str)
{
	//alert('hi');         
	xmlHttp1=GetXmlHttpObject();
	if (xmlHttp1==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	}
	var userid = document.getElementById('userid').value;    
	var ledgerValue = document.getElementById(str).value;    
	var url="showbudget1.php";
	url=url+"?q="+ledgerValue;
	url=url+"&uid="+userid;
	url=url+"&sid="+Math.random();                    
	xmlHttp1.onreadystatechange=stateChanged1;
	xmlHttp1.open("GET",url,true);
	xmlHttp1.send(null);
}

function stateChanged1() 
{ 
	
	if (xmlHttp1.readyState==4 || xmlHttp1.readyState=="complete")
	{             
		document.getElementById("txtHnt"+cnt).value=xmlHttp1.responseText;
	
	} 
}

function GetXmlHttpObject()
{
var xmlHttp1=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp1=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp1=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp1=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp1;
}
function myPopup2() {
window.open( "popupledger.php", "myWindow", 
"status = 1, height = 400, width = 600, resizable = 0" )
}
 
</script>    

<style>
.textbox2{
BORDER-RIGHT: #000000 1px solid; 
BORDER-TOP: #000000 1px solid; 
FONT-SIZE: 9pt; 
PADDING-BOTTOM: 1px; 
BORDER-LEFT: #000000 1px solid; 
COLOR: #000000; 
PADDING-TOP: 1px; 
BORDER-BOTTOM: #000000 1px solid; 
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
}
</style>
<script type="text/javascript" src="time.js"></script>
<script src="currentdate.js"></script>
<script type="text/javascript" src="tigra_hints.js"></script>   
<style>
        .hintsClass {
            font-family: tahoma, verdana, arial;
            font-size: 12px;
            background-color: #f0f0f0;
            color: #000000;
            border: 1px solid #808080;
            padding: 5px;
        }
        .hintSource {
            color: green;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
 <SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
   key = window.event.keyCode;
else if (e)
   key = e.which;
else
   return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || 
    (key==9) || (key==13) || (key==27) )
   return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
   return true;

// decimal point jump
else if (dec && (keychar == "."))
   {
   myfield.form.elements[dec].focus();
   return false;
   }
else
   return false;
}

//-->
</SCRIPT>
   
<?php
    include_once('config2.php');
    $userid = $_SESSION['userid'];
    $sql="SELECT * FROM 0_ledger where user_id = $userid or user_id = 0";
    $result=mysql_query($sql)or die('Query error:'.''.mysql_errno());   
?>
</head>
<body onload="startTime(); currentdate();">
<?php include_once('header.php');  
    include_once('menu4.php');?>
    <script language="JavaScript">

// configuration variable for the hint object, these setting will be shared among all hints created by this object
var HINTS_CFG = {
    'wise'       : true, // don't go off screen, don't overlap the object in the document
    'margin'     : 10, // minimum allowed distance between the hint and the window edge (negative values accepted)
    'gap'        : 0, // minimum allowed distance between the hint and the origin (negative values accepted)
    'align'      : 'tcbc', // align of the hint and the origin (by first letters origin's top|middle|bottom left|center|right to hint's top|middle|bottom left|center|right)
    'css'        : 'hintsClass', // a style class name for all hints, applied to DIV element (see style section in the header of the document)
    'show_delay' : 50, // a delay between initiating event (mouseover for example) and hint appearing
    'hide_delay' : 50, // a delay between closing event (mouseout for example) and hint disappearing
    'follow'     : false, // hint follows the mouse as it moves
    'z-index'    : 100, // a z-index for all hint layers
    'IEfix'      : false, // fix IE problem with windowed controls visible through hints (activate if select boxes are visible through the hints)
    'IEtrans'    : ['blendTrans(DURATION=.3)', 'blendTrans(DURATION=.3)'], // [show transition, hide transition] - nice transition effects, only work in IE5+
    'opacity'    : 100 // opacity of the hint in %%
};
// text/HTML of the hints
var HINTS_ITEMS = [
    'If Last Budget is Null then <br> it means<br>  no Budget of this<br>  account is created in last month',
    'If Last Actual Budget is Null then <br> it means no entry is passed in last month',
    'tooltip for item3<br>This one is multi line',
    'tooltip for item4',
    'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
];

var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
</script>

<div class="clear">
</div>
<div id="menu2">
<ul>
    <li><a href="cbudget.php" style="font-family:Verdana, Arial,Helvetica, sans-serif; font-size:14px">Create Budget</a></li>
    <li><a href="budget.php" style="font-family:Verdana, Arial,Helvetica, sans-serif; font-size:14px">View Reports</a></li>
</ul>
</div>
<div class="clear"></div>
<center>
 <table border="0" width="100%">
    <tr>
        <td width="20%"><font face="Courier New, Courier, mono" size="+1"><b>Create Entry</b></font></td>
        <td align="center" width="50%"><b> Welcome&nbsp;&nbsp;<?= $_SESSION['username'];?></b></td>
        <td align="right"><div id="txt1"></div></td>    
    </tr>
    <tr>
        <td class="titletext" style="">&nbsp;</td>
        <td align="right" class="titletext" colspan="2">Time:<span id="txt"></span></td>
    </tr>
</table>
<div class="clear"></div>
<center><table width="100%"><tbody><tr>
<div id="_page_body">
<div class="clear"></div>
<br> <? include_once('msgbox.php'); ?>       <br>
<form method="post" name="frm" action="addbudget.php" onSubmit="return formValidate(this);">
        
        <input type="hidden" id='userid' name="userid" value="<?= $userid; ?>"
        <div><center> 
        <table style="border-collapse: collapse;" cellpadding="3" cellspacing="3" align="center" border="1"  bgcolor="#f9f9f9" border="2" bordercolor="#e1e1e1">
    <tr>
        <td class="tableheader">Select Month</td>
        <td class="tableheader">Select Year</td>
        
    </tr>
    <tr>
        <td align="center">
           <select name="month" id="month" style="width:100px">
            <option value="1" <? if( $_SESSION['month'] == "1") echo 'selected';?>>January</option>
            <option value="2" <? if( $_SESSION['month'] == "2") echo 'selected';?>>Febuary</option>
            <option value="3" <? if( $_SESSION['month'] == "3") echo 'selected';?>>March</option>
            <option value="4" <? if( $_SESSION['month'] == "4") echo 'selected';?>>April</option>
            <option value="5" <? if( $_SESSION['month'] == "5") echo 'selected';?>>May</option>
            <option value="6" <? if( $_SESSION['month'] == "6") echo 'selected';?>>June</option>
            <option value="7" <? if( $_SESSION['month'] == "7") echo 'selected';?>>July</option>
            <option value="8" <? if( $_SESSION['month'] == "8") echo 'selected';?>>Augest</option>
            <option value="9" <? if( $_SESSION['month'] == "9") echo 'selected';?>>September</option>
            <option value="10" <? if( $_SESSION['month'] == "10") echo 'selected';?>>Octuber</option>
            <option value="11" <? if( $_SESSION['month'] == "11") echo 'selected';?>>November</option>
            <option value="12" <? if( $_SESSION['month'] == "12") echo 'selected';?>>December</option>
        </select>
         <td>  
            <select name="year" style="width:100px">
            <?
            $year = date(Y);
            for($i=1;$i<=5;$i++)
            {?>
                
              <option value="<?= $year;?>"><?= $year ?></option>  
              <?$year = $year + 1;?>
           <? }?>
            ?>
            
            
            
            </select>
         
         </td>   
   </tr>
</table>
<br>
<table style="border-collapse: collapse;" bgcolor="#f9f9f9" border="2" bordercolor="#e1e1e1" cellpadding="3" cellspacing="3" width="80%">
    <tr>
        <td class="tableheader">Select</td>
        <td class="tableheader">Ledger Name</td>
        <td class="tableheader">Budget Amount</td>
        <td class="tableheader">Last month Budget</td>
        <td class="tableheader">Last Actual</td>
    </tr>
      <? 
              $className = "evenrow";
              $count=0;
              while($row= mysql_fetch_array($result)) { 
      ?>
      
    <tr class="<?= $className ;?>"> 
        <td align="center"><input type="checkbox" name="chk<?=$count;?>"  id="chk<?=$count;?>" onClick="disable(this);able(this);" value="<?=$count;?>" <?if(isset($_SESSION['bamt'.$count])) echo 'checked'; ?>></td>
        <td align="center"><?= $row['ledgerName'];?><input type="hidden" id='ledger<?=$count?>' name='ledger<?=$count?>' value="<?=$row['ledger_id'];?>"></td>
        <td align="center"><input maxlength="8" type="text" value="<?= $_SESSION['bamt'.$count]?>" name="bamt<?=$count;?>" id="bamt<?=$count; ?>" onkeypress="return numbersonly(this,event)" class="textbox2" <?if(isset($_SESSION['bamt'.$count])) echo'enabled'; else echo 'disabled'; ?>></td>
        <td align="center"><input type="text" value="<?if(isset($_SESSION['bamt'.$count])) echo $_SESSION['lastmonth'.$count]?>" name='lastmonth<?=$count;?>'  id="txtHint<?=$count?>" class="textbox2" readonly="readonly" onmouseover="myHint.show(0, this)"  onmouseout="myHint.hide()"/></td>
        <td align="center"><input type="text" name='lastac<?=$count;?>' value="<?if(isset($_SESSION['bamt'.$count])) echo $_SESSION['lastac'.$count]?>"  id="txtHnt<?=$count?>" class="textbox2" readonly="readonly" onmouseover="myHint.show(1, this)"  onmouseout="myHint.hide()"/></td>
        
        <? $count++; 
            if($className == 'evenrow')
            {
                $className = oddrow;
            }
            else
            {
                $className = evenrow;
            }
        
    }
    
    
    
    
    
            ?>
            
        <tr>
        <td colspan="5" align="center"><button  type="button" onclick="return myPopup2();"><span>Add New Ledger</span></button></td>
        </tr>    
  <!--  </tr>
    
        <td align="center" colspan="2">Total</td>
        <td align="center"><input type="text" readonly="readonly"></td>
        <td align="center"><input type="text" readonly="readonly"></td>
        <td align="center"><input type="text" readonly="readonly"></td>
    </tr> -->
</tbody>
</table>
<br>
<button class="ajaxsubmit" type="submit" name="Process" id="Process" onclick="return countCheckboxes();"><span>Submit</span></button>
</center>
</center>
<input type="hidden" name="counter" value="<?=$count?>">
<input type="hidden" name="check" id='check'>

</form>
<br><div id="footer"> 
<?php include_once('footer.html');  
for($i=0;$i<=$count;$i++)
{
    if(isset($_SESSION['bamt'.$i]))
        {          
            unset($_SESSION['bamt'.$i]);
        }  

}



?>
  
</body>
</html>

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-07-08T01:10:13+00:00

if you just need to preserved those values, then you could try implementing this code sample inside your page.

<?php 
/*><!--?*/ include_once "session.php"; /*--><?*/ 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Budget</title>
<link rel="stylesheet" type="text/css" href="./default.css" media="all">
<style type="text/css">
<!--
input[type="text"] { display : block; height : 23px; color : #E00; text-align : center; font : bold 85% Verdana, Arial, Sans-Serif; }

form div { margin-bottom : 1em; } 
-->
</style>
<script type="text/javascript">
<!--
var $form;
var $element;
var data;
var now = new Date(), expDate;

var eDate = now;
eDate.setTime( eDate.getTime() + (( 24 * 60 * 60 * 1000 ) * 31 ));

var cookies;

var cookieActive = Boolean( navigator.cookieEnabled );

var modern = Boolean( document.getElementById );

var ie = Boolean( document.all && !modern );

var node = Boolean( document.getElementsByTagName );

cookies = function() { 
   return { 
      set : function( name, value, exp, path ) {
         if ( cookieActive ) { 
            try {
            data = name  + "=" + (( value !== null ) ? escape( value ) : "" );
            data += (( exp !== null ) ? "; expires=" + exp.toGMTString() : "" );
            data += (( path !== null ) ? "; path=" + escape( path ) : "" );
            document.cookie = data;
            } catch( e ) {
      (( e.description ) ? alert( e.description ) : alert( e.message ));
            }
         } else { alert("Unable to create cookie!\nPlease make sure that your cookie is enabled in your browser...");
         }
      }, 
      del : function( name ) {
      expDate = now;
      expDate.setTime( expDate.getTime() - (( 24 * 60 * 60 * 1000 ) * 31 ));
         try {
         document.cookie = name + "=; expires=" + expDate.toGMTString() + "; path=/";
         } catch( e1 ) {
         (( e1.description ) ? alert( e1.description ) : alert( e1.message ));
         }
      }, 
      get : function( name ) {
         if ( name !== null ) {
            try {
            lists = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return (unescape( RegExp.$2 )); 
            } 
            catch( e ) {   
            lists = document.cookie.indexOf( name + "="); 
               if ( lists !== -1 ) {
               lists = lists + name.length + 1;
               sem = document.cookie.indexOf(";", lists);
               sem = ( sem == -1 ) ? document.cookie.length : ""; 
               return ( unescape( document.cookie.substr( lists, sem )));
               }
            }
         }
      } 
   }; 
}();

// This will easily penetrate all form elememts, including objects on different types of browser. ( REUSABLE FUNCTION ).

var $ = function( FORMID, FORMELEMENT ) {

   if ( typeof FORMID !== "undefined" ) { 
   var classes = typeof( FORMID ); 
      try {
         switch( classes ) {

         case "object" : 
            try {
            $form = FORMID;
            $element = eval( "$form." + FORMELEMENT );
            } catch( e0 ) {
            $form = document.forms[ FORMID.id ];
            $element = $form.elements[ FORMELEMENT ];
            } break;

            case "string" :
            if ( document.forms ) { 
            $form =  document.forms[ FORMID ];
            $element = $form.elements[ FORMELEMENT ];
            } else {
            $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined )));
            $element = $form.children[ FORMELEMENT ];
            } break;

         case "number" : 
         $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined ));
            $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined ));
         break;

         default : $form = undefined;
         break; 
         }
      } catch( error ) {
      $form = undefined;
      } if ( typeof FORMID !== "undefined" && typeof FORMELEMENT === "undefined" ) {
        return $form;
      } return $element;
   }
};

var formValidate = function( obj ) {
   var chkCount = $( obj, "counter" ).value * 1;
   var eChecked = 0;
      for ( var i = 0; i < chkCount; i++ ) {
      if (( $( obj, "chk" + i ).checked ) && !( $( obj, "bamt" + i ).value ) || ( isNaN( $( obj, "bamt" + i ).value ))) {
      $( obj, "bamt" + i ).style.border = "1px solid #F00";
      $( obj, "bamt" + i ).style.textAlign = "center";
      $( obj, "bamt" + i ).value = (( isNaN( $( obj, "bamt" + i ).value )) ? "[ - MUST BE A NUMBER - ]" : "[ - ENTER BUDGET AMOUNT - ]" );   
      eChecked += 1; 
      continue;
      } cookies.set( String( "e" + i ), $( obj, "bamt" + i ).value, eDate, "/" );
   } if ( eChecked > 0 ) {
   return false; 
   } else {
      if ( !( $( obj, "chk0").checked || $( obj, "chk1").checked || $( obj, "chk0").checked )) {
      alert( "Please check atleast one item in the field." );
      return false;
      } 
   }
};
window.onload = function() { 
   for ( var x = 0; x < ( $("frm", "counter").value * 1 ); x++ ) {
   $( "frm", "bamt" + x ).value = cookies.get( "e" + x );
   }
};

// -->
</script>
</head>
<body>
<div id="main">
<form id="frm" name="frm" action="#" onsubmit="return formValidate( this );">
<div>
<input type="hidden" id="counter" name="counter" value="3">
<label for="chk0">checkbox #1: <input type="checkbox" id="chk0" name="chk0" value=""></label><br>
<label for="chk1">checkbox #2: <input type="checkbox" id="chk1" name="chk1" value=""></label><br>
<label for="chk2">checkbox #3: <input type="checkbox" id="chk2" name="chk2" value=""></label>
</div>
<div>
<label for="bamt0">field #1: <input type="text" id="bamt0" name="bamt0" size="25" value=""></label><br>
<label for="bamt1">field #2: <input type="text" id="bamt1" name="bamt1" size="25" value=""></label><br>
<label for="bamt2">field #3: <input type="text" id="bamt2" name="bamt2" size="25" value=""></label><br>
<input type="submit" value="Preseve Value">
</div>
</form>
</div>
</body>
</html>

nish123 0 Junior Poster in Training · Answer 5 · 2009-07-08T12:14:39+00:00

if you just need to preserved those values, then you could try implementing this code sample inside your page.

<?php 
/*><!--?*/ include_once "session.php"; /*--><?*/ 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Budget</title>
<link rel="stylesheet" type="text/css" href="./default.css" media="all">
<style type="text/css">
<!--
input[type="text"] { display : block; height : 23px; color : #E00; text-align : center; font : bold 85% Verdana, Arial, Sans-Serif; }

form div { margin-bottom : 1em; } 
-->
</style>
<script type="text/javascript">
<!--
var $form;
var $element;
var data;
var now = new Date(), expDate;

var eDate = now;
eDate.setTime( eDate.getTime() + (( 24 * 60 * 60 * 1000 ) * 31 ));

var cookies;

var cookieActive = Boolean( navigator.cookieEnabled );

var modern = Boolean( document.getElementById );

var ie = Boolean( document.all && !modern );

var node = Boolean( document.getElementsByTagName );

cookies = function() { 
   return { 
      set : function( name, value, exp, path ) {
         if ( cookieActive ) { 
            try {
            data = name  + "=" + (( value !== null ) ? escape( value ) : "" );
            data += (( exp !== null ) ? "; expires=" + exp.toGMTString() : "" );
            data += (( path !== null ) ? "; path=" + escape( path ) : "" );
            document.cookie = data;
            } catch( e ) {
      (( e.description ) ? alert( e.description ) : alert( e.message ));
            }
         } else { alert("Unable to create cookie!\nPlease make sure that your cookie is enabled in your browser...");
         }
      }, 
      del : function( name ) {
      expDate = now;
      expDate.setTime( expDate.getTime() - (( 24 * 60 * 60 * 1000 ) * 31 ));
         try {
         document.cookie = name + "=; expires=" + expDate.toGMTString() + "; path=/";
         } catch( e1 ) {
         (( e1.description ) ? alert( e1.description ) : alert( e1.message ));
         }
      }, 
      get : function( name ) {
         if ( name !== null ) {
            try {
            lists = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return (unescape( RegExp.$2 )); 
            } 
            catch( e ) {   
            lists = document.cookie.indexOf( name + "="); 
               if ( lists !== -1 ) {
               lists = lists + name.length + 1;
               sem = document.cookie.indexOf(";", lists);
               sem = ( sem == -1 ) ? document.cookie.length : ""; 
               return ( unescape( document.cookie.substr( lists, sem )));
               }
            }
         }
      } 
   }; 
}();

// This will easily penetrate all form elememts, including objects on different types of browser. ( REUSABLE FUNCTION ).

var $ = function( FORMID, FORMELEMENT ) {

   if ( typeof FORMID !== "undefined" ) { 
   var classes = typeof( FORMID ); 
      try {
         switch( classes ) {

         case "object" : 
            try {
            $form = FORMID;
            $element = eval( "$form." + FORMELEMENT );
            } catch( e0 ) {
            $form = document.forms[ FORMID.id ];
            $element = $form.elements[ FORMELEMENT ];
            } break;

            case "string" :
            if ( document.forms ) { 
            $form =  document.forms[ FORMID ];
            $element = $form.elements[ FORMELEMENT ];
            } else {
            $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined )));
            $element = $form.children[ FORMELEMENT ];
            } break;

         case "number" : 
         $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined ));
            $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined ));
         break;

         default : $form = undefined;
         break; 
         }
      } catch( error ) {
      $form = undefined;
      } if ( typeof FORMID !== "undefined" && typeof FORMELEMENT === "undefined" ) {
        return $form;
      } return $element;
   }
};

var formValidate = function( obj ) {
   var chkCount = $( obj, "counter" ).value * 1;
   var eChecked = 0;
      for ( var i = 0; i < chkCount; i++ ) {
      if (( $( obj, "chk" + i ).checked ) && !( $( obj, "bamt" + i ).value ) || ( isNaN( $( obj, "bamt" + i ).value ))) {
      $( obj, "bamt" + i ).style.border = "1px solid #F00";
      $( obj, "bamt" + i ).style.textAlign = "center";
      $( obj, "bamt" + i ).value = (( isNaN( $( obj, "bamt" + i ).value )) ? "[ - MUST BE A NUMBER - ]" : "[ - ENTER BUDGET AMOUNT - ]" );   
      eChecked += 1; 
      continue;
      } cookies.set( String( "e" + i ), $( obj, "bamt" + i ).value, eDate, "/" );
   } if ( eChecked > 0 ) {
   return false; 
   } else {
      if ( !( $( obj, "chk0").checked || $( obj, "chk1").checked || $( obj, "chk0").checked )) {
      alert( "Please check atleast one item in the field." );
      return false;
      } 
   }
};
window.onload = function() { 
   for ( var x = 0; x < ( $("frm", "counter").value * 1 ); x++ ) {
   $( "frm", "bamt" + x ).value = cookies.get( "e" + x );
   }
};

// -->
</script>
</head>
<body>
<div id="main">
<form id="frm" name="frm" action="#" onsubmit="return formValidate( this );">
<div>
<input type="hidden" id="counter" name="counter" value="3">
<label for="chk0">checkbox #1: <input type="checkbox" id="chk0" name="chk0" value=""></label><br>
<label for="chk1">checkbox #2: <input type="checkbox" id="chk1" name="chk1" value=""></label><br>
<label for="chk2">checkbox #3: <input type="checkbox" id="chk2" name="chk2" value=""></label>
</div>
<div>
<label for="bamt0">field #1: <input type="text" id="bamt0" name="bamt0" size="25" value=""></label><br>
<label for="bamt1">field #2: <input type="text" id="bamt1" name="bamt1" size="25" value=""></label><br>
<label for="bamt2">field #3: <input type="text" id="bamt2" name="bamt2" size="25" value=""></label><br>
<input type="submit" value="Preseve Value">
</div>
</form>
</div>
</body>
</html>

Nice worK....!!
but i still want to know is there any to way refresh a particular div through ajax...!!!

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-07-08T19:23:18+00:00

Nice worK....!!
but i still want to know is there any to way refresh a particular div through ajax...!!!

With or w/o AJAX, you can update any portion of your page w/o reloading.

But since you're requesting it with AJAX, so here's a simple workaround to get you started.

I've used some text file, in which i put all the ids of the div i need ( each id must be separated by a space or any delimeter that you prefer to use ).

Here's the content of of the ids.txt : div1 div2 div3 the testpage:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
label + div {
margin-bottom : 1em; font : 700 16pt "Trebuchet MS", "Bernard MT Condensed", Verdana, Arial, sans-serif; }
-->
</style>
<script type="text/javascript">
<!--
var method = "GET";
var AjaxObject = function() {
var req;
    try {
      if ( "XMLHttpRequest" in window ) {
      this.req = new XMLHttpRequest(); 
      } else if ( "ActiveXObject" in window ) {
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
         try {
            for ( var i = 0; i < client.length; i++ ) {
            this.req = new ActiveXObject( client[ i ] ); 
            }
         } catch( er ) { this.req = null; }
      }  
   } catch( e ) {
      if ( "createRequest" in window ) {
      this.req = window.createRequest();
      } else { this.req = null; }
   } return this.req; 
}; 
var handleRequest = function( ) {
var chb = (( document.getElementsByTagName ) ? document.getElementsByTagName("input") : document.all.tags("input")); 
   if (( this.readyState === 4 ) || ( this.readyState === "complete" )) {
   var q = this.responseText.split(/[\s\n]+/);
      for ( var i = 0; i < chb.length; i++ ) {
         if ( chb[ i ].type === "checkbox" && chb[ i ].checked ) {
         (( document.getElementById ) ? document.getElementById( q[ i ] ) : document.all[ q[ i ] ] ).innerHTML = "[ " + String( q[ i ] ).toUpperCase() + " has been updated ]";
         continue;   
         } (( document.getElementById ) ? document.getElementById( q[ i ] ) : document.all[ q[ i ] ] ).innerHTML = "DIV#" + (( i ) + 1 ) + " Default Content";
      } 
   } 
}; 
var sendRequest = function( url, xmlHttp ) {
if ( xmlHttp !== null ) {
   (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   xmlHttp.onreadystatechange = handleRequest;
   xmlHttp.open( method, encodeURIComponent( url ), true );
   (( method === "POST" && "setRequestHeader" in xmlHttp ) ? xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8") : xmlHttp );
   xmlHttp.send( null );
   return true;
   } alert( "Your browser does not handle AJAX Request!" );
};

// -->
</script>
</head>
<body>
<div>
<h2>Update DIV Content</h2>
<label for="d1"><input type="checkbox" id="d1" name="d1" value="0" onclick="sendRequest('ids.txt', new AjaxObject())"> Update Div#1</label><div id="div1">DIV#1 Default Content</div>

<label for="d2"><input type="checkbox" id="d2" name="d2" value="1" onclick="sendRequest('ids.txt', new AjaxObject())"> Update Div#2</label><div id="div2">DIV#2 Default Content</div>

<label for="d3"><input type="checkbox" id="d3" name="d3" value="2" onclick="sendRequest('ids.txt', new AjaxObject())"> Update Div#3</label><div id="div3">DIV#3 Default Content</div>
</div>
</body>
</html>

how to refresh paritcular div of a table

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers