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

Avinash ZalaWeb Expert
Published:
Updated:
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
4,573 Views
Avinash ZalaWeb Expert

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.