5

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

2
  • 1
    Did you solve this ? I have searched and there seems to be no resolution. Looks like the UI-Tabs design has an important feature - the ability to add post-data - left out ! Apr 7, 2013 at 21:59
  • 1
    bugs.jqueryui.com/ticket/8673
    – damko
    Apr 16, 2013 at 17:52

3 Answers 3

3

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

1
  • The data will need to be processed prior to the beforeLoad. From the API documentation: Note: Although ui.ajaxSettings is provided and can be modified, some of these settings have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax(). Jan 16, 2014 at 3:38
1

Thank you Christian Seifert for posting the question and PetersenDidIt for the nice answer! Here is my ajax implementation of the same problem, hope this code snippet will help someone out there!

    $("#tabs").tabs({
        beforeLoad: function(event, ui) {
            var url = window.location.protocol + "//" + window.location.hostname + "/ajax";
            var data = {name: "job", value: "Rock Star"};

            ui.ajaxSettings.type = 'GET';
            ui.ajaxSettings.url = url  + "?" + $.param(data, false);

            //console.log(ui.ajaxSettings.url);
            ui.jqXHR.fail(function() {
                ui.panel.html('Couldn't load this tab!');
            });
        }
    });

Also, pay attention what jqXHR methods you are overwriting, latest Jquery UI (ver. 1.11.4) does not use depreciated methods anymore.

https://github.com/scottgonzalez/jquery-ui/commit/e3f94a87dc312c2225e9ebe7231d868820bd6150

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.