Can't execute javascript inside ajax loaded div

Question

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.

score 1 · Answer 1 · answered May 27 '11 at 08:41

1

Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back

answered May 27 '11 at 08:41

Sujit Agarwal

12,348
11
48
79

1

I know this is an old question/answer, but `.live()` was deprecated on jQuery 1.7, around half year after your answer, and it was definitely removed on 1.9. Use `.on()` instead. – Pere Nov 13 '14 at 15:59

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

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

edited May 23 '17 at 12:04

Community

1
1

answered May 29 '11 at 19:06

brunn

1,323
2
17
37

Can't execute javascript inside ajax loaded div

2 Answers2