By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,528 Members | 1,304 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,528 IT Pros & Developers. It's quick & easy.

How to implement an Ajax script?

P: 7
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 to formulate the link so that it will point the script to the page we want to load in the div we want?

The script:
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function() {  
  3.     // Check for hash value in URL  
  4.     var hash = window.location.hash.substr(1);  
  5.     var href = $('#nav li a').each(function(){  
  6.         var href = $(this).attr('href');  
  7.         if(hash==href.substr(0,href.length-5)){  
  8.             var toLoad = hash+'.html #content';  
  9.             $('#content').load(toLoad)  
  10.         }   
  11.     });  
  13.     $('#nav li a').click(function(){  
  15.     var toLoad = $(this).attr('href')+' #content';  
  16.     $('#content').hide('fast',loadContent);  
  17.     $('#load').remove();  
  18.     $('#wrapper').append('<span id="load">LOADING...</span>');  
  19.     $('#load').fadeIn('normal');  
  20.     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
  21.     function loadContent() {  
  22.         $('#content').load(toLoad,'',showNewContent())  
  23.     }  
  24.     function showNewContent() {  
  25.         $('#content').show('normal',hideLoader());  
  26.     }  
  27.     function hideLoader() {  
  28.         $('#load').fadeOut('normal');  
  29.     }  
  30.     return false;  
  32.     });  
  33. });

The instructions specify the following:

1. We want to target the links within the navigation menu and run a function when they are clicked:
Expand|Select|Wrap|Line Numbers
  1. $('#nav li a').click(function() {  
  2.     // function here  
  3. });

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

Expand|Select|Wrap|Line Numbers
  1. var toLoad = $(this).attr('href')+' #content';

3. The loadContent function calls the requested page:

Expand|Select|Wrap|Line Numbers
  1. function loadContent() {  
  2.     $('#content').load(toLoad,'',showNewContent)  
  3. }  

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.

I will be much obliged if the experts here care to give me a guiding hand.

PS: The tutorial all this comes from is here:
Jul 3 '09 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
That should be all that's required. Can you post the HTML code for the page?
Jul 4 '09 #2

P: 7
Thank you for responding.

The HTML code for the page would be meaningless because there is as yet no link associated with the script in it.

The reason being I haven't been able to figure out how to construct such a link; I don't know what to include, in what form and order, etc.

Can you give me a working link example that will point the script to the page we want to load, in the div we want? I suspect that will put me on the right track.

Jul 4 '09 #3

Expert Mod 15k+
P: 16,027
The script is unobtrusive, i.e. it provides the effect, but if someone doesn't have JavaScript enabled, it will still work. There's nothing special about the links. They're just normal links. See the demo - check the source code.
Jul 5 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.