How to Refresh a particular part of a web page ?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Ganesh9u
    New Member
    • Oct 2008
    • 23

    How to Refresh a particular part of a web page ?

    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
    Recognized Expert MVP
    • Nov 2006
    • 16032

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

    Comment

    • Ganesh9u
      New Member
      • Oct 2008
      • 23

      #3
      Originally posted by acoder
      You can access it using document.getEle mentById() 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
      Code:
      if (Request.QueryString["SendRequest"] != null)
              {
                  if (Request.QueryString["SendRequest"].Equals("userlist"))
                  {
                      GetUserList();
                      Response.End();
                  }
                  if (Request.QueryString["SendRequest"].Equals("UserData"))
                  {                
                      GetIndividualReport(Request.QueryString["d1"], Request.QueryString["d2"], Request.QueryString["user"]);                
                      Response.End();
                  }
              }
      Works well when I refresh.
      Last edited by acoder; Oct 13 '08, 01:50 PM. Reason: Added [code] tags

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Post your Ajax code (using code tags).

        Comment

        • Ganesh9u
          New Member
          • Oct 2008
          • 23

          #5
          Code:
          function GetAgentList()
              {
                  var xmlHttp = GetXmlHttp();
                      xmlHttp.onreadystatechange=function()
                          {
                          if(xmlHttp.readyState==4)
                            {                      
                                        
                            DisplayData(xmlHttp.responseText);
                            }
                          }                  
                     xmlHttp.open("GET","Report.aspx?SendRequest=userlist",true);  xmlHttp.send(null); 
              }
              
                 function DisplayData(info)
                       {
                          var data = info.split("*");
                          
                          if(data[0] == 'Err')
                          {
                              if(data[1] == 'N')
                              {
                                  alert('7 Days is the maximum date range!!');
                              }
                              //document.getElementById('divMsg').innerHTML = data[1];
                          }
                          else if(data[0] == 'Msg')
                          {                
                              //document.getElementById('divMsg').innerHTML = data[1];
                              alert(data[1]);
                          }
                          else if(data[0] == 'Data')
                          {                      
                            document.getElementById('AgentList').innerHTML = data[1];                   
                          }
                          
                         
                       }
          Last edited by acoder; Oct 14 '08, 11:25 AM. Reason: Added [code] tags

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Where do you make the call to GetAgentList()?

            Please post code using code tags. Thanks.

            Comment

            • Ganesh9u
              New Member
              • Oct 2008
              • 23

              #7
              Originally posted by acoder
              Where do you make the call to GetAgentList()?
              When I click a button control form html page. do you understand.

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                Yes, can you post the button code (on the client-side [view source] in the browser).

                Comment

                • Ganesh9u
                  New Member
                  • Oct 2008
                  • 23

                  #9
                  Code:
                   function GetAgentList()
                      {
                          var xmlHttp = GetXmlHttp();
                              xmlHttp.onreadystatechange=function()
                                  {
                                  if(xmlHttp.readyState==4)
                                    {                                                
                                    DisplayData(xmlHttp.responseText);
                                    }
                                  }                  
                             xmlHttp.open("GET","Report.aspx?SendRequest=userlist",true);  xmlHttp.send(null); 
                      }

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    You already posted that. I meant the button code which calls this function onclick.

                    Comment

                    • Ganesh9u
                      New Member
                      • Oct 2008
                      • 23

                      #11
                      [HTML] <img id="btnGenerate " runat="server" alt="Generate Report"
                      onclick ="PleaseWait(); GetAgentList(); "
                      src="Images/generate_report _button.gif" />[/HTML]

                      Comment

                      • acoder
                        Recognized Expert MVP
                        • Nov 2006
                        • 16032

                        #12
                        That seems OK, so that leaves the server-side script. If you run the page Report.aspx?Sen dRequest=userli st directly (without Ajax - type in your address bar), what does it output? Is it what you expect?

                        Comment

                        • Ganesh9u
                          New Member
                          • Oct 2008
                          • 23

                          #13
                          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.

                          Comment

                          • acoder
                            Recognized Expert MVP
                            • Nov 2006
                            • 16032

                            #14
                            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.

                            Comment

                            • Plater
                              Recognized Expert Expert
                              • Apr 2007
                              • 7872

                              #15
                              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?

                              Comment

                              Working...