0

jQuery UI タブを使用しています。2 番目のタブは、最初のタブにあるテキスト フィールドの値に基づいて動的に読み込まれます。これも機能しています。しかし、最初のタブに戻ろうとすると、このエラーが発生します

オブジェクトはこのプロパティまたはメソッドをサポートしていません

私のコードはここにあります

$('#tabs').tabs({
    select: function() {
        $(this).tabs("option", { 
            ajaxOptions: {
                cache:false,
                data: { emp_id: $('#emp_id').val() } 
            } 
        });
    }
});

HTML

<div id="tabs" style="overflow: scroll">
    <ul>
        <li><a href="#tabs-1">Add/Remove</a></li>
        <li><a href="#tabs-2">Update</a></li>
        <li><a id="tab_upd" href="<%=path%>/development/hr_upd.jsp"><span>Test</span></a></li>
    </ul>
    <div id="tabs-1">
        <fieldset>
            <legend style="margin-left:35%"><b><h3>HR</h3></b></legend><br/>
            <form name="hr" id="hr" method="post">
                <table border="0" align="center" width="300" bgcolor=white>
                    <tr>
                        <td>Employee ID </td>
                        <td><input type="text"  name="emp_id" id="emp_id"/></td>
                    </tr>
                    </tr>
                </table><br/>
            </form>
        </fieldset>
    </div>
    <div id="tabs-2">TAB 2</div>
</div>

したがって、3 番目のタブは ajax で読み込まれ、サーバー側のファイルはhr_upd.jsp. すべてが順調で、ファイルは渡されたパラメーターとともにタブ 2 にロードされます。唯一のことは、ajaxタブも1回クリックした後、タブを切り替えることができないことです。

感謝と敬意

K guyz ajax オプションはタブ 2 が選択されている場合にのみ実装されるように、編集を行ったので、if 条件を指定すると、そのタブから抜け出すことができました (2-ajax が読み込まれました)。問題は、再びタブ 2 に戻ることができなかったことです。:)。スクリプトは以下

$("#tabs").tabs({
        select: function(event, ui) {
       //    alert(ui.index);
           if(ui.index==2)
               {
                   $( "#tabs" ).tabs( "option", "ajaxOptions", { data: { emp_id: $('#emp_id').val() }} );
                   return true;
               }    
        }
    }); 
4

0 に答える 0