Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Get Data of other page on current page
Posted By Sarin on Jun 07, 2012     RSS Feeds     Latest Hinduism news
2141 Views

During Development, It might happen that you want to show html data from some other page into your main page or you want to send a database request from your main page to some other page and expects the resultant data back in a formatted output into your current page and that too, without your page getting refreshed.  
This article will show how you can achieve the above scenario through Ajax
  1)    Define a control and an event on which you want to make a ajax request
        <select name="company" onchange="showCompany(this.value)">
  
  2)    Declare a JavaScript function to handle event declared in step 1
        function showCompany(str)  {
        var xmlhttp;
        if (str == "")  {
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
       
        else // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       
        xmlhttp.open("GET", "GetCompany.aspx?CompId=" + str, true);
        xmlhttp.send();
  
        xmlhttp.onreadystatechange = function ()  {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
    }
    This javascript function will be called whenever select option value changes. As you can see, we are making an XMLHTTPREquest  to GetCompany.aspx page. We are also passing a parameter to this requested page; value of this parameter is taken from the value of the select html control.
  
  3)    In GetCompany.aspx, we declare a property to store the value of the parameter passed from main page as shown in step 2.
            
    if (Request.QueryString["CompId"] != null)
             {
                CompanyID = Request.QueryString["CompId"].ToString();
            }
    
  4)    Using this property, we will retrieve the data from the database or any other data source.
        In this example, I have used a simple list called Lstcomp to store data and then, I have used linq to query this data.
  
    Company comp = Lstcmsomp.Where(x => x.CompanyId.Equals(CompId)).SingleOrDefault() as Company;
    
5) Data retrieved in step 4 is then formatted and is sent back to the main page
    public string GetData()
         {
            Company comp = cd.GetCompanyData(CompanyID);
            sb.Append("<table cellpadding='10' border=1>");
            sb.Append("<tr><td>CompanyId</td><td>"+comp.CompanyId+"</td></tr>");
            sb.Append("<tr><td>CompanyName</td><td>"+comp.CompanyName+"</td></tr>");
            sb.Append("<tr><td>CEOName</td><td>"+comp.CEOName+"</td></tr>");
            sb.Append("<tr><td>HeadQuarter</td><td>"+comp.HeadQuarter+"</td></tr>");
            sb.Append("</table>");
            return sb.ToString();
        }
    

Note that the Html Formatted Data received from requested page  will not be shown in the source code of your main page  
Demo:
When the browser loads, output of the browser is as follows:
    
On selecting the company, request is made onto other page and the html output of that page is shown in our current page. Output of the browser is as follows:  

Thus we have seen how to make an Ajax request to Show HTML content of other page onto the current page.

here


Share this to your friends. One of your friend is waiting for your share.
Related Articles
Get Set Value of any HTML element using jquery-Val function
How to encode and decode HTML request in ASP.NET
Why and how to create RSS feeds in C#
Simple Ajax client server Example
Ways of implementing AJAX
How AJAX Works, advantages and disadvantages
Get Data of other page on current page
Change attributes of HTML elements at runtime
Tips and tricks with ajax calendar
Show Update Progress Animation-Ajax

Post Comment