Blog Archives

JQuery and Partial Postbacks

I recently came across an issue where JQuery bindings no longer functioned after a partial postback and stumbled upon some code that was helpful in most cases.

Javascript (JQuery):


startJQuery() { 
//do JQ here

And alternatively..


This code will not always work however, as was the case in my particular scenario, so I resolved using an alternate method.

RegisterStartupScript is great functionality, and can be useful for loading javascript dynamically on an as-needed basis.

The example below, based on prior code selects the correct JS file to use, then loads it using the registerstartupscript function. This is all within a code block which calls an update panel


int scriptnumber = 1;
string FilePath = String.Format("~/Scripts/Script_{0}.js",scriptnumber.ToString());
System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(FilePath));
            jqueryfileoutput = sr.ReadToEnd();


            ScriptManager.RegisterStartupScript(this, this.GetType(), "scriptname",
                "<script type=\"text/javascript\">" + jqueryfileoutput.ToString().Trim() + "</script>", false);

Disable button on AJAX Postback

Many different implementations exist for disabling a button on AJAX post-back. I find the following code snippet to be very simple, clear and effective.

Although this example applies to ASP. NET, with small modification this would work for PHP as well.

In general, this works because your server side code is already creating javascript event handlers for you which is used to handle the AJAX callbacks. This saves you programming time and makes it more dynamic.

Since these event handlers are already present in the client-side page, with little effort, we can easily intercept these calls with some simple JS and plug in our own code. See below. Enjoy. ;)


function startRequest(sender, e) {
//disable button during the AJAX call
document.getElementById('<%=btnSubmit.ClientID %>').disabled = true;
document.getElementById('<%= btnSubmit.ClientID %>').src = '<%= this.ResolveUrl("~") %>uploads/english/images/buttons/bu_submit_off.jpg';

function endRequest(sender, e) {
//re-enable button once the AJAX call has completed
document.getElementById('<%= btnSubmit.ClientID %>').disabled = false;
document.getElementById('<%= btnSubmit.ClientID %>').src = '<%= this.ResolveUrl("~")%>uploads/english/images/buttons/bu_submit.jpg';

var instance = Sys.WebForms.PageRequestManager.getInstance();

function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');

Or alternatively, in conjuction with a much simpler function below:

//add to your button like so
<asp:ImageButton ID="btnSubmit" runat="server" OnClick="btnSubmit_Click"                                 
AlternateText="Submit" ImageUrl="~/Images/btn_submit.gif" OnClientClick="disableme(this,'submit')" />
      function disableme(o, n) {
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() { o.disabled = true; o.blur; o.src = '<%= this.ResolveUrl("~") %>Images/ajax-loader.gif'; });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { o.disabled = false; o.blur; o.src = '<%= this.ResolveUrl("~") %>Images/btn_' + n + '.gif'; });

The javascript can also be registered on page load. This may be required if you’re using AJAX.

protected void Page_Load(object sender, EventArgs e)
ScriptManager.RegisterStartupScript(this,this.GetType(),"","function disableme(o, n) {Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function () { o.disabled = true; o.blur; o.src = '" + this.ResolveUrl("~") +"Images/ajax-loader.gif'; });Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { o.disabled = false; o.blur; o.src = '" + this.ResolveUrl("~") + "Images/btn_' + n + '.gif'; });}",true);

Get every new post delivered to your Inbox.