jquery doesn't seem to load after loading the page in ajax
Hi im having a problem with the page loading another page i have a page a
and page b with page a it has an ajax that loads page b ,and page b loads
and runs jquery perfectly until i click on page a and then the jquery in
page b doesnt seem to can anyone help me with this?
AJAX
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
alert("Your browser doesn't support the
XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = getXmlHttpRequestObject();
function get() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'b.php', true);
receiveReq.onreadystatechange = handleGet;
receiveReq.send(null);
}
}
function handleGet() {
if (receiveReq.readyState == 4) {
document.getElementById('content').innerHTML =
receiveReq.responseText;
}
}
PAGE 1 THAT LOADS THE AJAX AND THE SECOND PAGE
<script src="add.js"></script>
<a href="javascript:get()">Live Chat</a>
<div id='content' class='content'></div>
PAGE 2 THAT THE PAGE 1 LOADS WITH THE WORKING JQUERY IF LOADED BY IT SELF
BUT DOESNT WORK AFTER THE AJAX LOADS THIS PAGE
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Test selctions</title>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#' + $('#selection
option:selected').text().toLowerCase()).show();
$('#selection').change(function () {
$('.op').hide();
$('#' + $('#selection
option:selected').text().toLowerCase()).show();
});
});
</script>
<style type="text/css">
#plane ,#boat,#car ,#other {
display: none;
}
</style>
</head>
<body>
options:
<select id='selection'>
<option>Pls choose</option>
<option value='1' id='1'>Car</option>
<option value='2' id='2'>Plane</option>
<option value='3' id='3'>Boat</option>
<option value=''>Other</option>
</select><div>
<div id='car' class='op'>you have chosen a car</div>
<div id='plane' class='op'>you have chosen a plane</div>
<div id='boat' class='op'>you have chosen a boat</div>
<div id='other' class='op'>others</div>
</div>
</body>
</html>
Can someone help me with this one and we would really appreciate it! and
thanks!
No comments:
Post a Comment