JQuery UI选项卡中的另一个JQuery组件,带有Ajax页面调用
Another JQuery Component within JQuery UI Tabs with Ajax Page Calls
我目前使用JQuery U选项卡与Ajax页面调用。在页面中,我有一个自定义滚轮,这是正确的工作。我还有一个ajax搜索表,当页面在浏览器中自己加载时,它正在工作,但当它在JQuery UI选项卡内调用时,它就不工作了。
以下是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()从Javascript在page2.html中没有触发。
解决这个问题有什么帮助吗?
我没有任何问题加载搜索功能,因为我创建了一个测试你的代码。但是,由于您没有显示起始页的完整html,您的问题可能是在尝试获取任何其他页面之前还没有加载jQuery。其中有一些错误,如调用tab()
函数3次(和不存在的元素与selector
类)。当你只需要一个有所有选项的时候。我也把heightStyle
改成了content
。不能创建一个jsfiddle演示,因为你有两个html页面,但这里是我的代码,为我工作得很好:
开始页面:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function()
{
$( "#tabs" ).tabs(
{
heightStyle: "content",
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>
</head>
<body>
<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">View Page</div>
</div>
</body>
</html>
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">
$(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>
相关文章:
- Wordpress中带有JQuery Accordion的未定义匿名函数
- jquery Onclick函数带有导致双击的回调排序函数
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 带有jquery插件的backbone.js视图
- 带有select的jquery提交表单不起作用
- jQuery DataTable返回带有数据的PHP脚本
- jQuery - 带有一些数字的表格计算出现奇怪的舍入错误
- jQuery带有文本输入的模态消息
- jQuery:带有文本更改的背景幻灯片
- JQuery:带有路由的Gmap
- jQuery:带有修改的微小轮播 - 覆盖有时为时已晚(小提琴)
- 使用 jQuery :带有下一个/上一个箭头的选定选择器
- jQuery:带有控件的onclick下拉菜单
- Rails 5 with JQuery:带有显示和隐藏JQuery开关的表单最初会显示,但在刷新页面后会像它应该的那样隐
- Jquery -带有转义html的tag属性自动不转义
- jQuery:带有计时器的动态元素
- jquery带有基于索引的单选按钮选择值帮助
- JQuery-3.0带有radius的animate方法在firefox中不起作用
- jQuery – 带有上一个/下一个按钮的简单图像库
- Jquery带有下拉选择器的选项卡选择器,下拉选择器不匹配TAB开关