Question

Here’s my code

<script type="text/javascript">
    function getNextScroll(i){
        <asp:Literal ID="infiniteScrollTableJS" runat="server"></asp:Literal>
    }
</script>

I am populating that Literal with some Javascript from the CodeBehind. This works great OnLoad. However, when I do a postback I have a problem. The Literal is updated on postback. The actual script that is inside the function actually gets changed (I can see it with Firebug). BUT, the function is unaware that there is new script in there, it just keeps running the old stuff.

So near as I can tell, I want to ‘re-initialize’ the code inside the function after postback.

I know how to call a function after postback using add_endRequest.

This problem is not unique to .NET or anything. In fact, I have a simple example here -> http://jsfiddle.net/7JxY7/1/ ‘Run Function’ will always alert ‘one’ even after the script contents are changed.

I feel like jQuery probably has something that I could use, but searching around I have found nothing.

EDIT:

I tried the suggestion by mblase75. This works great in Javascript ( more importantly, now I understand why) , however, given this approach, I still can’t get it working with the postback. Here is my updated code.

<script type="text/javascript">
    function getNextScroll(i){
        //some stuff
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function (s, e) {
        //mblase75 suggestion
        getNextScroll = function (i){<asp:Literal ID="infiniteScrollTableJS" runat="server"></asp:Literal>};
    });
</script>

I thought this would work, but of course, it has the same problem as my original method. The Literal is actually changed, but the function doesn’t know about the change, it still has the original code

Answer 1

In JavaScript, a function is actually an object. So instead of trying to rewrite the <script> element with a string, replace the function (variable) name with a new function object:

<script>
goTest = function(){
    alert('one');                        
}

function changeTest1(){
    goTest = function(){alert('two');};
    alert('ok');
}    
</script>

<a onclick="goTest();">Run Function</a><br/>
<a onclick="changeTest1();">Change Function</a>
​

http://jsfiddle.net/7JxY7/2/