How to detect/track postback in javascript?

As JavaScript shouldn't be written with server-side code, and injecting new elements into the page seems like overkill, it seems to me that the simplest solution is to add [datat-*] attributes to the <head> element:

In Page_Load:
Page.Header.Attributes["data-is-postback"] IsPostBack ? "true" : "false";

This can then be accessed as:

jQuery:
$('head').data('isPostback');
Vanilla JS:
document.head.getAttribute('data-is-postback') === 'true';

Of course, if you treat the [data-is-postback] attribute as a boolean attribute, you could alternatively use:

In Page_Load:
if (IsPostBack)
{
    Page.Header.Attributes.Add("data-is-postback", "");
}
else
{
    Page.Header.Attributes.Remove("data-is-postback");
}
jQuery:
$('head').is('[data-is-postback]');
Vanilla JS:
document.head.hasAttribute('data-is-postback')

If you want to check whether the current page will be a postback if the user clicks on a submit button, you can check for the presence of ViewState:

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="xxxxx" />

You can use something like document.getElementById("__VIEWSTATE") or the jQuery equivalent.

However, if you want to see whether the current page was generated in response to a postback, then you need to insert that data into the page on the server side first.

For example:

function isPostBack() {
  return <%= Page.IsPostBack %>;
}

ASPX:

<input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />

Client-side Script:

function isPostBack() { //function to check if page is a postback-ed one
  return document.getElementById('_ispostback').value == 'True';
}

PS: I have not tested it but I've done somthing similar before and it works.


In some cases, you may want to check for postback without any server-side code. For example, in SharePoint, you cannot have code blocks in SharePoint Designer pages, so you can't use any solution that requires <%=something %>. Here is an alternative that involves no server-side code:

<script type="text/javascript">
 function isPostBack()
 {

  return document.referrer.indexOf(document.location.href) > -1;
 }

 if (isPostBack()){
document.write('<span style="color:red;">Your search returned no results.</span><br/>');
 }
 </script>

One caveat (or feature, depending on how you look at it), this will detect not just postbacks, but any instance where the page links to itself.

Tags:

Javascript

Asp.Net

Postback

Recent Posts