Maintaining JavaScript Code in the <Head> after ASP.Net Postback.

StackOverflow https://stackoverflow.com/questions/281383

Question

As the title suggests, I am having trouble maintaining my code on postback. I have a bunch of jQuery code in the Head section and this works fine until a postback occurs after which it ceases to function!

How can I fix this? Does the head not get read on postback, and is there a way in which I can force this to happen?

JavaScript is:

        <script type="text/javascript">
        $(document).ready(function()
        {
            $('.tablesorter tbody tr').tablesorter();

        $('.tablesearch tbody tr').quicksearch({
            position: 'before',
            attached: 'table.tablesearch',
            stripeRowClass: ['odd', 'even'],
            labelText: 'Search:',
            delay: 100
        });
       }); 
        </script>
Was it helpful?

Solution

If you just have that code hard coded into your page's head then a post back won't affect it. I would check the following by debugging (FireBug in FireFox is a good debugger):

  • Verify the script is still in the head on postback.
  • verify that the css classes are in fact attached to some element in the page.
  • verify that the jquery code is executing after the browser is done loading on post back.

EDIT: Are you using UpdatePanels for your post back? In other words is this an asynchronous postback or a normal full page refresh?

EDIT EDIT: AHhhhh... Ok. So if you're using UpdatePanels then the document's ready state is already in the ready so that portion of jquery code won't be fired again. I would extract the jquery delegate out to a separate function that you can also call after the async postback.

OTHER TIPS

put your code in

function pageLoad(sender, args) {

    /* code here */

}

instead of in $(document).ready(function() { ... });

pageLoad() is a function that will execute after all postbacks, synchronous and asynchronous. See this answer for more details

I'm guessing that the postback pre-empts the page's onLoad event, which jQuery needs to hook into to use it's .ready().

  1. Does the script exist in the HTML code after the postback?
  2. If so, does the code get executed? Test by commenting out your code and temporarily add alert('test');
  3. If so, are the elements referenced by the code available on the page after postback?

Instead of using $(document).ready you should put your code in a function called pageLoad(). The pageLoad() function is by convention wired up to be called whenever the page has a postback/asyncpostback.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top