JScrollPane的和AJAX [英] jScrollPane and AJAX
问题描述
我想通过Ajax调用PHP脚本加载一些数据，然后返回它，唧唧歪歪的。那么，它的工作原理一切正常，直到JScrollPane中不会对AJAX调用加载。我只是不明白为什么，因为我已经在$就调用成功的部分称之为......但哦，说不上来。看一看下面的code，告诉我什么，我做错了/如何解决它。
函数eventLink（）{
jQuery的（。票证链路）。的fancybox（{
宽度：710，
高度：750，
类型：IFRAME
transitionIn：弹性，
transitionOut：弹性，
speedIn：600，
speedOut：600，
easingIn：easeInExpo
easingOut：easeOutExpo
overlayShow：真正的，
hideOnOverlayClick：假的，
hideOnContentClick：假的，
overlayOpacity：0.8，
overlayColor：＃000，
showCloseButton：真正的，
titleShow：真正的，
centerOnScroll：真
}）;
}
功能滚动面板（）{
jQuery的（'。滚动窗格）。JScrollPane中（{
showArrows：真正的，
autoReinitialise：真
}）;
}
jQuery的（文件）。就绪（函数（）{
jQuery的（中选择[名称='sortby']）。改变（函数（）{
VAR一个= jQuery的（本）.VAL（）;
jQuery.ajax（{
键入：GET，
网址：ticket_order.php
数据：sortby =+一，
beforeSend：函数（）{
jQuery的（＃阿贾克斯装载机）显示（）。
。jQuery的（＃票列表）隐藏（200）;
jQuery的（＃车票清单）。空（）}，
完成：函数（）{
。jQuery的（＃阿贾克斯装载机）隐藏（）;
eventLink（）;
}，
成功：函数（）{
。jQuery的（＃票列表）HTML（一）;
。jQuery的（＃票列表）显示（200）;
滚动窗格（）;
}
}）;
返回false}）;
eventLink（）;
滚动窗格（）;
}）;
我碰到的这个问题JScrollPane中。一旦创建元素周围的滚动面板结构，你需要特别对待。它并没有被重新初始化在功能反应良好。相反，你必须通过公开的方法来获得一个参考API和重新初始化。
使用code将是一个例子...
//初始化scrollpanes
$（文件）。就绪（函数（）{
jQuery的（'。滚动窗格）。JScrollPane中（{
showArrows：真正的，
autoReinitialise：假的
}）;
}）
这时有两件事情你需要为你的JScrollPane中。这就是内容容器和重新初始化方法。究其原因似乎是，一旦你初始化与JScrollPane的（容器），容器本身成为一个JScrollPane的对象。内容被移动到该对象之内的容器。所以，如果您更换目标div的内容，你会删除HTML元素构成一个JScrollPane的对象。以下是电话，让你的内容窗格中，用数据填充它，并重新初始化它。
api.getContentPane（）将让你的引用您的滚动面板和api.reinitialise（业务结束）将重绘和重新计算的滚动窗格。因此，要使用你的例子，
的jQuery（＃票列表）HTML（一）;
。jQuery的（＃票列表）显示（200）;
将变成：
API =的jQuery（＃票列表）数据（'JSP'）。
。api.getContentPane（）的HTML（一个）;
。jQuery的（＃票列表）显示（200）;
api.reinitialise（）;
这
$（文件）。就绪（函数（）{
//初始化scrollpanes
jQuery的（'。滚动窗格）。JScrollPane中（{
showArrows：真正的，
autoReinitialise：假的
}）;
}）
jQuery的（中选择[名称='sortby']）。改变（函数（）{
VAR一个= jQuery的（本）.VAL（）;
jQuery.ajax（{
键入：GET，
网址：ticket_order.php
数据：sortby =+一，
beforeSend：函数（）{
jQuery的（＃阿贾克斯装载机）显示（）。
。jQuery的（＃票列表）隐藏（200）;
jQuery的（＃车票清单）。空（）}，
完成：函数（）{
。jQuery的（＃阿贾克斯装载机）隐藏（）;
eventLink（）;
}，
成功：函数（）{
API =的jQuery（＃票列表）数据（'JSP'）。
。api.getContentPane（）的HTML（一个）;
。jQuery的（＃票列表）显示（200）;
api.reinitialise（）;
}
}）;
返回false}）;
eventLink（）;
}）;
下面是API 因为我能找到的最好的文档。
I'm trying to load some data via an AJAX call to a PHP script and then returning it, bla bla bla. Well, it works all fine till jScrollPane won't reload on the AJAX call. I simply don't understand why, since I've called it in the success part of the $.ajax call... But oh well, dunno. Have a look at the code below and tell me what I'm doing wrong/how to fix it.
function eventLink(){
jQuery(".ticket-link a").fancybox({
width:710,
height:750,
type:"iframe",
transitionIn:"elastic",
transitionOut:"elastic",
speedIn:600,
speedOut:600,
easingIn:"easeInExpo",
easingOut:"easeOutExpo",
overlayShow:true,
hideOnOverlayClick:false,
hideOnContentClick:false,
overlayOpacity:0.8,
overlayColor:"#000",
showCloseButton:true,
titleShow:true,
centerOnScroll:true
});
}
function scrollPane() {
jQuery('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
}
jQuery(document).ready(function(){
jQuery("select[name='sortby']").change(function(){
var a=jQuery(this).val();
jQuery.ajax({
type:"GET",
url:"ticket_order.php",
data:"sortby="+a,
beforeSend:function(){
jQuery("#ajax-loader").show();
jQuery("#ticket-list").hide(200);
jQuery("#ticket-list").empty()},
complete:function(){
jQuery("#ajax-loader").hide();
eventLink();
},
success:function(a){
jQuery("#ticket-list").html(a);
jQuery("#ticket-list").show(200);
scrollPane();
}
});
return false});
eventLink();
scrollPane();
});
I've run into this problem with jScrollPane. Once it creates the scrollpane structure around an element, you need to treat it differently. It doesn't respond well to being re-initialized as in your function. Instead, you have to get a reference to the api and reinitialise through the exposed method.
An example using your code would be...
// initialise the scrollpanes
$(document).ready(function() {
jQuery('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: false
});
})
Then there are two things you need for your jScrollpane. That's the content container and the reinitialise method. The reason seems to be that once you initialise a container with jScrollPane(), the container itself becomes a jScrollpane object. The content is moved to a container within that object. So if you replace the contents of the target div, you'll remove the html elements that make up a jScrollPane object. Here are the calls to get you the content pane, fill it with data and reinitialise it.
api.getContentPane() will get you a reference to the business end of your scroll pane and api.reinitialise() will redraw and recalculate the scrollpane. So to use your example,
jQuery("#ticket-list").html(a);
jQuery("#ticket-list").show(200);
would become:
api = jQuery("#ticket-list").data('jsp');
api.getContentPane().html(a);
jQuery("#ticket-list").show(200);
api.reinitialise();
This
$(document).ready(function() {
// initialise the scrollpanes
jQuery('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: false
});
})
jQuery("select[name='sortby']").change(function(){
var a=jQuery(this).val();
jQuery.ajax({
type:"GET",
url:"ticket_order.php",
data:"sortby="+a,
beforeSend:function(){
jQuery("#ajax-loader").show();
jQuery("#ticket-list").hide(200);
jQuery("#ticket-list").empty()},
complete:function(){
jQuery("#ajax-loader").hide();
eventLink();
},
success:function(a){
api = jQuery("#ticket-list").data('jsp');
api.getContentPane().html(a);
jQuery("#ticket-list").show(200);
api.reinitialise();
}
});
return false});
eventLink();
});
Here is the best documentation of the api as I could find.
这篇关于JScrollPane的和AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
