jquery UI 탭에서 새로 추가 된 탭에 동적으로 생성 된 ajax 컨텐츠를 추가하는 방법은 무엇입니까?

난 사이드 패널에 다음과 같은 형태의 테이블을 가지고jquery UI 탭에서 새로 추가 된 탭에 동적으로 생성 된 ajax 컨텐츠를 추가하는 방법은 무엇입니까?

<table> 
<tr title='term1'><td>one</td></tr> 
<tr title='term2'><td>two</td></tr> 
<tr title='term3'><td>three</td></tr> 
<tr title='term4'><td>four</td></tr> 
</table>

누군가가 그 열의 행을 클릭하면, 그 행의 제목은 검색을 표시하는 함수의 인수로서 건네 메인 패널에 나타납니다.

$("#content-display").on('click', 'tr', function(){  
    searchResults($(this).attr('title'));   
});

해당 행의 제목은 GET 요청

function searchResults(searchTerm){  
    $.ajax({ 
     url: "search.php", 
     data: {term: searchTerm}, 
     success: function(data){  
      $("#content-display").html(data); 
     }, 
     dataType: 'html' 
    });  
}

누군가가 테이블의 행을 클릭 할 때마다 사용되는 검색 용어, 새로운 검색 결과가 #content-display 사업부에서 이전을 대체합니다.

jquery 사용자 인터페이스를 사용하여이 기능을 향상 시키려면 <tr> 요소를 클릭 할 때마다 새로운 검색이 수행 될 때마다 기존 검색 결과를 바꾸는 대신 해당 검색 결과가 포함 된 새 탭이 만들어집니다.

어떻게 동적으로 생성 된 검색 쿼리 (search.php? term = dynamicString)의 내용을 추가 할 수 있도록 추가 이벤트에 콜백 함수를 작성할 수 있습니까?

var $tabs = $("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    add: function (event, ui){ 
     var tab_content = "testing"; 
     $(ui.panel).append(tab_content);      
    } 
});

출처

2012-02-17 user784637

당신이 시도 할 수 있습니다 :

여기에 정적 콘텐츠를 추가하는 추가 이벤트에 콜백 함수의 일부 샘플 코드입니다.

jQuery UI 탭에서는 동적으로 새 탭을 추가 할 수 있습니다 (이미이 코드를 추가 했음). 나는 우리가 그 탭을 클릭 할 때 그것은 "firlename.php"의 내용을로드 할이

$("#tabs").tabs("add", "filename.php", "Search Heading");

을 할 경우

그것은 "추가"제공 방법은, 그래서

AJAX

을 사용하여 새 항목을 추가 할 수 있습니다.

또한 자바 스크립트를 사용하여 탭을 선택할 수 있습니다.

$('#tabs').tabs('select', tab_index);

지정된 색인이있는 탭을 선택합니다.

귀하의 경우에는이 둘이 잘 맞을 것으로 가정합니다.

예제 코드는 다음과 같습니다

$("#tabs").tabs("add", "search.php?term=" + search_var, search_var); 
$('#tabs').tabs('select', last_index);

당신은 그냥 콘솔에 다음 코드를 추가 URL을 http://jqueryui.com/demos/tabs/manipulation.html 로 이동하여 Google 크롬 개발자 도구 '콘솔에서이 작업을 시도 할 수 있습니다.

$("#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);

제가 누락 된 항목이 있으면 알려주십시오.

친구가있는 경우 더 나은 해결책을 제안하십시오.

감사합니다.

출처

2012-02-17 05:31:27

jquery UI 탭에서 새로 추가 된 탭에 동적으로 생성 된 ajax 컨텐츠를 추가하는 방법은 무엇입니까?

답변

관련 문제