jQuery for Absolute Beginners: Day 10
It’s time to start digging into jQuery AJAX capabilities. Today, we’ll start off as simply as we can. We’ll store information on one page, and then load that specific information from another page! We’ll accomplish this by using jQuery “load()” method.
Day 10: Intro to AJAX: Using the Load Method
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
92
Comments
Jeffrey
Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything.
- Ask JW: A Plugin to Make Important Announcements
- Working with the New "Envato Marketplace Items" WordPress Plugin
- New Marketplace Features Screencast
When finishing this tutorial (great as it) the list, once added, jumps slightly up. Any ideas on why and how to fix?
Cheers
PHP for me next time round.
Awesome tutorial, I am planning on using this on a web site i am building but I would like it to move back up if you click it again like: show/hide movies -> click–>it show my movies and then –>click–> it hides them again, is it possible to show how to do that??
Thnx for all the tuts, im actually learning something hehe:)
In your example, try clicking the “load favorite movies” again, and it will create a new list under the old one. That probably shouldn’t happen. How would you fix this?
Please disregard the previous comment, I failed to see that someone had asked this before (moderator you can remove both posts ).
i notice if you click it again, the movies load again, and each time you click, it loads. is there a way to stop that? thanks.
hey
how can i delete the word (Load Favorite Movies) and show the other word instead without sliding or anything
Thanks for the toturial.
It is very helpful tutorial!!! Thank you.
When i clicked the Laod movies. The movies appear. When i click it again.. it loads again.. n keeps on going..
can u tell us how to make it show the movies n change the text to hide movies. on clicking it should hide it.
Thanks a lot for this tutorial and for all others!
It’s amazing how much one parenthesis can screw you up…..
My blood pressure is dangerously high…..
I’m starting to wish he did that debug tutorial
How can you make this work on ASP.NET pages? I tried it and it’s throwing a javascript type error.
otustanding
Hi there. I just wanted to mention that in Safari 4 beta you first need to append the element before hiding it. Otherwise it wouldn’t slide down. Sounds generally more logical to me, too. So it’s like that:
$(”).load(‘new_file.html #movies’, function() { $(this).appendTo(‘#container’).hide().slideDown(1000); });
Hey Thanks for the tutorials.
I am having an issue here. When i am keep click on the list also keep appearing more than once. This is my code,
$(function() {
$(‘a’).click(function() {
$(”).load(‘ajax.html #movies’,function(){
$(this).hide().appendTo(“#container”).slideDown();
});
});
});
Gracias!!, I love this tutorial!!!!
Hmm, if you keep clicking the add link, it adds more to it lol
After these tuts I vote PHP all the wwwwaaaaaaaaaaayyyyyyyyyyyy!
This tutorial set and the PHP one have been really helpful.
However I have a question regarding combining the two.
On clicking the link, I want to load a PHP file that takes a variable. Something like:
$(”).load(’ajax.php?id=1 #movies’,function(){
$(this).hide().appendTo(”#container”).slideDown();
I can’t seem to get that to work. In my case, ajax.php contains some JS and makes a MySQL call.
Any help would be much appreciated.
Great tutorial!
I like to know how to load a dynamical file, instead of a known file (e.g. new_file.html), in aspx page with jQuery. How do I pass the file name to the jQuery function?
$(function() {
$(‘a’).click(function() {
$(”).load(‘new_file.html #movies’, function() {
$(this).hide()
.appendTo(‘#container’)
.slideDown(1000);
});
return false;
})
});
Very nice tutorial so far. I am learning much here.
BTW Backt to the Future is one of the best movies
Great tuts.
Word up! Thanks for hooking me up with the tools I need to get ahead in life.
Tutorials are great
what i note and bothers me if i keep clicking continues time on link it add over and over content how to avoid this problem
Hi everyone ! Thanks for the tuts, very helpfull
I would to make the same effect, but i’m having a little trouble
I like t, when a click on a link (pictures) information shows up in a box
I’m using the framework blueprint css
I’ve a big box containing 2 small boxe, one for the images, the other for the information, i would to display information ( from an external page) when a click on a picture
here is my code :
my external file contains the same data as jeff.Way,
and here is my javascript
$(function() {
$(‘a’).click(function() {
$(”).load(‘new_file2.html #movies’, function() {
$(this).hide()
.appendTo(‘#loc_box_text’)
.slideDown(1000);
});
return false;
});
});
I would like to display the information on box id=”loc_box_text”
Can someone help me please !!! Thanks
please do more, ajax
paying for the monthly service for this site is worth every penny. once i get my paycheck im going to register. hopefully there is a deal to sign up for a whole year.
Hi ,
I would like to thank you a lot for all this free helpful vids .
I have a question , Can you please approve or not the following ( to make sure if i understood correctly )
In the code :
$(function() {
$(‘a’).click(function() {
$(”).load(‘new_file.html #movies’, function() {
$(this).hide()
.appendTo(‘#container’)
.slideDown(1000);
});
return true;
})
});
when you wrote return false does it mean that if link provided in our html
tag wont be handleld ?
can you explain it more
thanks
Thank you so much for these tuts! I was wondering if you can show me how to ONLY load the external page once. right now every time you click on the “Load Favorite Movies” it will continue to append the same unordered list.T hanks again!
I just want to say u many Thanks. you are really absolute for absolute beginners.
Many thanks again
I have only one issue – every time you click the link it keeps adding to the list. How do you stop that?
Say you have 2 links in a menu loading info from new_file.html that has 2 divs containg # div1 and #div2 to display content in div#content.
Can you have multiple .load going to a single target (new_file.html) , example
Link one (when clicked) loads #div1 from new_file.html into div#content
Link two (when clicked) hides/unbinds #div1 from new_file.html with #div2 etc
Thanks heaps – love your videos btw
Thanks Jeffrey for jquery tutorials. I am becoming a fan of JQuery now
.
Did you ever complete the last video tutorials selecting data from MySQL?
It’s very nice of you to share you knowledge whit everyone.
Thank you!
Thank you very much for all these tuts, they’re great!!
I have a problem with this one, on 5:02 the video is somehow broken and cuts off, am I the only one who has this issue??
Thx 4 fixing and keep it up =)!
Was a browser issue (chrome), with FF / IE it worked…sorry, you can delete both comments =)
Hi from Brazil, Jeffrey!
That’s an excelent tutorial. I have a good experience in desktop programming and thought web dev was a bit disgusting, but after find this tutorial I’ve changed my mind =)
Thank you very much. Now, I have a doubt: on a personal project – at index page – I imported the content (generated after processing a ajax request with $.ajax) of a .jsp file . But the problem can be described with your exemple:
when you do:
$(”.load(“new_file.html #movies”, function() {
var a = [ ];
//if I try to select
a = $(‘#movies > li’).get(); // doesn’t work…#movies not available
}):
In jquery api doc and I think is something due to the nature of asynchronous programming.. How do I make it work?
thanks.
Hi,
can you show calender to be used as pug in. i have seleced calender from Jquery site.
These tutorials are excellent. Keep up the great work!
My goodness! This is fantastic. You just pure them out in normal language. Do have a video tutorials to buy – (on Jquery, Ajax, RoR, and php(OOP))? It would be a great pleasure to get them.
Keep up the good job.
Max
Hello Jeffrey,
I have been following your videos from 3 days now. I have also succeeded in implementing most of what I have learnt here.
Never the less i had this concern, How do i get the selected ID OR index from a drop down selector. I wish to use it instead of an anchor.
Once again thanks for the cool stuffs.
thank you….