How to get ajax to use post (not receive) and display response on jquery tabs?

Question

Hi, I have the following 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> 

Return ajax from my program

 {"test_element":"test"} 

How can I make jquery tabs use mail, and the above javascript cannot get the answer that will be displayed on the corresponding tabs (also the warning cannot 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 cannot display it on 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 using 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 beforeLoad callback to do this, e.g.

 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