iscroll jquery breaks on partial postback

Question

I have found a script called iScroll to use on iPad devices as a 1 figure scroll mechanism for a verticle list. all it needs is:

<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>

and the below:

var myScroll;

function loaded() {

  myScroll = new iScroll('wrapper');

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

which works fine when the page loads for the first time, however the list that uses this is within an asp.net upadate panel and the scroll breaks on postback.

I have tried registerstartupscript from my c# when the events that trigger the list refresh occur:

    public string ipadScript()
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("var myScroll;" + Environment.NewLine);
        sb.Append("function loaded() {" + Environment.NewLine);
        sb.Append("alert('h');" + Environment.NewLine);
        sb.Append("myScroll = new iScroll('wrapper');" + Environment.NewLine);
        sb.Append("}" + Environment.NewLine);

        sb.Append("document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);" + Environment.NewLine);
        sb.Append("document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);" + Environment.NewLine);
        return sb.ToString();
    }


ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(this.GetType(), "ipadKey", ipadScript(), true);

But this does not seem to work either. I don't even get the 'alert' I have added in the script to check the postback. Hopefully someone can help?

SOLVED!!!!

function pageLoad(sender, args) {
    if (args.get_isPartialLoad()) {
 myScroll = new iScroll('wrapper');
}
}

this will only work with asp.net update panels

Answer 1

The refresh method myScroll.refresh() should be invoked after updating of the update panel. Client side:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

function endRequestHandler(sender, eventArgs)
{
   myScroll.refresh();
}

Answer 2

ClientScriptManager will just register the code, but since the <head> element isn't in the update panel, it never gets added, and even if it was wouldn't execute.

You'll need to register a client-side event handler to reinitialize the list:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
});
var endRequestHandler = function() { myScroll.refresh(); };

iscroll jquery breaks on partial postback

Question

2 answers

solution1
1 2012-02-09 15:42:15

solution2
0 2012-02-09 15:42:46

iscroll jquery breaks on partial postback

Question

2 answers

solution1 1 2012-02-09 15:42:15

solution2 0 2012-02-09 15:42:46

solution1
1 2012-02-09 15:42:15

solution2
0 2012-02-09 15:42:46