問題解決

更新了jscrollpane到支持jquery 1.8的最新版本！ https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js jscrollPane連續不斷地消失Ajax GET

我試圖刷新與特定時期內容的股利。它會將一個Ajax GET調用發送給呈現內容的php腳本。第一次AJAX被調用，滾動窗格是存在的，但第二次的Ajax GET（刷新）JScrollPane中消失。任何如何重新初始化jscrollpane？

function getActivity(callback) 
{ 
    $.ajax({ 
    url: '../../views/main/activity.php', 
    type: 'GET', 
    complete: function(){ 
     $('#activityLineHolder').jScrollPane({ 
      verticalDragMinHeight: 12, 
      verticalDragMaxHeight: 12 
      //autoReinitialize = true 
     }); 
    }, 
    success: function(data) { 

     var api = $('#activityLineHolder').jScrollPane(
      { 
       verticalDragMinHeight: 12, 
        verticalDragMaxHeight: 12 
      } 
     ).data('jsp'); 

     api.getContentPane().html(data); 
     api.reinitialise(); 

    } 
}); 

setTimeout(callback,10000); 
} 


$(document).ready(function(){ 

(function getActivitysTimeoutFunction(){ 

    getActivity(getActivitysTimeoutFunction); 
})(); 

});

現在，我的滾動面板有每個Ajax調用後，但它顯示了馬車，JScrollPane的會繼續前進每個Ajax調用後離開，慢慢地，它會隱藏內容。這是怎麼發生的？

foreach ($list as $notification) { 
    echo "<div class='feeds' id='$notification->notification_id'>"; 
    $userObj = $user->show($notification->added_by); 
    echo $userObj->first_name.":<span class='text'>".$notification->activity."</span>"; 
    echo " <span class='time'>".$notification_obj->nicetime($notification->created_at)."</span>"; 
    echo "</div>"; 
}

這樣的事情，那是我activity.php

這裏是我的截圖，任何人請你幫我@ _ @ http://img31.imageshack.us/img31/6871/jscrollpane.png

來源

2012-11-12 Nich

你正在覆蓋相同的div這就是爲什麼 – ianace

怎麼說？ Ajax覆蓋與Ajax GET內容相同的div。其實，我這樣做的目的，但我想要存檔的是覆蓋AJAX Get的內容後，滾動窗格仍然存在。更新問題。 – Nich

更改命令的順序。使一個全局變量緩存的ID如下：

var $activity, $activity_pane; // outside the dom ready 

function getActivity(callback){ 
    $.ajax({ 
    url: '../../views/main/activity.php', 
    type: 'GET', 
    success: function(data) { 
     $activity_pane.html(data); 
    } 
    }); 

    setTimeout(callback,10000); 
} 

$(function(){ 
    $activity = $('#activityLineHolder'); 
    $activity.jScrollPane({ 
    verticalDragMinHeight: 12, 
    verticalDragMaxHeight: 12 
    autoReinitialise: true 
    }); 

    $activity_pane = $activity.data('jsp').getContentPane(); 

    (function getActivitysTimeoutFunction(){ 
    getActivity(getActivitysTimeoutFunction); 
    })(); 
});

來源

2012-11-21 02:56:21 pocesar

仍然不能>。<保持相同的結果.. .. @ _ @ – Nich

您使用的是jQuery和jscrollpane的哪個版本？ – pocesar

jquery 1.8.0和jscrollpane * jScrollPane - v2.0.0beta5 - 2010-09-18 – Nich

我的理解是，回調應該被執行時您的方法中的代碼完成。如果您想再次運行getActivity()方法，則不應在setTimeout()中使用該方法。事情是這樣的：

function getActivity(callback) 
{ 
    $.ajax({ 
    url: '../../views/main/activity.php', 
    type: 'GET', 
    complete: function(){ 
     $('#activityLineHolder').jScrollPane({ 
      verticalDragMinHeight: 12, 
      verticalDragMaxHeight: 12 
      //autoReinitialize = true 
     }); 
    }, 
    success: function(data) { 

     $('#activityLineHolder').html(data); 

    } 
}); 

setTimeout(function(){getActivity(callback);},10000); 
if($.isFunction(callback)) { 
    callback(); 
} 
}

來源

2012-11-12 03:53:48 samazi

更新的問題 – Nich

我只是看看http://jscrollpane.kelvinluck.com/ajax.html 我曾嘗試和作品。我將setTimeout更改爲setInterval（從scrollpane函數）。你可以試試這個（我曾測試）

$(document).ready(function(){ 
var api = $('#activityLineHolder').jScrollPane(
    { 
     showArrows:true, 
     maintainPosition: false, 
     verticalDragMinHeight: 12, 
       verticalDragMaxHeight: 12, 
     autoReinitialise: true 
    } 
).data('jsp'); 

setInterval(
    function() 
    { 
     $.ajax({ 
     url: '../../views/main/activity.php', 
     success: function(data) { 
     api.getContentPane().html(data); 
     } 
    }); 
    }, 
    10000 
); 

});

來源

2012-11-14 05:17:31

您好，我確實看過它，並進行修改，但不幸的是，它不適用於我的情況。我不知道爲什麼。每調用一次ajax，內容大小在重新初始化後都會變小。 – Nich

