ОБНОВЛЕНИЕ 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-кода во вкладку id="tabs"
div, используя следующий скрипт:
<!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>
Что я делаю не так и как заставить это работать?