I am trying to accomplish this task using MooTools.
Description:
I connected an event listener to the link myButton. Clicking this link initiates an AJAX request and updates the content myDivbased on the response text.
During this request, the POST variable is sent to "button.php", but it is not currently in use.
(I want to use it later)
OK, the result myDivis exactly the same link with the same identifier ( myButton) + random number, so that we can see that each click generates a new number.
Problem:
After the first press of a button myButton, it myDivwill update correctly, showing a random number. When I click myButtona second time (this time in a newly updated div), the div is no longer updated.
Please note that I need to myButtonbe inside myDiv, and I myDivneed to refresh (refresh) after each click without refreshing the entire page.
Can someone show me how to achieve this task based on this simplified code example?
index.html
<html>
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script>
window.addEvent('domready', function() {
$('myButton').addEvent('click', function(e) {
e.stop();
var myRequest = new Request({
method: 'post',
url: 'button.php',
data: {
action : 'test'
},
onRequest: function() {
$('myDiv').innerHTML = '<img src="images/loading.gif" />';
},
onComplete: function(response) {
$('myDiv').innerHTML = response;
}
});
myRequest.send();
$('myButton').removeEvent('click');
});
});
</script>
</head>
<body>
<div id="myDiv">
<a id="myButton" href="#">Button</a>
</div>
</body>
</html>
button.php
<a id="myButton" href="#">Button</a> clicked <?php echo rand(1,100); ?>
source
share