你的ajax在點擊或setTimeout（callback，10000）後想做些什麼？？我可以知道../../views/main/activity.php返回什麼樣的數據？ –

oic ...它只會繼續渲染一些數據，而不是點擊，但只是自動保持渲染。我更新了它 – Nich

我以前遇到這個問題，這裏是一個片段，使你可以得到的想法。祝你好運！

attachScroll = function(){ 

    return $('.scroll-pane').jScrollPane({ 
     verticalDragMinHeight: 17, 
     verticalDragMaxHeight: 17, 
     showArrows: true, 
     maintainPosition: false 
    }); 

}; // in this var I store all settings related to jScrollPane 

var api = attachScroll().data('jsp'); 

$ajaxObj = $.ajax({ 
    type: "GET", //set get or post 
    url: YOUR_URL, 
    data: null, 
    cache: false, //make sure you get fresh data 
    async: false, //very important! 
    beforeSend: function(){ 
    }, 
    success: function(){ 
    }, 
    complete: function(){ 
    } 
}).responseText; //$ajaxObj get the data from Ajax and store it 

api.getContentPane().html($ajaxObj); //insert $ajaxObj data into "api" pane previously defined. 
api.reinitialise(); //redraw jScrollPane

您可以定義Ajax調用的函數，並把它變成一個的setInterval。

一個例子來自官方的文檔可以發現here

希望它能幫助！

來源

2012-11-15 10:02:29

謝謝，但沒有運氣，它仍然保持相同的結果@@每當它循環的功能和重新初始化，滾動條變得越來越小，使我的內容不可見...任何想法？ – Nich

好吧，我想你的HTML內容來自AJAX來很長，因爲它需要一些時間來呈現由html的（）內容必須隨面積的問題：

api.getContentPane().html(data);

而當它進入下一行api.reinitialise() - HTML渲染尚未完成，但jScrollPane已捕獲當前的DIV寬度/高度，通過這些寬度/高度進行初始化，然後插入剩餘的html內容 - 並且它出現在jScrollPane邊界之外。

閱讀類似的問題：Wait for jquery .html method to finish rendering

所以我adice：

foreach ($list as $notification) { 
    ... 
} 
echo '<div id="end-of-ajax"></div>';

：

1）在你的PHP代碼的結束將標誌着HTML的結束從阿賈克斯來添加一個DIV 2）在你的JS代碼中加入週期（200ms）檢查「ajax結束」 - 當它發現到達結束時，它要求api.reinitialise（）：

var timer = setInterval(function(){ 
    if ($("#activityLineHolder").find('#end-of-ajax').length) { 
     api.reinitialise(); 
     clearInterval(timer); 
    } 
}, 200);

編輯

這是完全的JavaScript代碼：

function getActivity() 
{ 
    $.ajax({ 
    url: '../../views/main/activity.php', 
    type: 'GET', 
    complete: function(){ 
     $('#activityLineHolder').jScrollPane({ 
      verticalDragMinHeight: 12, 
      verticalDragMaxHeight: 12 
      //autoReinitialize = true 
     }); 
    }, 
    success: function(data) { 

     var api = $('#activityLineHolder').jScrollPane(
      {verticalDragMinHeight: 12,verticalDragMaxHeight: 12} 
     ).data('jsp'); 

     api.getContentPane().html(data); 

     var timer = setInterval(function(){ 
      if ($("#activityLineHolder").find('#end-of-ajax').length) { 
      api.reinitialise(); 
      clearInterval(timer); 
      } 
     }, 200); 
    } 
}); 
} 

$(document).ready(function(){ 
    setInterval(getActivity,10000);  
});

來源

2012-11-17 06:09:31 oyatek

嗨！這對我來說是一個新的信息，但我真的不瞭解setInterval必須放在哪裏的js，以及定期檢查的目的是什麼？它是否和我在10000內循環的那樣做了同樣的事情？你可以ü簡單地向我解釋，或者我應該在哪裏放這段代碼..事先提示 – Nich

更新我的回答 – oyatek

你不能附加自動回調函數到.html（）方法 - 這就是爲什麼你需要每隔200ms檢查一次如果它已經完成渲染。 – oyatek

林不知道關於你的內容，但只是確保你相應reinitlizing之前重置寬度和高度。因爲我有同樣的問題，那就是問題

var origHeight =$('#GnattChartContainerClip').height(); 
var GanttChart = $('#EntireGnattWrapper').get(0).GanttChart; 
$('#GnattChartContainerClip').find('#PaddingGnatt').remove(); 
$('#HeadersCol').find('#PaddingHeaders').remove(); 
var pane = $('#GnattChartContainerClip'); 
$('#GnattChartContainerClip').height(origHeight+height); 
$('#GnattChartContainerClip').append('<div id="PaddingGnatt" style="width:'+GanttChart.TotalWidth+'px;height:25px"></div>'); 
$('#HeadersCol').append('<div id="PaddingHeaders" class="header" style="height:25px"></div>'); 
var paned = pane.data('jsp'); 
paned.reinitialise();

來源

2012-11-20 07:50:49 Billybonks

jscrollPane連續不斷地消失Ajax GET

問題解決

回答

相關問題