Search jQuery

jQuery Forum

Ajax load function

in Getting Started • 11 years ago

Hi all,

I am using a great tutorial from lynda.com that describes how to use ajax to create a preloaded and to load a portion of a div from one page to another page. The funny thing is the demo/exercise works but what I transposed and reworked for my kind or worked while I was working it out, but now doesn't work at all. Could it be my Mamp environment? What's weird is the slider and other Jquery elements work fine...

Below is the function...and here is my site http://updatedaortiz.aortiz.info/index.php

// remap jQuery to $

(function($){})(window.jQuery);

/* trigger when page is ready */

$(document).ready(function (){

initialize();

});

function initialize() {

//Click on nav to load external content through AJAX

$('#menu_container a').click(function(e){

e.preventDefault();

$('<div></div>').attr('id', 'animatedStars').appendTo('#content'); //spinner

$('#content').load( e.target.href + ' #loadContent', function() { //stop spinner

}); //pages finished loading

}); //clicked on nav

----------------------- //add fadespinner function

//fade spinner graphic

function fadespinner() {

$('#animatedStars').fadeOut('slow', function() { //stop spinner

$(this).remove();

}); //remove spinner

}

Replies(3)

jakecigar

Re: Ajax load function

11 years ago

(function($){})(window.jQuery); // does nothing.

/* trigger when page is ready */
$(document).ready(function (){
initialize();
});

is better written

$(initialize)

Yeah, it’s magical , but passing a function to $ calls it when the dom is ready!

function initialize() {
//Click on nav to load external content through AJAX
$('#menu_container a').click(function(e){
e.preventDefault();
$('<div></div>').attr('id', 'animatedStars').appendTo('#content'); //spinner
$('#content').load( e.target.href + ' #loadContent', function() { //stop spinner
fadespinner();
}); //pages finished loading
}); //clicked on nav
}

is missing the last "}" in your function.js

JΛ̊KE

718bklynq..

Re: Ajax load function

11 years ago

Hey thanks Jake! This is what I put together.

However the slider on my graphic design page, and the illustrator page didn't work and to some degree the contact? How can that be if the animated gif pops up?

/* trigger when page is ready */
$(document).ready(function (){
$(initialize)});
function initialize() {
//Click on nav to load external content through AJAX
$('#menu_container a').click(function(e){
e.preventDefault();
$('<div></div>').attr('id', 'animatedStars').appendTo('#content'); //spinner
$('#content').load( e.target.href + ' #loadContent', function() { //stop spinner
fadespinner();
}); //pages finished loading
}); //clicked on nav
}
----------------------- //add fadespinner function
//fade spinner graphic
function fadespinner() {
$('#animatedStars').fadeOut('slow', function() { //stop spinner
$(this).remove();
}); //remove spinner
}

jakecigar

Re: Ajax load function

11 years ago

try this

$(initialize); /* magically trigger when page is ready */
function initialize() {
//Click on nav to load external content through AJAX
$('#menu_container a').click(function(e){
e.preventDefault();
$('<div></div>').attr('id', 'animatedStars').appendTo('#content'); //spinner
$('#content').load( this.href + ' #loadContent', fadespinner);
}); //clicked on nav
}
function fadespinner() { //fade spinner graphic
$('#animatedStars').fadeOut('slow', function() { //stop spinner
$(this).remove();//remove spinner
});
}

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Ajax load function

Replies(3)

Re: Ajax load function

Re: Ajax load function

Re: Ajax load function

Statistics

Tags

Actions

Related Posts