Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

javascript Ajax Function

Posted by Viral Sarvaiya on March 13, 2009

hear i demonstrate the javascript’s Ajaxfunction.

with this function we can get data from one .aspx page to another .aspx page.

Description :

Hear i have a student information in one table of database. In 1 page(default.aspx) i have a chacke box and some textbox.

when i check the check box it goes to server side without refreshing that page take all the data of student and put all the data in to that text boxes.

step 1: Make a default.aspx page as below.

<head id=”Head1″ runat=”server”>

<script type=”text/JavaScript”>
function ajaxFunction(eid, chkenroll)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{

if(xmlHttp.readyState==4)
{
var valstr,ss
valstr = xmlHttp.responseText;
ss = valstr.split(“_”);
document.getElementById(“txtSfname”).value = ss[0];
document.getElementById(“txtSlname”).value = ss[1];
document.getElementById(“txtSemail”).value = ss[2];
document.getElementById(“txtSadd1”).value = ss[3];
document.getElementById(“txtScity”).value = ss[4];
document.getElementById(“txtSstate”).value = ss[5];
document.getElementById(“txtSzip”).value = ss[6];
}
}
if (document.getElementById(chkenroll).checked == true)
{
xmlHttp.open(“GET”,”getenrollment.aspx?eid=” + eid ,true);
}
else
{
document.getElementById(“txtSfname”).value = “”;
document.getElementById(“txtSlname”).value = “”;
document.getElementById(“txtSemail”).value = “”;
document.getElementById(“txtSadd1”).value = “”;
document.getElementById(“txtScity”).value = “”;
document.getElementById(“txtSstate”).value = “”;
document.getElementById(“txtSzip”).value = “”;

document.getElementById(“chkadd”).checked=false;
document.getElementById(“txtbfname”).value = “”;
document.getElementById(“txtblname”).value = “”;
document.getElementById(“txtbemail”).value = “”;
document.getElementById(“txtbaddr1”).value = “”;
document.getElementById(“txtbaddr2”).value = “”;
document.getElementById(“txtbcity”).value = “”;
document.getElementById(“txtbstate”).value = “”;
document.getElementById(“txtbzip”).value = “”;
}
xmlHttp.send(null);
}
</script>

</head>

<body>

<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF; padding-top: 0px; padding-right:150px;”
class=”contant” height=”35″ colspan=”2″>
<asp:CheckBox ID=”chkemrollment” runat=”server” Text=”  Check this box for same as Enrollment” />
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″  width=”130″>
First Name :
</td>
<td width=”620″ style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSfname” runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″>
Last Name :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSlname” runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”30″>
Email Address :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSemail” runat=”server” CssClass=”input1″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span></td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″>
Address 1:
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSadd1″ runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″>
Address 2 :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSadd2″ runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″>
City :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtScity” runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;” class=”contant”
height=”35″>
State/Province :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSstate” runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
<tr>
<td style=”border-bottom: solid 1px #ffffff; border-right: solid 1px #FFFFFF;border-left: solid 1px #FFFFFF;” class=”contant”
height=”35″>
Post/Zip code :
</td>
<td style=”border-bottom: solid 1px #ffffff;border-right: solid 1px #FFFFFF; padding-left: 10px; vertical-align: middle;”>
<asp:TextBox ID=”txtSzip” runat=”server” CssClass=”input2″ autocomplete=”off”></asp:TextBox><span style=”color:Red;”> *</span>
</td>
</tr>
</table>

</body>
</html>

step 2: Make a default.aspx.vb page as below.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

chkemrollment.Attributes.Add(“onclick”, “javascript:return ajaxFunction(” & Request(“eid”) & “,'” & chkemrollment.ClientID & “‘)”)

End Sub

———————————————————————–

On clicking the checkbox, javascript redirect to the getenrollment.aspx page. from this page we can redirect with query string with GET method.

getenrollment.aspx page only include the first line of aspx page, remove all the other coding of that file. show bellow.

step 3: Make a getenrollment.aspx page as below.

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”getenrollment.aspx.vb” Inherits=”getenrollment” %>

step 4: Make a getenrollment.aspx.vb page as below.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim ds As New DataSet
If IsPostBack = False Then
If Request(“eid”) <> “” Then
If IsNumeric(Request(“eid”)) Then
ds = objenroll.SelectEnrollmentById(Request(“eid”))
If ds.Tables(0).Rows.Count > 0 Then
Response.Write(ds.Tables(0).Rows(0).Item(“fname”) & “_” & ds.Tables(0).Rows(0).Item(“lname”) & “_”)
Response.Write(ds.Tables(0).Rows(0).Item(“email”) & “_” & ds.Tables(0).Rows(0).Item(“address”) & “_”)
Response.Write(ds.Tables(0).Rows(0).Item(“city”) & “_” & ds.Tables(0).Rows(0).Item(“state”) & “_”)
Response.Write(ds.Tables(0).Rows(0).Item(“zipcode”))
End If
End If
End If
End If
ds.Dispose()
ds.Clear()
End Sub

——————————–

this page return the string to the default.aspx page,

show javascript of the  default.aspx page

valstr = xmlHttp.responseText;

means the valstr variable have that string.

and then that string seperated by “_” (underscore)  and then it put to the textbox.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: