更新 2:
より単純なスクリプトの場合、jquery live を使用して、動的に作成された dom を操作します。それがここの問題ですか？
更新 1:
ajax をセクションget_tab_frame.aspxの外に移動しようとしましたが、$("#tabs").tabs({奇妙な結果が得られました。つまり、タブの内容がなく、書式設定されていないタブ名が返されるだけです。次に、これらのフォーマットされていないタブをクリックして、タブの内容を表示する代わりに新しいウィンドウを開きます。
元の質問:
次のスクリプトはうまく機能します。これは、3 つのタブを作成tabs.aspxし、クエリ文字列に基づいて各タブのコンテンツを取得するだけtabです。
<!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">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {
success: function(){
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.end()
.find( ".portlet-content" );
$(".column").disableSelection();
}
}
});
});
</script>
<style type="text/css">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
<li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
<li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
</ul>
</div>
</body>
</html>
次のスクリプトを使用して、コンテンツをデータベース生成し、id="tabs"jquery を使用して、生成された html を div タブに挿入しようとしています。id="tabs"
<!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">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {
success: function(){
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.end()
.find( ".portlet-content" );
$.ajax({
url: 'get_tab_frame.aspx?rand=' + Math.random(),
type: 'GET',
error: function(xhr, status, error)
{
alert(status);
alert(xhr.responseText);
},
success: function(results)
{
$("#tabs").empty().html(results);
}
});
$(".column").disableSelection();
}
}
});
});
</script>
<style type="text/css">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id="tabs"> </div>
</body>
</html>
これは何らかの理由で機能しません。get_tab_frame.aspxまったく同じhtmlを生成しても、空白の画面が表示されます。
<ul>
<li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
<li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
<li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
</ul>
私は何を間違っていますか、どうすればこれを機能させることができますか?