- Impact
- 9
So I wrote a very simple ajax function and use that to load another html page into a specific div. Loading works perfectly.
The problem comes with css/javascript on the loaded content. Css included in my root file does not get applied to the extra content and none of the javascript works.
If I simply add the content of the extra page into my root file, everything works, but it breaks with ajax.
I already tried including some seperate css/js in that other html page but that doesn't work either.
I want to use css for obvious reasons and javascript to trigger other javascript functions. I mostly use Jquery but no javascript whatsoever works on the ajax content.
I've done a lot searching but just can't figure this one out, I hope someone here might know the answer.
My ajax function:
My extra html (I have tried with and without the html/head/body tags, nothing makes a difference):
This is the javascript I want executed (tried with .on and .click):
The problem comes with css/javascript on the loaded content. Css included in my root file does not get applied to the extra content and none of the javascript works.
If I simply add the content of the extra page into my root file, everything works, but it breaks with ajax.
I already tried including some seperate css/js in that other html page but that doesn't work either.
I want to use css for obvious reasons and javascript to trigger other javascript functions. I mostly use Jquery but no javascript whatsoever works on the ajax content.
I've done a lot searching but just can't figure this one out, I hope someone here might know the answer.
My ajax function:
Code:
function ajax(page, location){
var ajaxRequest;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
ajaxRequest=new XMLHttpRequest();
}else{// code for IE6, IE5
ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById(location).innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", page, true);
ajaxRequest.send(null);
}
My extra html (I have tried with and without the html/head/body tags, nothing makes a difference):
Code:
<img src="img/map.jpg" usemap="#map" />
<map name="map">
<area shape="polygon" coords="106,127,140,94,188,67,222,105,182,141" title="Area 1" class="Tooltip" id="button_map_area1" >
</map>
This is the javascript I want executed (tried with .on and .click):
Code:
$("#button_map_area1").on("click", function(event){
console.log("test");
$('#popup_box').show();
});