как заставить ajax использовать сообщение (не получить) и отображать ответ на вкладках jquery?

привет, у меня есть следующий 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>

Возврат ajax из моей программы

{"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;  
        }
      }
    })

    });

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

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

  });