how to force ajax using post (not get) and display

Question

hi i have the follow html and script

<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>

The ajax return from my program is

{"test_element":"test"}

How can i force the jquery tabs using post and the above javascript can't get the response to be displayed in the relative tabs (also alert can not work)

---------------update--------------

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

i still can't make it displays in the tab

----------update 2nd------------

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

    });

----------final fix with help from 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

You can use the beforeLoad callback to do this like

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

Demo: Plunker