Question

I have a series of tabs that are displaying content from a remote source. The end result will be a series of forms in each tab that when the user fills out and clicks the button will take them to the next tab. Only the tab with focus will be enabled and all the other tabs will be disabled. I have the basic function for all of this to occur – however, I am having trouble with the previous and next buttons working with the remote HTML pages. I have a Fiddle setup with the basic controls working – but without the remote page calls.

JSFiddle

HTML for parent page:

 <div id="tabs">
  <ul>
            <li><a href="#tabs-1">General Information</a></li>
            <li><a href="#tabs-2">Phone Information</a></li>
            <li><a href="#tabs-3">Emergency Contact Information</a></li>
            <li><a href="#tabs-4">Job Related Information</a></li>
            <li><a href="#tabs-5">Miscellaneous Information</a></li>
  </ul>


<div id="tab-content">
        <div id="tabs-1">
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div> 
        <div id="tabs-4">
        </div>        
        <div id="tabs-5">
        </div>  
 </div>            

Tab Script: This is how I load the data

<script>
    $('#tabs-1').load('nes/data/EmployeeGenInfo.htm');
    $('#tabs-2').load('nes/data/EmployeePhoneInfo.htm');
    $('#tabs-3').load('nes/data/EmployeeEmergInfo.htm');
    $('#tabs-4').load('nes/data/EmployeeJobInfo.htm');
    $('#tabs-5').load('nes/data/EmployeeMiscInfo.htm');
</script>

This is PART TWO:

I need to GET data from a SERVLET and have that data populate the child page in the tabs for each form. Thus far I have the correct functions working for the tabs – you can see a quasi working example here – JSFiddle – the tab content can’t be shown since it is being called remotely. Here is the JAVASCRIPT for the TAB controls:

$(function() {

    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});

    var $emptabs = $('#tabs').tabs();

    $('#tabs').on('click', '#submit1', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
    });

    $('#tabs').on('click', '#submit2', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,3,4,5]);
    });

    $('#tabs').on('click', '#submit3', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,4,5]);
    });

    $('#tabs').on('click', '#submit4', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,5]);
    });

    $('#tabs').on('click', '#submit5', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4]);
    });

        $('#tabs').on('click', '#reset', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected-5);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4,5]);
    });

});

All the HTML is still the same. I need to know how and where to put my AJAX calls for each button. I know it’s going to look something like this:

var v = $("#form1").validate({
        submitHandler: function() { 
             $.ajax({
                        type:"post",
                        url:"ActionServlet",
                        data:'JSON',
                        success: function(response){
                            alert("FORM SHOULD SUBMIT HERE");
                        // Change only the header of the file.
                    if (v2.form()) {
                        $emptabs.tabs('select', selected+1);
                        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                        }
                    }
            });

I already have a SERVLET setup from a previous project that used Accordions instead of tabs, so I know the process is pretty much the same. But the Accordions are set up much differently than the tabs. Let me know if you need to see anything else.

Answer 1

The problem could be that your buttons don’t exist in the DOM when you define the click() functions.

Try delegating the click events:

$('#myTabs').on('click', '#finish1', function() {
    etc.

This allows the buttons to be added after the DOM is initially loaded.