[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More


Simple ajax request using mootools1.2 and Smooth scroll in mootools

Published on
10,131 Points
Last Modified:
There is basically two types of AJAX request in mootools.

Request  and Request.HTML


Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTML and Request.JSON.

Demo Code:

var req = new Request({
url: demo_path + ‘data.txt’,
onSuccess: function(txt){
$(‘result’).set(‘text’, txt);
// Our request will most likely succeed, but just in case, we’ll add an
// onFailure method which will let the user know what happened.
onFailure: function(){
$(‘result’).set(‘text’, ‘The request failed.’);


Open in new window


Request.HTML is a subclass of Request built for making XHR requests which return HTML content.

Demo Code:

var req = new Request.HTML({url:demo_path+’data.html’,
onSuccess: function(html) {
//Clear the text currently inside the results div.
$(‘result’).set(‘text’, ”);
//Inject the new DOM elements into the results div.
//Our request will most likely succeed, but just in case, we’ll add an
//onFailure method which will let the user know what happened.
onFailure: function() {
$(‘result’).set(‘text’, ‘The request failed.’);


Open in new window

Another parameter for Request.HTML is as below:

Open in new window

Here id of the element should be passed, and what ever the response will be placed inside the given element ID.
----------------------------------------------------------- --------------------------------- --------------------------

Smooth Scroll in mootools 1.2

How to scroll to the top of the page or any portion of the page very smoothly?

here is the solution for that. Please check.

When we use anchor link to go to specific portion of the then browser jurks to that portion of the page.

Below mootools plugin is useful to scroll the page very smoothly.

Mootools have in built plugin to get page scrolled smoothly as you want.

Below are the steps to include that:

Include mootools1.2 in your file, if you don’t have download it from mootools site
To enable the scroll plugin add the below code in your head section after including mootools JS

//when the dom is ready
window.addEvent(‘domready’,function() {
//smooooooth scrolling enabled
//new SmoothScroll({ options }, window);
new SmoothScroll({ duration:700 }, window); //700 define the duration in mili second to go to the portion of the //page

Open in new window

Now use the traditional anchor tag in your web page  and you will get page scrolled very smoothly.

Featured Post

Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Join & Write a Comment

Learn the basics of Skype For Business in office 365
Watch this online video tutorial and learn the best way to reduce Outlook mailbox size using Compact Now feature of Outlook. It removes the deletes item's space from Microsoft Outlook 2016, 2013, and 2010 and compresses the PST file size. This will …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month