I basically have an Index.html file which includes jQuery.js and my own custom Animations.js. The animations script is used to place content inside <div id="content"></div> by retrieving it from several html files (an about / contact / disclaimer field) and it gives it a nice animated look, without having to reload the rest of the page.
However, I need to execute some scipt in *some* of these content files (the contact field needs to be a bit more than just static html, the about field should display a google map).
at the moment this doesnt work, probably because the content files are not loaded at the same time as index.html, they are retrieved by the jQuery library like this:
$("#wrapper").load(hash + ".html #content");
I tried just throwing javascript inside the contact.html / about.html files, and I also tried using the animations.js to append the javascript to a div inside those html. Both are not working.
The best way to go is probably to add the javascript inside the animations.js, and let it execute as soon as a certain div loads. But how do I do that?
So I want the browser to wait until the contact tab is clicked, the contact.html loads inside the content div (retrieved by ajax), then the javascript needs to be executed INSIDE that div.
All help is greatly appreciated!
Feroxium.
Thanks Partha! I found the answer...
I added this function to my animation.js file, and called the function right after Jquery loads the html. I will have to tweak it a bit, but firebug helped me a lot!
function setAjaxContent(divId, html) {
var temp = html;
while(true) {
var sindex = temp.indexOf("<script"+">");
if(sindex < 0) break;
var eindex = temp.indexOf("</"+"script>",sindex);
var js = temp.substring(sindex+8,eindex);
eval(js);
temp = temp.substring(eindex+9);
}
document.getElementById(divId).innerHTML=html;
}
Apparently the above solution doesnt work... xD
However, I need to execute some scipt in *some* of these content files (the contact field needs to be a bit more than just static html, the about field should display a google map).
at the moment this doesnt work, probably because the content files are not loaded at the same time as index.html, they are retrieved by the jQuery library like this:
$("#wrapper").load(hash + ".html #content");
I tried just throwing javascript inside the contact.html / about.html files, and I also tried using the animations.js to append the javascript to a div inside those html. Both are not working.
The best way to go is probably to add the javascript inside the animations.js, and let it execute as soon as a certain div loads. But how do I do that?
So I want the browser to wait until the contact tab is clicked, the contact.html loads inside the content div (retrieved by ajax), then the javascript needs to be executed INSIDE that div.
All help is greatly appreciated!
Feroxium.
Thanks Partha! I found the answer...
I added this function to my animation.js file, and called the function right after Jquery loads the html. I will have to tweak it a bit, but firebug helped me a lot!
function setAjaxContent(divId, html) {
var temp = html;
while(true) {
var sindex = temp.indexOf("<script"+">");
if(sindex < 0) break;
var eindex = temp.indexOf("</"+"script>",sindex);
var js = temp.substring(sindex+8,eindex);
eval(js);
temp = temp.substring(eindex+9);
}
document.getElementById(divId).innerHTML=html;
}
Apparently the above solution doesnt work... xD