我正在尝试使用MooTools来完成这个任务。
详情
我有三个按钮。两个按钮在mydiv外面，一个按钮在mydiv内。单击其中任何一个按钮都会启动Ajax请求(将按钮变量传递给“tton on.php”)，并根据响应文本更新myDiv内容。因此，更新后，myDiv将显示Button 3链接+显示单击哪个按钮的消息。
问题
一切看起来都挺正常，但是在点击几次之后，myDiv会显示loader.gif图像。之后，如果我稍等片刻，IE6浏览器有时就会停止工作(被阻塞)。
有人能说出这个问题是什么吗？如何避免？
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'].']'; ?>Well, there's nothing wrong with the code itself. Here's what you can try to do:
Use onSuccess instead of onComplete and console.log the response - check if there's something suspicious going on. Perhaps you're getting a bad response at some point which causes a JS error on IE (not trying to inject a block element inside an inline one, or some non-semantic oddities?)
Just in case use el.set('html', response) instead of el.innerHTML
Check if Element.Delegation doesn't get lost at some point
Create a working example on http://jsfiddle.net so we can poke around with the code and debug more.
http://www.jsfiddle.net/dimitar/VZuGz/
works fine - notice i have added a boolean that stores the clicked state - it will only allow the handling of 1 ajax request at a time in case that was being a problem (queueing up of requests).
in a way, this is now synchronous w/o being synchronous. if you MUST log every click, no matter how fast, then you can use http://mootools.net/docs/more/Request/Request.Queue but disable the output of an element that is being relayed for (clickable).
p.s. i have recently written a class for heatmap logging in mootools - which does similar to what you do, let me know if thats towards the direction you are headed into and i will be happy to share the code.
(function() {
var clicked = false;
$("myPage").addEvent("click:relay(a)", function(e) {
e.stop();
if (clicked)
return; // do 1 ajax at a time.
new Request.HTML({
method: 'POST',
url: '/ajax_html_echo/',
data: {
button : this.get('id'), test : 'test',
html: '<a href="#" id="button3">Button3</a><br><br>You clicked id ' + this.get("id")
},
onRequest: function() {
$('myDiv').set("html", 'loading...');
clicked = true;
},
onComplete: function() {
$('myDiv').set("html", this.response.text);
clicked = false;
}
}).send();
});
})();