CODEWITHSUNDEEP
javascript
Bob Block
Bob Block

Reputation:

How can I implement this Ajax script?

This is a script that, when a link is clicked, will pull a page from somewhere and insert it in a div in the current page. Pretty simple, yes, but being the thick head I seem to be, I can't figure out how to implement it.

i.e. how can I formulate the link so that it will point the script to the page I want to load in the div I want?

The script:

$(document).ready(function() {  

    // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('#nav li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #content';  
            $('#content').load(toLoad)  
        }   
    });  

    $('#nav li a').click(function(){  

    var toLoad = $(this).attr('href')+' #content';  
    $('#content').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;

    });
});

The instructions specify the following:

  1. We want to target the links within the navigation menu and run a function when they are clicked:

    $('#nav li a').click(function() {  
    // function here  
});

  2. We need to define what page to get the data from when a link is clicked on:

    var toLoad = $(this).attr('href')+' #content';

  3. The loadContent function calls the requested page:

    function loadContent() {  
    $('#content').load(toLoad,'',showNewContent)  
}

It's very likely that the above is all that's needed to run the script as intended but only if you know how to do it, which I don't.

PS: The tutorial all this comes from is here.

Upvotes: 0

Views: 80

Answers (1)

Deniz Dogan
Deniz Dogan

Reputation: 26227

Basically intercept all link clicks and make an AJAX request instead... Remember to return false at the end of the click callback function.

$('a').click(function () {
  var href = $(this).attr('href');
  $.ajax({
    url: href,
    success: function (res) {
      $(res).appendTo('#target'); // add the requested HTML to #target
    }
  });
  return false; // important
});

Upvotes: 3

Related Questions