added div does not recognize jquery function
- by zurna
I pull categories of one section from a XML. Problem is, pulled categories need to recognize tab plugin but they do not recognize it. I am not sure if I made sense, please let me know if I didnt make any sense. I will try to explain it again. :)
$.ajax({
dataType: "xml",
url: "/FLPM/content/home/index.cs.asp?Process=ViewVCategories",
success: function(xml) {
$(xml).find('row').each(function(){
var id = $(this).attr('id');
var CategoryName = $(this).find('CategoryName').text();
$("<div class='tab fleft'><a href='#'>"+ CategoryName + "</a></div>").appendTo("#VCategories");
});
}
});
$("div.row-title").tabs("div.panes > div", {effect: 'ajax'}, function(i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// load it with a page specified in the tab's href attribute
pane.html('<img src="http://www.refinethetaste.com/html/cp/images/loading.gif" alt="Loading..." />')
.load(this.getTabs().eq(i).attr("href"));
});
pulled categories displayed here:
<div class="row-title clear" id="VCategories">
categories xml
<rows>
-
<row id="1">
<CategoryName>Nation</CategoryName>
</row>
-
<row id="2">
<CategoryName>Politics</CategoryName>
</row>
-
<row id="3">
<CategoryName>Health</CategoryName>
</row>
-
<row id="4">
<CategoryName>Business</CategoryName>
</row>
-
<row id="5">
<CategoryName>Culture</CategoryName>
</row>
</rows>
</div>
