Advanced Search

Return to Snippet

Revision: 30323
at August 11, 2010 23:16 by reynish
Initial Code 
// AJAXin links

// Stop default actions on the links we want to hijack
$('#navigation a[href$=html]').bind('click', function(event) {
	event.preventDefault()
});

// Click on link within id with ending of HTML triggers this
$('#navigation a[href$=html]').click(function(e) {
	
	// Grab the href attribute of the clicked A and use it as linkURL variable
	var linkURL = $(this).attr('href');
	
	// Show the Element that the content will be displayed in
	$('#ajaxContainer').show();
	
	// AJAX
	$.ajax({
		   
	// Use the variable linkURL as source for AJAX request
	url: linkURL,
	dataType: 'html',
	
	// If all goes well
	success: function(data) {
		// This is where the fetched content will go
		$('#ajaxContainer')
			// HTML added to DIV while content loads (It loads my spinner, you'll have to come up with your own)
			.html('<div id="spinningLoader"><img class="loader" src="spinnerBlack.png" alt="spinnerBlack" width="100" height="100" /></div> ')
			// Load from this URL this element class
			.load(linkURL + ' .columnWide');
			
		// It worked mother flipper
		$.print('Load was performed.');
	}
	});
});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Getting and showing content with Jquery & Ajax

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
ajax, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery