我有一个主页面,它使用ajax加载名为"Wrapper"的div中的内容。
现在,我在以这种方式加载jquery UI选项卡时遇到了一个问题。如果我忽略使用AJAX,我可以加载并显示它们。但是当使用ajax时,只显示选项卡,而不显示窗格!我已经阅读了关于这个问题的所有主题,但它们并没有解决我的问题。
JQuery代码为:
$(function(){
$('#link').live('click',function(){
$.ajax({
url: "tabs.php",
success: function(response)
{
$("#Wrapper").html(response);
console.log(response);
}
});
});
});
选项卡.pp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa-ir" lang="fa-ir">
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<style>
div.panes div h2
{
margin:5px 0 15px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
<style type="text/css">
div.panes div
{
-background:#fff;
height:auto;
}
div.panes label
{
margin-bottom:15px;
display:block;
}
label.error
{
color:red;
}
body
{
background-color:#d4d6da;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/syntax.css"/>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
</head>
<body>
<table style="width:100%;height:auto;border:1px dashed blue;" >
<tr>
<td align="center">
<div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li><a href="#" class="outerStyle">1- File upload</a></li>
<li><a href="#" class="outerStyle">2- Proj explanation</a></li>
</ul>
<!-- form and panes -->
<form action="projects-regEN.php" method="post" enctype="multipart/form-data">
<div class="panes" style="font-family:tahoma">
<div style="border:1px solid #1c94c4;" id="tabs-1">
<table id="projINFO" style="width:100%">
<tr>
<td>
<span class="innerStyle">Title</span>
</td>
<td>
<input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
</td>
</tr>
<tr>
<td style="width:31%" >
<span class="innerStyle">Proj Upload</span>
</td>
<td style="width:30%">
<input type="file" id="projectUpload" name="projectUpload"/>
</td>
</tr>
</table>
<br/>
<input type="button" class="next" id="next" name="continue"/>
</div>
<div style="border:1px solid #1c94c4;" id="tabs-2">
<table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
<tr>
<th>
title
</th>
</tr>
<tr>
<td id="firstCol"></td>
</tr>
</table>
<br/>
<span class="innerStyle">explanation</span>
<textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
<input type="submit" id="submitproj" name="done"/>
</div>
</div>
</form>
</div>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(function(){
var wizard = $("#wizard_tabs");
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index)
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if (index > 0 && (projUp==''|| projTi=='' ))
{
$("#projectUpload").parent().addClass("error");
return false;
}
$("#projectUpload").parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
$(".next", wizard).click(function()
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if(projUp!='' && projTi!='')
api.next();
});
});
</script>
</td>
</tr>
</table>
</body>
</html>
使用我读过的论文,我尝试初始化:
$("ul.tabs").tabs("div.panes <> div");
我把它放在ajax的成功函数中,但它没有帮助。我也把它放在tabs.php中,但都没有帮助。我不知道还能做什么?!
根据我最初的陈述,它给了我不同的错误,比如:
"未捕获错误:初始化前无法调用选项卡上的方法;尝试调用方法'div.panes>div'"
或"未捕获类型错误:对象[Object Object]没有方法'tabs'"
感谢
您的代码中似乎有一个小错误(尽管可能是问题的拼写错误):<>应该简单地为>。此外,您是否包含了选项卡工作所需的所有js文件?第二个错误表示可能缺少所需的JS文件/类。
例如,您可能包含了jquery库,但您包含了工具吗?
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>