JSON 인코딩 된 AJAX 컨텐츠를 jQuery UI 탭에로드

Question

웹 애플 리케이션의 모든 AJAX 호출에서 JSON 인코딩 컨텐츠를 받기를 원합니다. 대부분의 장소에서이 작업이 이미 완료되어 (예 : 모달) 잘 작동합니다.

그러나 jQueryUI의 탭 (http://jqueryui.com/demos/tabs/)과 해당 ajax 기능을 사용하는 경우 일반 텍스트 HTML 만 반환 할 수 있습니다 (예 : 아래 태그에 지정된 URL). 각 탭의 클릭에서 지정된 URL에서 JSON 인코딩 된 데이터를 수신하고 해당 JSON의 .content 인덱스를로드한다는 탭 기능을 얻으려면 어떻게해야합니까?

$(function() { 
    $('div#myTabs').tabs();  
}); 

<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
     <li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li> 
    </ul> 
</div> 

Answer 1

당신은 당신이 탭의 패널에 삽입 할 HTML로 JSON 응답을 변환 할 아약스 호출의 DataFilter를 옵션을 사용할 수 있습니다. 이 같은

뭔가 :

$('#mytabs').tabs({ 
    ajaxOptions: { 
     dataFilter: function(result){ 
      var data = $.parseJSON(result); 
      return data.myhtml; 
     } 
    }, 
}); 

당신이 만약 JSON 응답이처럼 보였다 :

{"myhtml":"<h1>hello<\/h1>"} 

Answer 2

내가 추가했다 :

this.dataTypes=['html'] 

는이 작업을 얻을 수 있습니다. 맥락에서

는 :

 ,ajaxOptions: { 
    dataFilter: function(result,type){ 
     var data = $.parseJSON(result); 
     // Trick jquery to think that it's html 
     this.dataTypes=['html'] 
     return '<p>'+data.credential.id+'</p>'; 
    } 
    ,error: function(xhr, status, index, anchor) { 
     $(anchor.hash).html(i18n.AJAXError + ' (' + status + ')'); 
    } 
    } 

Answer 3

내가 그렇게 단지의 경우 사람이 최근 문제가 이런 종류의 도움을 찾고있다, 최근이 문제와 붙어있어, 나는 그것이 유용 다시 열 것이라고 생각 이 토론. jQuery 1.8.2 및 jQuery UI 1.9.2를 사용하고 있습니다. 최신 버전의 jQuery UI에서이 작업을 수행하는 가장 좋은 방법은 beforeLoad 이벤트 핸들러에서 false을 반환하고 해당 탭에 지정된 URL로 getJSON 요청을 보내는 것입니다.

HTML 마크 업 :

<div id="tabs"> 

     <ul> 
      <li><a href="/json/tab1.json">Tab 1</a></li> 
      <li><a href="/json/tab2.json">Tab 2</a></li> 
      <li><a href="/json/tab3.json">Tab 3</a></li> 
     </ul> 

    <div> 

탭 호출 코드 :

$(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function (event, ui) { 
       var url = ui.ajaxSettings.url; 
       $.getJSON(url, function (data) { 
        ui.panel.html(data.text); 
       }); 
       return false; 
      } 
     }); 
    }); 

beforeLoad 핸들러가 false를 돌려의에 정의 된 URL에서 검색 한 HTML을 표시하는 정상 기능 탭이 비활성화됩니다. 그러나 beforeLoad 처리기로 전달 된 event 및 ui 개체에 계속 액세스 할 수 있습니다. 당신은이 구문 ui.ajaxSettings.url으로 탭에서 URL을 얻고 Content via Ajax 예에서와 같이 다음 getJSON 요청에 의해 반환 된 데이터를 표시 : 내 경우

ui.panel.html(data.text); 

, 그것은 data.text json으로하기 때문에이 검색하는거야있어 header과 text의 두 가지 속성이 있습니다.