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 部分中，我在点击处理程序上添加了以下内容：

$('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 回答