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);
}
});
});
});
tabs.php :
<!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のsuccess関数に入れてみましたがだめでした。tab.php にも入れましたが、どちらも役に立ちませんでした。他に何をすればいいのかわからない?!
最初のステートメントをどこに置いたかに基づいて、次のようなさまざまなエラーが発生します。
「キャッチされないエラー: 初期化前にタブでメソッドを呼び出すことはできません。メソッド 'div.panes > div' を呼び出そうとしました」
または「Uncaught TypeError: Object [object Object] has no method 'tabs'」
ありがとう