Post data JQuery UI Tabs 1.10

Question

I just switched from JQ UI 1.8.23 to 1.10. As for this version, ajaxOptions is deprecated and now ui.ajaxSettings is used instead.

This is how my code looked like:

$( "#tabs" ).tabs({
        ajaxOptions: {
            type : 'POST',
            data : 'format=html',
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo. " );
            },
            success: function() { 
                *Something in here*
            }
        }
    });

everything worked just fine. Now the new code:

$( "#tabs" ).tabs({
         beforeLoad: function( event, ui ) {
             ui.ajaxSettings.type = 'POST';
             ui.ajaxSettings.data = 'format=html';
             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." );
                });  
             ui.jqXHR.success(function(){
*something in here*
                });
        }
    });

So I need to post this data format=html to my server but with the new Version my post variables sent to the server are empty. Nothing is sent to the server. Also, if I want to get the POST-variables in my php script the array is empty. I am using ZEND btw. I need to send it via POST - there is no way around it.

Thanks for your help

Answer 1

If you look at the source for jQuery.ajax, on line 486 you will see it add the data to the url. Then on line 532 it calls the beforeSend method, which is what triggers the beforeLoad event in jQuery UI tabs.

So all you need to do is modify the url rather than data:

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.ajaxSettings.type = 'POST';
        ui.ajaxSettings.url += ( /\?/.test( ui.ajaxSettings.url ) ? "&" : "?" ) + 'format=html';
        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." );
        });  
        ui.jqXHR.success(function(){
            *something in here*
        });
    }
});

Answer 2

I've the same problem. I have tested this :

ui.ajaxSettings.url += ( /\?/.test( ui.ajaxSettings.url ) ? "&" : "?" ) + 'format=html';

But it's a GET type not a POST.

I have tried :

ui.ajaxSettings.format = 'html';

But it wasnt any variable in the post.

So I have tried:

 ui.ajaxSettings.data = { format:'html' };

No Variable anymore in the post.