MooTools request fails
Posted
by acoder
on Stack Overflow
See other posts from Stack Overflow
or by acoder
Published on 2010-06-09T11:40:36Z
Indexed on
2010/06/09
11:42 UTC
Read the original article
Hit count: 201
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'].']'; ?>© Stack Overflow or respective owner
