How can I implement this Ajax script?

Question

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:

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  
});
```
We need to define what page to get the data from when a link is clicked on:
```
var toLoad = $(this).attr('href')+' #content';
```

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.

Deniz Dogan · Accepted Answer · 2009-07-03 17:28:52Z

3

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

answered Jul 3, 2009 at 17:28

Deniz Dogan

26.3k36 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I implement this Ajax script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related