<

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

Published on
10,218 Points
4,218 Views
Last Modified:
Approved
There is basically two types of AJAX request in mootools.

Request  and Request.HTML

Request:


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.’);
}
});

req.send();

Open in new window


Request.HTML:

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.
$(‘result’).adopt(html);
},
//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.’);
}
});

req.send();

Open in new window


Another parameter for Request.HTML is as below:
update:$(‘id_of_element’);

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.
Enjoy...
0
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free