Hi everyone, I am trying to achieve this task using MooTools.
Description:
I have three buttons. Two buttons outside myDiv and one button inside myDiv.
A click on any of these buttons initiates an AJAX request (passing button variable to "button.php") and updates myDiv content based on the response text.
So, after update, myDiv shows Button3 link + a message showing which button has been clicked.
The problem:
Everything seems to work fine but after several clicks, it happens that myDiv shows loader.gif image and stops. After this, if I wait a few moments, the browser sometimes stops working (gets blocked).
I noticed this problem with IE6.
Does anyone know what does this problem mean and how it can be avoided?
index.
html
<html>
<head>
<script type="text/javascript" src="mootools/mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="mootools/mootools-1.2.4.4-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$("myPage").addEvent("click:relay(a)", function(e) {
e.stop();
var myRequest = new Request({
method: 'post',
url: 'button.php',
data: {
button : this.get('id'), test : 'test'
},
onRequest: function() {
$('myDiv').innerHTML = '<img src="images/loader.gif" />';
},
onComplete: function(response) {
$('myDiv').innerHTML = response;
}
});
myRequest.send();
});
});
</script>
</head>
<body>
<div id="myPage">
<a href="#" id="button1">Button1</a>
<a href="#" id="button2">Button2</a>
<div id="myDiv">
<a href="#" id="button3">Button3</a>
</div>
</div>
</body>
</html>
button.php
<a href="#" id="button3"Button3</a>
<br><br>
<?php echo 'You clicked ['.$_REQUEST['button'].']'; ?>
