Mootools 1.2 Ajax Request How to request data from another web and insert into div

Pankyy · February 10, 2009

Just in the last tutorial I made a few days ago, the central topic of this tutorial is Javascript/AJAX and how to use to request data from a web when asked, and insert its data into a HTML div container; and also, how to run an action when request has been finished. This is also a script I have tested, cause I'm using it for my website so you can rest assure that it will work. You'll need the Mootools necessary version here.

Like the last one, the first line you have to put into your script is:

<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:

<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>

The first part (

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.

$('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

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:

onRequest: function() { alert('The request has been made, please wait until it has finished.'); }, 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:

onRequest: function() { alert('The request has been made, please wait until it has finished.'); },  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:

<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.
Edited February 28, 2009 by Pankyy (see edit history)

Ash-Bash · February 10, 2009

Wow thanks for the tutorial I just downloaded some Ajax scripts today and was wondering how to install and use them, Thank you for this right at the time I need them I will be installing them now Muhahahaha Then take over the world with "Ajax Script" Lol

sonesay · February 11, 2009

Whats wrong with your link? http://mootools.net/ is the correct URL why are you providing an indirect link that doesn't seem to load?

http://mootools.net/core

Edited February 11, 2009 by sonesay (see edit history)

Pankyy · February 11, 2009

Whats wrong with your link? http://mootools.net/ is the correct URL why are you providing an indirect link that doesn't seem to load?

http://mootools.net/core

It seems I had a problem when I edited the post and the link contained the redirect page of the forums once again and it didn't work.

Edited February 11, 2009 by Pankyy (see edit history)

iGuest · February 20, 2009

Wrong codeMootools 1.2 Ajax Request

Your code actually has some issue in it.

Your are attaching the event listener to a link with the ID of "runAjax"

Every time you click on this, you are creating a new instance of the request. Not a good thing as it uses more resources than it should

You should create the instance of the request, then in the eventListener just have req.Send(); return false;

This will make just one instance of the request class no matter how many time you click it.

The code you have you have would work if you are attaching it to a class, because a new instance may be needed due to having many urls

but even then, there are better ways to do this.

-reply by Adam Meyer

Pankyy · February 28, 2009

Wrong code

Mootools 1.2 Ajax Request

Your code actually has some issue in it.

Your are attaching the event listener to a link with the ID of "runAjax"

Every time you click on this, you are creating a new instance of the request. Not a good thing as it uses more resources than it should

You should create the instance of the request, then in the eventListener just have req.Send(); return false;

This will make just one instance of the request class no matter how many time you click it.

The code you have you have would work if you are attaching it to a class, because a new instance may be needed due to having many urls

but even then, there are better ways to do this.

-reply by Adam Meyer

It may be kind of late but I just read this. Yes, there are more efficient ways of doing it, but this was intended to be made as a built-in script, to show it's use and everyone could make it work the way they think is the best for the browsers not to overload.

Again, about creating new instances, that's true too, but I was just showing the example with only one. I'm not a Javascript expert myself, in fact I'm pretty bad, but I have tested this and got good results, so I thought it would be cool sharing.

Thanks, though, I have added the remove.Events().

Edited February 28, 2009 by Pankyy (see edit history)

Sign In

Mootools 1.2 Ajax Request How to request data from another web and insert into div

Recommended Posts

Pankyy 0

Share this post

Link to post

Share on other sites

Ash-Bash 0

Share this post

Link to post

Share on other sites

sonesay 7

Share this post

Link to post

Share on other sites

Pankyy 0

Share this post

Link to post

Share on other sites

iGuest 3

Share this post

Link to post

Share on other sites

Pankyy 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information