0

Jquery タブで ajax を使用してコンテンツを読み込んでいます。アクティブなタブの URL からより多くのコンテンツを読み込み、それをリストに追加して、Facebook のように表示したいと考えています。

スクロール時の読み込みとjqueryタブを組み合わせるにはどうすればよいですか?

以下は、私が使用したHTMLとJSです。

HTML:

<div id="tabs">
    <ul>
        <li><a href="/EventController?operation=friend">Friends</a></li>
        <li><a href="/EventController?operation=uni">University</a></li>
        <li><a href="/EventController?operation=all">All</a></li>
    </ul>
</div>

JS:

var $tabs = $( "#tabs" ).tabs({
        spinner: "",
        select: function(event, ui) {                
            var tabID = "#ui-tabs-" + (ui.index + 1);
            $(tabID).html("<div class='alert alert-info'><img src='../assets/img/ajax-loader.gif' alt=''> Loading...</div>");                             
        },
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html(
                "<div class='alert alert-error'>cannot be loaded</div>" );
            });
        },
        load: function(event, ui){
            $.getScript("../assets/js/bootstrap-ajax.js");               
        }
    });
4

1 に答える 1

0

一番下までスクロールしたときにそれ以上ロードしないことにしましたが、考え方は似ています。以下のようなリスト項目（またはdiv）を含むボタンを投稿しています。このボタンは ajax 呼び出しを行い、javascript がコンテンツをタブ本体に追加します。

<div id='loadMoreButtonDiv' class='alert alert-info'>
   <center><strong>
       <a class='loadMoreButton' data-target='#ui-tabs-1' href='/EventController?operation=get_events&begin={newBegin}&count={count}'>Load More</a>
   </strong></center>
</div>

Javascript Part では、クリック ハンドラーに次のコードを追加しました。

$('a.loadMoreButton').on('click', function(event) {
    var $link = $(this);
    var $target = $($link.attr('data-target'));
    $('#loadMoreButtonDiv').remove();
    $target.append("<div id='loadMoreLoadingDiv' class='alert alert-info'><img src='../assets/img/ajax-loader.gif' alt=''> Loading...</div>");
    $.ajax({
        type: 'GET',
        url: $link.attr('href'),

        success: function(data) {
            $target.append(data);
        },
        error: function(){
            $target.notify({
                message: {
                    text: 'Server Connectivity Error!'
                },
                type: 'error'
            }).show(); 
            $(this).attr('disabled',false);    
        }
    });
    $('#loadMoreLoadingDiv').remove();
    event.preventDefault();
});
于 2013-02-13T11:01:45.350 に答える