CODEWITHSUNDEEP
ajaxjquery-ui-tabs
driechel
driechel

Reputation: 3453

Jquery tab: open tab after ajax succes

I have a form that extends over multiple tabs. When a user clicks the next tab, the form is validated only when all fields are filled in correct the user van go to the next tab. So far so good. I also want to store the field in a cookie or database (not sure yet). I do this with an ajax call to a php controller. This works fine as well, but the next tab opens immediately. I would like to first wait for a success callback and only then open the next tab. I just don't seem to get it working. Part of my code in select event of the tabs:

$.ajax({
  type: 'POST',
  url: 'saveorder/save_tab',
  data: {data : tabData},
  success: function(msg) {
     $('#tabs').tabs('option', 'select',2); 
    },
  dataType: 'json'
});
return false

This will obviously prevent the next tab from showing but after the ajax request is successfull nothing happens. Anyone an idea?

Upvotes: 1

Views: 1068

Answers (1)

Kabilan S
Kabilan S

Reputation: 1094

Try this code :)

$.ajax({
  type: 'POST',
  url: 'saveorder/save_tab',
  dataType: 'json',
  data: {data : tabData},
  success: function(msg) {
     $("#tabs").tabs({ selected:2});
    },
  error: function(msg) {
     $("#tabs").tabs({ selected:1}); //load ur previous tab itself if returns error..
    }

});

Upvotes: 1

Related Questions