I am trying to open a HTML page using ajax on click of a button.
And the HTML page that I am opening has a javascript slider in it, which works fine it I open up the page by itself, but the slider stops working if I open it using my index.html via ajax.
I am putting my the code for both pages for you to see:
The index.html (which is using the ajax to open "SayHello.html") code is below:
<script language="JavaScript" type="text/javascript">
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
//Display your error message here.
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade.");
}
}
//Get our browser specific XmlHttpRequest object.
var receiveReq = getXmlHttpRequestObject();
//Initiate the asyncronous request.
function sayHello(x) {
//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Setup the connection as a GET call to SayHello.html.
//True explicity sets the request to asyncronous (default).
if(x==3)
receiveReq.open("GET", 'SayHello.html', true);
else if(x==4)
receiveReq.open("GET", 'SayHello2.html', true);
//Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = handleSayHello;
//Make the actual request.
receiveReq.send(null);
}
}
//Called every time our XmlHttpRequest objects state changes.
function handleSayHello() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
document.getElementById('span_result').innerHTML = receiveReq.responseText;
}
}
</script>
<table class="nav">
<tr><th>sd</th></tr>
<tr><td><a href="javascript:sayHello(3);">Say Hello</a></td></tr>
<tr><td><a href="javascript:sayHello(4);">Turvey, Kevin</a></</td></tr>
<tr><td>Mbogo, Arnold</td></tr>
<tr><td>Shakespeare, Bill</td></tr>
</table>
<br /><br />
<span id="span_result"></span>
And the SayHello.html code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:17 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Horizontal Carousel</title>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});
//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
</script>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333333;
background-color:#FFFFFF;
}
a:link, a:visited, a:hover{color:#0066CC; text-decoration:none;}
#slider-stage{width:632px; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto;}
#slider-buttons{width:632px; margin:0 auto;}
#slider-list{width:2000px; border:0; margin:0; padding:0; left:400px;}
#slider-list li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}
</style>
</head>
<body>
<h3>More tutorial here: <a href="http://woork.blogspot.com/">http://woork.blogspot.com</a></h3>
<p>Click on Previous or Next Button </p>
<div id="slider-stage">
<ul id="slider-list">
<li id="l1">Box 1</li>
<li id="l2">Box 2</li>
<li id="l3">Box 3</li>
<li id="l4">Box 4</li>
<li id="l5">Box 5</li>
<li id="l6">Box 6</li>
<li id="l7">Box 7</li>
<li id="l8">Box 8</li>
<li id="l9">Box 9</li>
<li id="l10">Box 10</li>
</ul>
</div>
<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</div>
</body>
<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:20 GMT -->
</html>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "ht$
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga$
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1497692-16");
pageTracker._trackPageview();
} catch(err) {}</script>
Please help.
Regards Zeeshan
