jScrollPaneとAJAX

Question

私は、PHPスクリプトへのAJAX呼び出しを介してデータをロードしてから、それを返す、bla bla blaしようとしています。まあ、jScrollPaneがAJAX呼び出しでリロードされなくなるまでうまく動作します。なぜ私は$ .ajax呼び出しの成功部分でそれを呼び出したので、私は単純に理解できません...しかし、ああ、うーん。下のコードを見て、私が間違ってやっていることを教えてください/それを修正する方法。

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(); 
}); 

Answer 1

jScrollPaneでこの問題が発生しました。要素の周りにスクロールペイン構造を作成したら、それを別の方法で扱う必要があります。それはあなたの関数のように再初期化されてもうまく反応しません。代わりに、APIへの参照を取得し、公開されたメソッドを再初期化する必要があります。

だろうあなたのコードを使用した例...

// initialise the scrollpanes 
$(document).ready(function() { 
    jQuery('.scroll-pane').jScrollPane({ 
     showArrows: true, 
     autoReinitialise: false 
    }); 
}) 

は、その後、あなたのJScrollPaneのために必要な二つのものがあります。これがコンテンツコンテナと再初期化メソッドです。その理由は、jScrollPane（）でコンテナを初期化すると、コンテナ自体がjScrollpaneオブジェクトになります。コンテンツは、そのオブジェクト内のコンテナに移動されます。したがって、ターゲットdivの内容を置き換えると、jScrollPaneオブジェクトを構成するhtml要素が削除されます。コンテンツペインを取得し、データで埋めて再初期化する呼び出しがあります。

api.getContentPane（）はスクロールペインのビジネス終了を参照し、api.reinitialise（）はスクロールペインを再描画して再計算します。だから、あなたの例を使用する

jQuery("#ticket-list").html(a); 
    jQuery("#ticket-list").show(200); 

になるでしょう：

api = jQuery("#ticket-list").data('jsp'); 
    api.getContentPane().html(a); 
    jQuery("#ticket-list").show(200); 
    api.reinitialise(); 

ここでこの

$(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(); 
}); 

は、私が見つけることができるようbest documentation of the apiです。