1

ユーザーが各フォームの送信ボタンをクリックするまで、各タブのコンテンツを一度に1つずつロードする必要があります。

これは何度か対処されていることは知っていますが、タブにコンテンツをロードする方法に対する具体的な答えが見つかりません。だからここに行く：

親ページのHTML

<!--Content Area -->
<div id="tab-container">
<!--Tabs Area -->
<div id="tabs">
    <ul>
                <li><a href="#tabs-1">PAGE1</a></li>
                <li><a href="#tabs-2">PAGE2</a></li>
                <li><a href="#tabs-3">PAGE3</a></li>
                <li><a href="#tabs-4">PAGE4</a></li>
                <li><a href="#tabs-5">PAGE5</a></li>
                <li><a href="#tabs-6">PAGE6</a></li>
    </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <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 id="tabs-6">
            </div>  
    </div>            
</div>
<!--End Tabs Content Area-->
</div>
<!--End Content Area-->
</div>

JAVASCRIPT

$(function() {

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

)};

        $('#tabs-1').load('data/PAGE1.htm');
        $('#tabs-2').load('data/PAGE2.htm');
        $('#tabs-3').load('data/PAGE3.htm');
        $('#tabs-4').load('data/PAGE4.htm');
        $('#tabs-5').load('data/PAGE5.htm');
        $('#tabs-6').load('data/PAGE6.htm');

フォーム付きの子供用ページ

JAVASCRIPT

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST", 
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {
                var $emptabs = $('#tabs').tabs();
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                $("h2").html(data);
            }

        });
    });
});
4

1 に答える 1

2

さて、私はこれに対する解決策を見つけました、そしてそれをあなた方全員と共有します。これは実際には-他の人がやっているのを見たことから-これを行うためのはるかに簡単な方法です。

要約すると、各タブにはフォームがあり、フォーカスのあるタブのみが有効になっています。他のすべてのタブは無効になっています。データが受信されたことを確認するためにフォームが送信されるたびにサーバーからのコールバックがあり、受信した情報を示すメッセージが表示されます-これは、重複する情報がデータベースに送信されないようにするためですが、情報が追加されることはありませんこの時点でのデータベース。プロセスの最後に、データベースに最終的に含めるためにすべてのフォームを送信する最終送信ボタンがあります。

すべてのページを同時にロードするのではなく、一度に1ページをロードしようとするまで、これはすべて正常に機能しました。親ページが読み込まれてから最初のタブのコンテンツが表示されるまでに深刻な遅延がありました。これがすべての始まりです。何らかの理由で、HTMLで機能するソリューションはJSPでは機能しませんでしたが、最終的に両方で機能する次のソリューションを思いつきました。

親ページ-

JAVASCRIPT-HEADタグのページのトップ

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

HTML

<!--Tabs Area -->
    <div id="tabs">
        <ul>
                <li><a href="#tabs-1">Personal</a></li>
                <li><a href="#tabs-2">Emergency</a></li>
                <li><a href="#tabs-3">Job Related</a></li>
                <li><a href="#tabs-4">Salary</a></li>
                <li><a href="#tabs-5">Miscellaneous</a></li>
                <li><a href="#tabs-6">Dependents</a></li>
        </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <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 id="tabs-6">
            </div> 
        </div>           
    </div>
<!--End Tabs Content Area-->

JAVASCRIPT-ページの下部はタブコードの後に​​ある必要があります

 $('#tabs-1').load('tabeedata/EmployeeGenInfo.htm');

子ページのコードは次のとおりです-フォームのあるページ。

JAVASCRIPT-

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST",
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {       
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $('#tabs-2').load('tabeedata/EmployeeEmergInfo.htm');
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);   
                $("h2").html(data);
            }     
        });
    });
});

アダムスによって提案されたように

$('#tabs-1').load('page.htm');

サクセスハンドラー内では、個人を取り除くまで機能しません

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

次のように、親ページで呼び出してグローバル呼び出しを行いました。

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

その後、送信ボタンで各ページを呼び出すことができました。

于 2012-10-30T16:19:01.257 に答える