ihab ihab - 1 month ago 6
Ajax Question

JavaScript not working inside AJAX loaded DIV

i am having a problem getting the java script code to work inside a ajax loaded div, i am trying to include jquery tabs but it not working, the ajax outputs text only and wont recognize the java script.

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>


any help will be much appreciated
thanks

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.

Comments