Jquery Tabs AjaxWhile로 내용로드하기

Question

Jquery 탭에서 ajax를 사용하여 컨텐츠를로드 중입니다. 나는 활성 탭의 URL에서 더 많은 콘텐츠를로드하고 목록에 추가하고 페이스 북에 표시하고 싶습니다.

스크롤하고 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> 

는 자바 스크립트 부분에서 나는 클릭 처리기에 다음 추가 :

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