UPDATE 2:
For simpler scripts, you would use jquery live to work with dynamically created dom. Is that what the problem is here?
UPDATE 1:
I have tried moving the ajax for get_tab_frame.aspx out of the $("#tabs").tabs({ section, which gives strange results, i.e. it will just return the tab names unformatted without the tab contents. Then clicking on these unformatting tabs, just open a new windows instead of showing the tab content.
ORIGINAL QUESTION:
The following script works well, which simply creates 3 tabs and gets the content of each tab from tabs.aspx based on the query string 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>
I am now trying to database generate the content of id="tabs" and use jquery to insert the generated html into the id="tabs" div tab using the following script:
<!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>
This is not working for some reason. I just get a blank screen even though get_tab_frame.aspx produces exactly the same html i.e.
<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>
What am I doing wrong and how do I get this to work?
http://jsfiddle.net/niklasvh/3RpC8/