我目前使用Ajax页面调用来使用JQuery U选项卡。在页面内,我有一个自定义滚动工作正常。我也有一个ajax搜索表,当页面在浏览器中自行加载时工作,但不在JQuery UI选项卡中调用。Ajax页面调用的JQuery UI选项卡中的另一个JQuery组件
以下是JQuery UI选项卡的代码。
JavaScript调用
<script>
$(function() {
// getter
var heightStyle = $(".selector").tabs("option", "heightStyle");
// setter
$(".selector").tabs("option", "heightStyle", "fill");
$("#tabs").tabs({
beforeLoad: function(event, ui) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
});
}
});
});
</script>
HTML:
<div id="tabs">
<ul>
<li><a href="#tabs-1">View</a></li>
<li><a href="page2.html">Add</a></li>
<li><a href="page3.html">Modify</a></li>
</ul>
<div id="tabs-1">
</div>
</div>
以下是page2.html中的代码:
<div class="tables">
<div id="content_3" class="content">
<div class="search">
<div class="searchtitle">Search</div>
<label for="search"><input type="text" id="search"/></label>
</div>
<table id="tblData" class="target">
<tbody>
<tr>
<th width="110px">Course</th>
<th width="92px">Group</th>
<th width="204px">Period</th>
<th width="81px">Room</th>
<th width="117px">Actions</th>
</tr>
<tr>
<td class="odd">Unit 1</td>
<td class="odd">Group 2</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">Room 1</td>
<td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
<tr>
<td class="even">Unit#</td>
<td class="even">###</td>
<td class="even">00-00-00 - 00-00-00 </td>
<td class="even">Room 2</td>
<td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
<tr>
<td class="odd">Unit#</td>
<td class="odd">###</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">###</td>
<td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}
</script>
我怀疑它的的$(document) .ready(function() from page2.html中的Javascript不是射击。
解决此问题的任何帮助?
相关答案 - http://stackoverflow.com/questions/16068506/ajax-tabs-setup-not-working-on-localhost-easytabs/16112785#16112785 – apaul 2013-04-23 01:30:58
嗨apaul34208 - 这是不一样的问题,即使使用不同的jQuery组件。 为了完成上述工作,需要从我的结尾改变什么? – 2013-04-23 07:28:49