Question

我在Jquery选项卡中使用ajax加载内容。我想从活动标签的网址加载更多内容，并将其附加到列表中，并在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");               
        }
    });

Answer 1

我决定在滚动到底部时不加载更多，但是这个想法是相似的。我只是回发一个带有列表项（或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();
});

Jquery选项卡使用AjaxWhile滚动加载内容

1 个答案: