Search code examples
javascriptjquery-tabs

Can't execute javascript inside ajax loaded div


I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.

With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:

<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $(function(){
            $("#accordion").accordion({
                active: false,
                autoHeight: false,
                collapsible: true
            });
        });

    $("#vtabs5").jVertTabs({
        equalHeights: true
    });
    // add click events for open tab buttons
    $("input[id^=openTab]").each(function(index){
        $(this).click(function(){
            openTab("#vtabs6",index);
            return false;
        });
    }); 
    function openTab(tabId,index){
        $(tabId).jVertTabs('selected',index);
    }
});

I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.

I appreciate any input.


Solution

  • Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)