added div does not recognize jquery function

Posted by zurna on Stack Overflow See other posts from Stack Overflow or by zurna
Published on 2010-04-03T04:23:06Z Indexed on 2010/04/03 4:33 UTC
Read the original article Hit count: 368

Filed under:

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>

© Stack Overflow or respective owner

Related posts about jQuery