Java Script / JQuery Tuturial

Java Script-JQuery

Demonstrating JQuery Ajax .load() functionality

The jQuery load() method, demonstrated below, is a simple yet powerful AJAX method. This method loads data from a server and puts the returned data into the selected element. The regular format is something like $(selector).load(URL,data,callback) where:

  • The required URL parameter specifies the URL you wish to load. In this case, our URL is: html/lecturers.html.
  • The optional data parameter specifies a set of query string key/value pairs to send along with the request.
  • The optional callback parameter is the name of a function to be executed after the load() method is completed. In our example we use an optional click function to show more content from the specified navigation links

For bonus, in addition to demonstrating the load() method, we have added fadeIn(), fadeOut() (earlier explained) and more functions like getIdValues. These methods are briefly explained through comments in the code.

Even better, I have included the links for the CSS, HTML and Photo credits for your pleasure. See the code and the demo below

Happy learning!


    
        // JavaScript Document

            // Nav Links
            $navLinks = $('.nav_lecturers a');

            $navLinks.click(function(e){
              
              // Prevent default browser loading of HTML page
              e.preventDefault();
              
              // Get the link that was clicked on...
              var $this = $(this);
              var $loadContainer = $('#lecturer_info article');
              
              // Get the ID portion of href attribute value
              var idValue = getIdValue($this);
              
              $loadContainer.fadeOut(300, function(){
                $loadContainer.load('data/html/lecturers.html' + ' ' + idValue, function(){
                  $loadContainer.fadeIn(300); 
                })
              })
              
            });

            // Get id value from a href value function
            function getIdValue(el){
              stringArray = el.attr('href').split('#');
              return '#' + stringArray[1];
            }; 

     
    
   
Demo

I hope you enjoyed the tutorials and learned something new