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

Download the Source Code



92

Comments
  • Steve Durr says:

    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.

  • Jesper Åbonde says:

    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:)

  • kkathman says:

    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?

  • kkathman says:

    Please disregard the previous comment, I failed to see that someone had asked this before (moderator you can remove both posts ).

  • Julian says:

    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.

  • webtutophp says:

    hey
    how can i delete the word (Load Favorite Movies) and show the other word instead without sliding or anything

  • Linus says:

    Thanks for the toturial.

  • frances says:

    It is very helpful tutorial!!! Thank you.

  • Harsha M V says:

    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.

  • Pitulica says:

    Thanks a lot for this tutorial and for all others!

  • Erik Jenkins says:

    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 ;)

  • Dennis says:

    How can you make this work on ASP.NET pages? I tried it and it’s throwing a javascript type error.

  • sridhar says:

    otustanding

  • Steffen says:

    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); });

  • Gracias!!, I love this tutorial!!!!

  • Justin says:

    Hmm, if you keep clicking the add link, it adds more to it lol

  • wrerm says:

    After these tuts I vote PHP all the wwwwaaaaaaaaaaayyyyyyyyyyyy! :)

  • Brian says:

    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.

  • Quinn says:

    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;
    })
    });

  • iSenne says:

    Very nice tutorial so far. I am learning much here.

    BTW Backt to the Future is one of the best movies :)

  • Codie says:

    Great tuts.

  • charlie says:

    Word up! Thanks for hooking me up with the tools I need to get ahead in life.

  • Delli says:

    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

  • Elias says:

    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

  • indi says:

    please do more, ajax :D

  • sarmen says:

    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.

  • Yacine says:

    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

  • Brad says:

    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!

  • Rocky says:

    I just want to say u many Thanks. you are really absolute for absolute beginners.

    Many thanks again

  • Nick says:

    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

  • sandeep says:

    Thanks Jeffrey for jquery tutorials. I am becoming a fan of JQuery now :D .

  • Did you ever complete the last video tutorials selecting data from MySQL?

  • Stoqn Kirow says:

    It’s very nice of you to share you knowledge whit everyone. :)
    Thank you!

  • LuK says:

    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 =)!

  • LuK says:

    Was a browser issue (chrome), with FF / IE it worked…sorry, you can delete both comments =)

  • anaice says:

    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.

  • Rajesh Rawal says:

    Hi,

    can you show calender to be used as pug in. i have seleced calender from Jquery site.

  • Matt says:

    These tutorials are excellent. Keep up the great work!

  • Max says:

    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

  • Narcisse says:

    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.

  • 최중선 says:

    thank you….