The tabs really look and feel great. I am having trouble understanding the basic functionality of them however and I will readily admit that it is my lack of experience in Javascript and JQuery that are the most likely suspects.
I have created a customer information form which is spread out in between 4 tabs. It looks really great and the basic tab functionality is in place - I even got the toggle opacity stuff working so that it looks nice when switching between tabs.
My problem lies in how and where to access the tab functionality to interact with the form.
The logic chain flows as follows:
page loads first tab is selected(0)
remaining three tabs are disabled(1,2,3)
the user fills out the form (which validates) and clicks the continue button (located in the tab div)
the user is taken to the next tab which is now enabled (as well as the previous one being accessible) where they will fill out the form on this tab, validate, click next and so on
until they get to the last tab which will offer a save/commit button which will write all the form data from each tab into the various mysql database tables.
I can work out the logic and code behind validating and posting to the database and all that - it I just am lost when it comes to accessing the tab elements, where to put code and in what syntax.
So this seems like it should get the currently selected tab index, enable the next tab and display it. Obviously it doesn't and I apologize for the likely stupidity demonstrated.
$(document).ready(function(){
$("#tabs").tabs({
fx: { height: 'toggle', opacity: 'toggle' },
});
var $tabs = $('#tabs').tabs();
$('button').click(function() { //
var selected = $tabs.tabs('option', 'selected'); //get current tab
var nextTab= selected+1;
$('#tabs').tabs('option', 'enable', [nextTab]);
$tabs.tabs('select',selected+1); // switch to next tab
return false;
})
});
gives a great demo of what I am trying to do but without loading external hmtl pages inside the tabs - I already have the divs for each tab with form elements all within the same page. I am trying to pick the demo apart but it seems to be outdated in terms of syntax? I don't know - I am confused here.
ANYway, thanks for wading through this - any thoughts, suggestions, or what not would be really helpful.
also I am getting: jQuery UI Tabs: Mismatching fragment identifier.