Question

63

JavaScript not working inside AJAX loaded DIV

rated 0 times [ 69] [ 6] / answers: 1 / hits: 30033 / 14 Years ago, sat, december 18, 2010, 12:00:00

I am having a problem getting the javascript code to work inside an AJAX loaded div, I am trying to include jquery tabs but it not working, the ajax outputs text only and won't recognize the javascript. Any help would be nice.

Here is my js code:

var OpenedPage;



function load(url, target) {

    document.getElementById(target).innerHTML = 'Loading ...';

    if (window.XMLHttpRequest) {

        req = new XMLHttpRequest();

    } else if (window.ActiveXObject) {

        req = new ActiveXObject(Microsoft.XMLHTTP);

    }

    if (req != undefined) {

        req.onreadystatechange = function () {

            loadDone(url, target);

        };

        req.open(GET, url, true);

        req.send();

    }

}



function loadDone(url, target) {

    if (req.readyState == 4) { // only if req is loaded

        if (req.status == 200) { // only if OK

            document.getElementById(target).innerHTML = loaded + req.responseText;

        } else {

            document.getElementById(target).innerHTML = Error:n + req.status + n + req.statusText;

        }

    }

}



function unload() {

    if (OpenedPage == divsignin) {

        unloaddivsignin();

    }

    if (OpenedPage == divHowto) {

        unloaddivHowto();

    }



}



function ShowHidedivsignin() {

    unload();

    OpenedPage = divsignin;

    load(../slogin.php, divsignin);

    $(#divsignin).animate({height: toggle}, {duration: 800});

}



function unloaddivsignin() {

    OpenedPage = ;

    $(#divsignin).animate({height: toggle}, {duration: 800});

}



function ShowHidedivHowto() {

    unload();

    OpenedPage = divHowto;

    load(../howto.php, divHowto);

    $(#divHowto).animate({height: toggle}, {duration: 800});

}



function unloaddivHowto() {

    OpenedPage = ;

    $(#divHowto).animate({height: toggle}, {duration: 800});

}

And the HTML:

<div id=divsignin style=display:none;width:auto> </div>





<a onClick=ShowHidedivHowto(); return false; href=#>help</a>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tobyl

Add To Favorites

Follow

Total Points: 598

Total Questions: 110

Total Answers: 114

Location: Vietnam

Member since Sat, Feb 12, 2022

2 Years ago

answered 14 Years ago madelyn · Accepted Answer

I haven't checked all your code but what are you using to trigger the javacript loaded into your div? the window/document ready functions will only fire once when the page is initially loaded...

Try the something like the following for the content loaded into the div...

<div id=tabs>

    <ul>

        <li><a href=#fragment-1><span>One</span></a></li>

        <li><a href=#fragment-2><span>Two</span></a></li>

        <li><a href=#fragment-3><span>Three</span></a></li>

    </ul>

    <div id=fragment-1>

        <p>First tab is active by default:</p>

        <pre><code>$('#example').tabs();</code></pre>

    </div>

    <div id=fragment-2>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    </div>

    <div id=fragment-3>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    </div>

</div>

<script type=text/javascript>

    $(#tabs).tabs();

</script>

Note the script tag is at the end so it will be parsed after the tabs are loaded.

The alternative would be to modify the function called when AJAX is successful and add

 $(#tabs).tabs();

to the end of it - again this will make sure the code runs only after the contents have been loaded.