0

リモート ソースからのコンテンツを表示する一連のタブがあります。最終結果は、ユーザーが入力してボタンをクリックすると、次のタブに移動する一連のフォームが各タブに表示されます。フォーカスのあるタブのみが有効になり、他のすべてのタブは無効になります。これらすべてを実行するための基本的な機能はありますが、リモート HTML ページで動作する前と次のボタンに問題があります。基本的なコントロールが機能するフィドルのセットアップがありますが、リモートページ呼び出しはありません。

JSFiddle

親ページの HTML:

 <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>

タブ スクリプト: これがデータの読み込み方法です

<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>

これはパート 2 です。

SERVLET からデータを取得し、そのデータを各フォームのタブの子ページに入力する必要があります。これまでのところ、タブに対して正しい機能が動作しています。ここで準動作例を見ることができます - JSFiddle - リモートで呼び出されているため、タブの内容を表示できません。TAB コントロールの JAVASCRIPT は次のとおりです。

$(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]);
    });

});

すべての HTML は同じままです。各ボタンの AJAX 呼び出しを配置する方法と場所を知る必要があります。私はそれが次のようになることを知っています：

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

タブの代わりにアコーディオンを使用した以前のプロジェクトの SERVLET セットアップを既に持っているので、プロセスがほぼ同じであることはわかっています。しかし、アコーディオンの設定はタブとは大きく異なります。他に何か見る必要がある場合はお知らせください。

4

1 に答える 1

1

click() 関数を定義するときにボタンが DOM に存在しないことが問題である可能性があります。

クリック イベントを委任してみてください。

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

これにより、DOM が最初にロードされた後にボタンを追加できます。

于 2012-10-10T16:12:08.637 に答える