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

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 ! — user1055761
– user1055761, Commented Apr 7, 2013 at 21:59

PetersenDidIt · Accepted Answer · 2013-01-23 13:39:32Z

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

answered Jan 23, 2013 at 13:39

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MikroDel · Accepted Answer · 2013-02-19 10:57:29Z

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.

edited Feb 19, 2013 at 10:57

MikroDel

6,7297 gold badges44 silver badges76 bronze badges

answered Feb 19, 2013 at 10:35

GT Online

211 bronze badge

1 Comment

Tony Carbone Over a year ago

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().

Barmaley · Accepted Answer · 2015-08-19 18:12:38Z

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

Collectives™ on Stack Overflow

Post data JQuery UI Tabs 1.10

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related