Answers :
1- Instead of targeting browser-specific optimizations, the ASP.NET AJAX pageLoad() shortcut function is called as a result of a more uniform process.
Since pageLoad() is called after every UpdatePanel refresh, the complications that arise can be initially difficult to grasp.
That initialization code will execute on the initial load, and things will seem okay at first. However, pageLoad() will then continue to be called each time any Control which postback is triggered, resulting in the initialization code running more often than intended. In the case of initialization code that should run once, $(document).ready() is the ideal solution. It will do exactly what you need and nothing more.
While $(document).ready() is ideal for one-time initialization routines, it leaves you hanging if you have code that needs to be re-run after every partial postback.
For example, what if we wanted to add a jQueryUI datepicker to the TextBox in the previous example? Adding it in $(document).ready() would work great, until a partial postback occurred. Then, the UpdatePanel’s new TextBox element would no longer have the datepicker wired up to it. This is exactly where pageLoad() shines.
By attaching in pageLoad(), our TextBox will now have the datepicker attached to it on initial page load, and have it re-attached after every partial postback.
$(document).ready()
• Ideal for onetime initialization.
• Optimization black magic; may run slightly earlier than pageLoad().
• Does not re-attach functionality to elements affected by partial postbacks.
pageLoad()
• Unsuitable for onetime initialization if used with Update Panels.
• Slightly less optimized in some browsers, but consistent.
• Perfect for re-attaching functionality to elements within Update Panels.
2- I was in need to bind the keyup function in my textbox , which just vanishes when any postback occurs , therefore i used pageload . if there would'nt be any update panel then i might not have used it.
3- For your ease, here's an sample :
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
Width="214px">
<asp:ListItem Selected="True">Select</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<h3>
I want this textbox to accept only alphabets</h3>
<h3>
It works fine before changing the dropdown selection , but as soon as you change
the dropdown , this textbox will fail</h3>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:TextBox ID="ChangeBox1" runat="server" Height="39px" Width="481px" placeholder="Success Textbox after and before postback"></asp:TextBox>
<br />
<h3>
It works fine before and after changing the dropdown selection
</h3>
</form>
<script type="text/javascript" language="javascript">
function pageLoad(sender, args) {
$('#ChangeBox1').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
e.preventDefault();
}
}
});
}
</script>
</body>
</html>
And in Code-Behind :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = "You Selected: " + DropDownList1.SelectedItem.Text;
}
}