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'].']'; ?>
