Как заставить ajax использовать сообщение (не получить) и отобразить ответ на вкладках 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> 

Аякса возвращения из моей программы

{"test_element":"test"} 

Как я могу заставить вкладки Jquery с помощью поста и выше Javascript не может получить ответ для отображения на соответствующих вкладках (также предупреждение не может работать)

--------------- обновление --------------

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'; 
     } 
    } 

я до сих пор не может сделать это отображается на вкладке

---------- обновление 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){ 
     //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; 
     } 
     } 
    }) 

    }); 

- --------- окончательное исправление с помощью Arun ----------

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