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