Question

I am using a jQuery plugin called iScroll 4 (iScroll4 Docs), which allows me to touch, swipe, pinch and scroll a scrolling panel. The contents of this scrolling panel are loaded via AJAX and include a horizontal list of images.

This all works fine when first loaded but if I upload some more images and have AJAX update the panel, the iScroll plugin doesn’t work anymore!

This is my code… and this works:

// the JS ////////////////////////

<script src="js/iscroll-lite.js"></script>
<script>

// start iScroll

var myScroll;
function loaded() {
    setTimeout(function () {
        myScroll = new iScroll('scroll-uploader-photos');
    }, 100);
}
window.addEventListener('load', loaded, false);

// load images to panel for first time

load_previous_uploads(<%=Session("article_id")%>);

// load images function

function load_previous_uploads(article_id) {
    if (article_id != "") {
        var data_str = "article_id="+article_id
        $.ajax({
        type : 'GET',
        data : data_str,
        url : 'ajax/get-uploader-photos.asp',
        dataType : 'html',
        success : function(data) {
            if (data != "") {
                $(".upload_result").html(data);
            }
        }
        });
    }
}
</script>

// the html //////////////////

<div class="upload_result"></div>

// the ajax content from external ASP page (get-uploader-photos.asp)

<div class="scroll-uploader-photos">
    <img><img><img><img><img><img><img><img><img><img><img><img><img>
</div>

If I now go and upload some more images, and on success I run the function load_previous_uploads(), the iScroll plugin then does not work as the sliding panel has been updated and is starting to bug me as to why I cannot fix it. After it stops working, I can simply refresh the page and it all works again, with the new images.

For a better example of what I have:

If anybody can see what is wrong and/or can see a fix, please let me know – I would be soooo grateful!

**** MY ATTEMPT ****

I thought by calling the iScroll function **loaded()** right after AJAX updates the image panel after an upload, it might fix the problem… but it didn’t!!

Answer 1

Have you tried the refresh method of iScroll?

From the docs

ajax('page.php', onCompletion);

function onCompletion () {
    // Here modify the DOM in any way, eg: by adding LIs to the scroller UL

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};