jQuery Tutorials: AJAX Load Content No Page Refresh

Loading content via a menu, with no page refresh. With a little help from the jQuery JavaScript library.

Official website
http://phpacademy.org

Support Forum
http://phpacademy.org/forum

Follow us on Twitter!
http://twitter.com/phpacademy

Category:

Education

Tags:

• jquery
• load
• content
• no
• page
• refresh
• ajax
• loading
• contents
• without
• refreshing

[PearSquirrel]

Interesting! One question. Is using this method bad for search engines, as the individual files aren't complete?

[phpacademy]

@PearSquirrel You're right. To combat this I'd recommend linking somewhere to the individual pages. However, this method is really only to load 'widget' style pages.

[chad362wiley]

I love alex

[LenartM]

Thanks for the tutorial ... in fact, thanks for learning me to code PHP and jQuery!!! :D

One question though ~ got any ideas how to avoid the instant load of content? I've added some animation to the content div and I used the .delay() function, which aparenty does not have an effect on the .load() function.

Example:

$('#content').fadeOut(200);

$('#content').delay(200).load(­'pages/' + page + '.php');

$('#content').fadeIn(200);

[Gomidas95]

if I refresh page too much it says "checking connection" how to fix it ???

[mikekevinvideos]

@ruthwijma yes as you are dealing with php you need a server(xampp, or wamp) to do this.

[stuckUPstudios]

hey guys, try komodo edit, really awesome !!

[ruthwijma]

Do you need to run this on a server (like xampp) because it's not working for me and I'm not on a server.

[stylishhughes]

Greatest video ever thanks. You r preventing me from sleeping. I can't stop learning your tuts

[widescr]

Thanks - very helpful instruction.

[LenartM]

@123wendywhite Thanks for your suggestion, but it had no effect on the delay of the .load() function.

Instead, I used the setTimeOut function, which apparently works!

setTimeout(function(){ $('#content').load('pages/' + page + '.php');

},300);

[123wendywhite]

@LenartM To make it fadeIn first wrap the content div for example with a cnt_wrapper, and hide it in the beginning and then hen the content is loaded in the content div, then make the cnt_wrapper fade in! it worked, hope u understand!!!

[BaddouActionImmo]

@tinkertweaks1 thanks brother for your message

[Kyumie]

@LenartM

JQuery is just something compiled from the javascript functions.

If you learn Javascript it´s core then you can even go further.

Then when you learn the power of xml/html-dom then you can do even much more of dynamic adjustment.

Skip the jquery, learn more about javascript and xhtml/html-dom.

Good luck mate.