게시물을 사용하여 아약스를 강제 실행 (get)하지 않고 jquery 탭에 응답을 표시 하시겠습니까?

Question

안녕 내가 추적의 HTML과 스크립트가

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

    <script> 
    jQuery(function() { 

    jQuery("#tabs").tabs({ 
     /*beforeLoad: function(event, ui){ 
      alert('loading'); 
     }, 
      load: function(event, ui){ 
      alert('loaded'); 
     }*/ 
     ajaxOptions: { 
      dataFilter: function(result){ 
       var data = jQuery.parseJSON(result); 
       alert(data.test_element); 
       return data.test_element; 
      } 
     }, 

     /*beforeLoad: function(event, ui) { 
     ui.jqXHR.error(function() { 
      ui.panel.html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
      "If this wouldn't be a demo."); 
     }); 
     }*/ 
    }); 
    }); 
    </script> 

    <div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Preloaded</a></li> 
    <li><a href="ajax/content1.html">Tab 1</a></li> 
    <li><a href="ajax/content2.html">Tab 2</a></li> 
    <li><a href="productstab/ajax/index">Tab 3 (slow)</a></li> 
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
</div> 

내 프로그램에서 아약스 복귀 내가 포스트를 사용하여 JQuery와 탭을 강제 할 수 있으며 위의 자바 스크립트 응답을 얻을 수있는 방법

{"test_element":"test"} 

입니다 상대 탭에 표시됨 (경고도 작동하지 않음)

--------------- 업데이트 --------------

beforeLoad: function (event, ui) { 
     if (ui.ajaxSettings.url == 'productstab/ajax/index') { 
      ui.ajaxSettings.type = 'post'; 
     } 
     ui.ajaxSettings.dataFilter = function (data, type) { 
      var html = jQuery.parseJSON(data); 
      //alert(data + 'abc'); 
      alert(html.test_element); 
      return html.test_element + ' modified'; 
     } 
    } 

나는 아직도

jQuery(function($){ 

    $('#tabs').tabs({ 
     beforeLoad: function(event, ui) { 
     console.log(ui.ajaxSettings); 
     if(ui.ajaxSettings.url == 'productstab/ajax/index'){ 
      ui.ajaxSettings.type = 'post'; 
     } 
     ui.ajaxSettings.dataFilter = function(data, type){ 
     //alert(data); 
     var temp = data; 
     alert(temp); 
     var data1=jQuery.parseJSON(temp); 
     //alert('data' + data); 
     if(typeof data1 =='object') { 
      alert(data1.test_element + ' element'); 
      //return data1; 
     } else { 
      alert(data + 'modified'); 
      //return data + ' modified'; 
     } 
     //alert(data1); 
      return data; 
     } 
     } 
    }) 

    }); 

탭

---------- 업데이트 2 ------------에 표시 할 수 없습니다 - --------- 아룬의 도움으로 최종 수정

jQuery(function($){ 

    $('#tabs').tabs({ 
     beforeLoad: function(event, ui) { 
     console.log(ui.ajaxSettings); 
     if(ui.ajaxSettings.url == 'productstab/ajax/index'){ 
      ui.ajaxSettings.type = 'post'; 
     } 
     ui.ajaxSettings.dataFilter = function(data, type){ 

     var html = data, 
        obj; 
     try { 
      obj = jQuery.parseJSON(data); 
      html = obj.test_element; 
     } catch (e) {} 
      return html; 
     } 
     } 
    }) 

    }); 

Answer 1

당신은 수행 할 beforeLoad 콜백을 사용할 수 있습니다 ----------이 같은

jQuery(function ($) { 
    $("#tabs").tabs({ 
     beforeLoad: function (event, ui) { 
      if (ui.ajaxSettings.url == 'content2.html') { 
       ui.ajaxSettings.type = 'post'; 
      } 
      ui.ajaxSettings.dataFilter = function (data, type) { 
       return data + ' modified'; 
      } 
     } 
    }); 
}); 

데모 : Plunker