[英]jQuery iScroll 4 - Issues loading AJAX content to sliding panel
I am using a jQuery plugin called iScroll 4 ( iScroll4 Docs ), which allows me to touch, swipe, pinch and scroll a scrolling panel. 我正在使用一个名为iScroll 4( iScroll4 Docs )的jQuery插件,它使我可以触摸,轻扫,收缩和滚动滚动面板。 The contents of this scrolling panel are loaded via AJAX and include a horizontal list of images. 该滚动面板的内容是通过AJAX加载的,并且包含水平图像列表。
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! 首次加载时,这一切都很好,但是如果我上传更多图像并使用AJAX更新面板,则iScroll插件将不再起作用!
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. 如果现在我去上传更多图像,并且成功运行了函数load_previous_uploads()
,则iScroll插件将不起作用,因为滑动面板已更新,并开始让我烦恼为什么无法修复它。 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!! 我以为在上传后AJAX更新图像面板后立即调用iScroll函数**loaded()**
可能会解决问题...但是没有成功!
Have you tried the refresh method of iScroll? 您是否尝试过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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.