Advanced Search

Getting and showing content with Jquery & Ajax

/ Published in: jQuery
Save to your folder(s)
Hijack (Ajack?) links within an element so instead of booting you to a fresh page it loads the information to a specified DIV.

If you have any suggestions on how to make it better then let me know

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // AJAXin links
  2.  
  3. // Stop default actions on the links we want to hijack
  4. $('#navigation a[href$=html]').bind('click', function(event) {
  5. 	event.preventDefault()
  6. });
  7.  
  8. // Click on link within id with ending of HTML triggers this
  9. $('#navigation a[href$=html]').click(function(e) {
  10.  
  11. 	// Grab the href attribute of the clicked A and use it as linkURL variable
  12. 	var linkURL = $(this).attr('href');
  13.  
  14. 	// Show the Element that the content will be displayed in
  15. 	$('#ajaxContainer').show();
  16.  
  17. 	// AJAX
  18. 	$.ajax({
  19.  
  20. 	// Use the variable linkURL as source for AJAX request
  21. 	url: linkURL,
  22. 	dataType: 'html',
  23.  
  24. 	// If all goes well
  25. 	success: function(data) {
  26. 		// This is where the fetched content will go
  27. 		$('#ajaxContainer')
  28. 			// HTML added to DIV while content loads (It loads my spinner, you'll have to come up with your own)
  29. 			.html('<div id="spinningLoader"><img class="loader" src="spinnerBlack.png" alt="spinnerBlack" width="100" height="100" /></div> ')
  30. 			// Load from this URL this element class
  31. 			.load(linkURL + ' .columnWide');
  32.  
  33. 		// It worked mother flipper
  34. 		$.print('Load was performed.');
  35. 	}
  36. 	});
  37. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.