Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

How to Refresh a particular part of a web page ?

Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#1: Oct 13 '08
How to Refresh a particular part of a web page ?

Example :
I want to refresh a particular element <div ></div>

in the asp.net page. using Ajax

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Oct 13 '08

re: How to Refresh a particular part of a web page ?

You can access it using document.getElementById() and then set its innerHTML property (or use DOM methods, e.g. appendChild(), replaceChild()).
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#3: Oct 13 '08

re: How to Refresh a particular part of a web page ?

Quote:

Originally Posted by acoder

You can access it using document.getElementById() and then set its innerHTML property (or use DOM methods, e.g. appendChild(), replaceChild()).

Yes you are right, but when i used this type, it does not works when the page is posted back.

and I must refresh the particular content without postback from the server.
Eg
my code
Expand|Select|Wrap|Line Numbers
  1. if (Request.QueryString["SendRequest"] != null)
  2.         {
  3.             if (Request.QueryString["SendRequest"].Equals("userlist"))
  4.             {
  5.                 GetUserList();
  6.                 Response.End();
  7.             }
  8.             if (Request.QueryString["SendRequest"].Equals("UserData"))
  9.             {                
  10.                 GetIndividualReport(Request.QueryString["d1"], Request.QueryString["d2"], Request.QueryString["user"]);                
  11.                 Response.End();
  12.             }
  13.         }
  14.  
Works well when I refresh.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Oct 13 '08

re: How to Refresh a particular part of a web page ?

Post your Ajax code (using code tags).
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#5: Oct 14 '08

re: How to Refresh a particular part of a web page ?

Expand|Select|Wrap|Line Numbers
  1. function GetAgentList()
  2.     {
  3.         var xmlHttp = GetXmlHttp();
  4.             xmlHttp.onreadystatechange=function()
  5.                 {
  6.                 if(xmlHttp.readyState==4)
  7.                   {                      
  8.  
  9.                   DisplayData(xmlHttp.responseText);
  10.                   }
  11.                 }                  
  12.            xmlHttp.open("GET","Report.aspx?SendRequest=userlist",true);  xmlHttp.send(null); 
  13.     }
  14.  
  15.        function DisplayData(info)
  16.              {
  17.                 var data = info.split("*");
  18.  
  19.                 if(data[0] == 'Err')
  20.                 {
  21.                     if(data[1] == 'N')
  22.                     {
  23.                         alert('7 Days is the maximum date range!!');
  24.                     }
  25.                     //document.getElementById('divMsg').innerHTML = data[1];
  26.                 }
  27.                 else if(data[0] == 'Msg')
  28.                 {                
  29.                     //document.getElementById('divMsg').innerHTML = data[1];
  30.                     alert(data[1]);
  31.                 }
  32.                 else if(data[0] == 'Data')
  33.                 {                      
  34.                   document.getElementById('AgentList').innerHTML = data[1];                   
  35.                 }
  36.  
  37.  
  38.              }
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Oct 14 '08

re: How to Refresh a particular part of a web page ?

Where do you make the call to GetAgentList()?

Please post code using code tags. Thanks.
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#7: Oct 15 '08

re: How to Refresh a particular part of a web page ?

Quote:

Originally Posted by acoder

Where do you make the call to GetAgentList()?

When I click a button control form html page. do you understand.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Oct 15 '08

re: How to Refresh a particular part of a web page ?

Yes, can you post the button code (on the client-side [view source] in the browser).
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#9: Oct 15 '08

re: How to Refresh a particular part of a web page ?

Expand|Select|Wrap|Line Numbers
  1.  function GetAgentList()
  2.     {
  3.         var xmlHttp = GetXmlHttp();
  4.             xmlHttp.onreadystatechange=function()
  5.                 {
  6.                 if(xmlHttp.readyState==4)
  7.                   {                                                
  8.                   DisplayData(xmlHttp.responseText);
  9.                   }
  10.                 }                  
  11.            xmlHttp.open("GET","Report.aspx?SendRequest=userlist",true);  xmlHttp.send(null); 
  12.     }
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Oct 15 '08

re: How to Refresh a particular part of a web page ?

You already posted that. I meant the button code which calls this function onclick.
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#11: Oct 15 '08

re: How to Refresh a particular part of a web page ?

[HTML] <img id="btnGenerate" runat="server" alt="Generate Report"
onclick ="PleaseWait();GetAgentList();"
src="Images/generate_report_button.gif" />[/HTML]
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Oct 15 '08

re: How to Refresh a particular part of a web page ?

That seems OK, so that leaves the server-side script. If you run the page Report.aspx?SendRequest=userlist directly (without Ajax - type in your address bar), what does it output? Is it what you expect?
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#13: Oct 15 '08

re: How to Refresh a particular part of a web page ?

Not like that, It gives output to me, but i refresh it the content in my div tag is lost. And the next time when i execute the same i got the correct result.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Oct 15 '08

re: How to Refresh a particular part of a web page ?

That was only for a test to determine if you're getting the correct output from your server-side code.

I think the best thing would be for you to post the whole code (client-side version), or better still, a link to a test page.
Plater's Avatar
Moderator
  
Join Date: Apr 2007
Location: New England
Posts: 7,161
#15: Oct 15 '08

re: How to Refresh a particular part of a web page ?

I am guessing that since the button is also a server control, it causes a postback..which happens AFTER the other javascript is run. So the DIV tag gets refreshed, but a postback occurs and the contents are then lost?
Ganesh9u's Avatar
Newbie
  
Join Date: Oct 2008
Location: INDIA
Posts: 23
#16: Oct 16 '08

re: How to Refresh a particular part of a web page ?

Quote:

Originally Posted by Plater

I am guessing that since the button is also a server control, it causes a postback..which happens AFTER the other javascript is run. So the DIV tag gets refreshed, but a postback occurs and the contents are then lost?

What about view state can i use that ?
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved