Like the last one, the first line you have to put into your script is:
CODE
<script type="text/javascript" src="js/mootools.js"></script>
where "js/mootools.js" is the directory where we have put the mootools js code in our webhost.
Next code is going to be a large one:
CODE
<script language="javascript">
window.addEvent('domready', function() {
$('runAjax').addEvent('click', function(event) {
event.stop();
var req = new Request({
method: 'get',
url: $('runAjax').get('href'),
data: { 'do' : '1' },
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('The response is the following : ' + response); }
}).send();
$('runAjax').removeEvent('click');
});
});
</script>
window.addEvent('domready', function() {
$('runAjax').addEvent('click', function(event) {
event.stop();
var req = new Request({
method: 'get',
url: $('runAjax').get('href'),
data: { 'do' : '1' },
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('The response is the following : ' + response); }
}).send();
$('runAjax').removeEvent('click');
});
});
</script>
The first part (
CODE
window.addEvent('domready', function() {})
) is to initiate the DOM, which is an API for HTML documents, that we are going to use to comunicate with the other page, and do correct use of Mootools.CODE
$('runAjax').addEvent('click', function(event) { event.stop();
'runAjax' is the id that the link is going to have (I'll post complete code at final to compare). What this does is stop the clicking event, which would take you to the actual web, to make it backend, and request it. The url, then, the href=''; one, the one the link was going to CODE
url: $('runAjax').get('href'),)
where runAjax is the same link id.The most important lines to the people that want to use this codes are the following:
CODE
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('The response is the following : ' + response); }
onComplete: function(response) { alert('The response is the following : ' + response); }
onRequest is when the request of that file starts, you can put any javascript code in there to make the user wait.
onComplete is when the request was completed. It's made in function of the response, cause we are receiving it, and we can use it to report something to the user.
Attention: if you want to refresh a div with new data (for example, the response), then this part of the code would have to be like this:
CODE
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('Response received.); $('divID').set('html', response); }
onComplete: function(response) { alert('Response received.); $('divID').set('html', response); }
That will output the response in the div cointainer with ID 'divID' and will also alert that the response has been received.
So, the final code to use this would be:
CODE
<HTML>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script language="javascript">
window.addEvent('domready', function() {
$('runAjax').addEvent('click', function(event) {
event.stop();
var req = new Request({
method: 'get',
url: $('runAjax').get('href'),
data: { 'do' : '1' },
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('The response is the following : ' + response); }
}).send();
$('runAjax').removeEvent('click');
});
});
</script>
</head>
<body>
<a href='webtovisit.php' id='runAjax'>Click here to make the ajax request</a>
<div id='divID'></div> ///// THIS IF YOU ARE GOING TO REFRESH THE DIV INFO.
</body>
</HTML>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script language="javascript">
window.addEvent('domready', function() {
$('runAjax').addEvent('click', function(event) {
event.stop();
var req = new Request({
method: 'get',
url: $('runAjax').get('href'),
data: { 'do' : '1' },
onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
onComplete: function(response) { alert('The response is the following : ' + response); }
}).send();
$('runAjax').removeEvent('click');
});
});
</script>
</head>
<body>
<a href='webtovisit.php' id='runAjax'>Click here to make the ajax request</a>
<div id='divID'></div> ///// THIS IF YOU ARE GOING TO REFRESH THE DIV INFO.
</body>
</HTML>
Hope this helps one to understand this, I had some hard time understanding this the first time; everyone seemed to pick it up quickly and I didn't.
