AJAX What Is It, Most Popular

JQuery & Ajax Free Video Tutorial

104 Comments

JQuery Video TutorialIn this series of tutorial’s I will show you how to use the amazing JQuery Framework. Not only that, but I’ll show you how to use it to master your Ajax techniques.

If you don’t know, Ajax is an approach to using HTML, JavaScript, DHTML, and the DOM. It allows you to create interactive web applications. When Ajax is implemented with JQuery, you dramatically decrease the complications of implementing AJAX techniques.

Briefly, you will learn:

  • How to Select and Edit Element’s without a page reload
  • How to perform many animation’s live on the screen
  • How to pull text from the server
  • How to pull XML data from the server
  • How to communicate with php script’s on the server, without a reload
  • Many fast ways to perform normally complicated JavaScript tasks
  • And, much more…

If you have any question’s leave them in the comment section below.

If you find this article helpful, please click here [googleplusone] so more people can find this πŸ™‚

Learning JQuery and AJAX Part 1 : The Basic’s on JQuery & AJAX

Learning JQuery and AJAX Part 2 : Walk through the Code Needed to Select & Edit Element’s

Learning JQuery and AJAX Part 3 : Every way to Select & Edit with JQuery

Learning JQuery and AJAX Part 4 : More Code Used to Select & Edit Element’s

Learning JQuery and AJAX Part 5 : Advanced Event Handling with JQuery

Learning JQuery and AJAX Part 6 : JQuery Event Handling Code Walk through

Learning JQuery and AJAX Part 7 : JQuery Animation’s

Learning JQuery and AJAX Part 8 : Passing Info to the Server

Here to Serve

Think Tank

104 thoughts on “JQuery & Ajax Free Video Tutorial”

    1. There are a bunch of ways to download video’s. These sites provide free options: keepvid.com, youtubedownloaderhd.com. Almost any video here is also on YouTube. Thanks

      Reply

    2. Hi Yasir,

      You should come often on this site to view these videos. Let the author get something in terms of website traffic. these are awesome videos.

      Reply

      1. Is there any chance you can make Ajax and Struts2 tutorial please.

        It’d be better if ajax submits couple of fields in jsp to Action class, and gets response as list and display on jsp page. It would be better if it has pagination as well.

        Thanks!

        Reply

        1. I’m going to cover topics like Struts, Hibernate, Spring, etc. very soon. Thank you for the request. I promise I’ll get to it as soon as possible

          Reply

  4. Thanks a lot for these very helpful tutorials. Can you identify the source of the supporting html and php files – I couldn’t see a link on the page?

    Also, the most exciting video was the last on interacting with the server but it was too brief and I didn’t fully understand it. A more extended version would be welcome, maybe including a link to MySql if that’s not a step too far?

    Reply

  5. I am really impressed with your tutorial.
    Well done ! .
    I wonder with what program you make this tutorial.
    How you make the different effects ?
    Does it works on windows as well ?

    Thanks
    barak

    Reply

    1. I use a program called iMovie to create all of my screencasts. It is only available on Apple computers, but I’ve heard Windows Movie Maker is similar and free. If you want something more professional you should look into Adobe Premier Elements. Hope that helps πŸ™‚

      Reply

  6. Thanks for this stuff. Five stars for these video tutorials. I’m looking forward for your different helpful tutorials. -from Philippines

    Reply

      1. I am a rookie web developer. I have seen many of your videos and I liked each and every one of them. In fact I have learned many things from them. I would be very much thankful if you can make a tut about how to make layered photoshop images with or without using divine elemente.

        Reply

        1. I’m very happy that I have been able to help. I haven’t used divine element, but I’ll take a look at it. What exactly are you looking to learn? What are you trying to make? WordPress themes?

          Reply

  9. Where is the actual code, can’t find anywhere where I can see the code or download it in full. just askin thinks.

    Reply

    1. The Jquery code is scattered across a few articles that can be found below. There are also descriptions that will walk you through the code. Hope that helps πŸ™‚

      http://www.newthinktank.com/2010/05/learning-jquery-and-ajax-part-1/
      http://www.newthinktank.com/2010/05/jquery-ajax-selecting-editing-elements/
      http://www.newthinktank.com/2010/05/jquery-ajax-selecting-editing-pt-2/
      http://www.newthinktank.com/2010/05/jquery-ajax-event-handling/
      http://www.newthinktank.com/2010/05/jquery-ajax-mouse-event-handlers/
      http://www.newthinktank.com/2010/05/jquery-ajax-animations/
      http://www.newthinktank.com/2010/05/jquery-ajax-passing-info-to-the-server/

      Reply

  11. Hi,
    I’m a back end Java developer and got an interview with a company via recruiter, I was told they’re concern I don’t have enough UI experience and they do use Jquery and AJAX (which I have no work experience). Which part of above tutorial I should focus more.
    Thanks,
    Peter
    btw – this is an excellent website to learn Thanks much.

    Reply

    1. You’re in luck. I’m actually going to redo my jquery tutorials this week. Ui design on the web is first about CSS. So watch those most recent tutorials. Understand the Dom and JavaScript. Jquery, prototype and scriptaculous are all JavaScript frameworks. They make it easier to create cross browser code. I’ll be covering all of them this week and next. If you watch those and understand the code you’ll be able to make anything. Hope that helps?

      Reply

  13. I keep coming bak 2 ur site again n again…d video tuts r just too good…

    I wonder if you could please add some tutorials on Apache wicket, Spring and Hibernate (basically, Java technologies)?

    Thanks n keeping rocking! πŸ™‚

    Cheers…

    Reply

  14. I may be getting the terminology wrong, but I was wondering if you have already done a tut on leaving the hover/active state highlighted as your visitor is on the page or linked directly to? I’ve figured out how to do this in css if you have multiple pages(only).

    I just have 2 html/php pages. Inside my second page I have an embedded flash movie, which I deeplink through.

    I figured I can use a clean way to get my url and if my button(link)is equal to my url, then it would stay highlighted/active. Everyone seems to make this so ridiculously complicated.

    Thank you again for your tutorials and your help. Very simple and clear to understand πŸ™‚ and a lifesaver!

    Reply

    1. I’m sorry, but I don’t understand what you are trying to do. If you are looking for ways to change css dynamically with JQuery I think I did a better job of explaining that in my new JQuery tutorial. Here is a link to it JQuery Video Tutorial

      Reply

  18. Hi,

    I need to fetch the data which is the output from the ps command.This I have to implement using jQuery and Ajax, Could you please help me on this?

    Reply

  19. I found the videos very helpful and easy to understand. Thanks a lot!! Is there a video demo of SimpleModal – pop up?

    Thanks in advance!!

    Reply

    1. Are you looking for a lightbox plugin? I did one of them. Search for lightbox on my site. If that isn’t what your looking for please send me a message with more detail. Thanks

      Reply

    1. Thanks I’m glad you like them. I don’t have a form validation tutorial with JQuery, but I made one with JavaScript JavaScript Video Tutorial pt 7 You wouldn’t be able to validate forms with just JQuery. You need JavaScript regular expressions, and other things.

      I hope that helps

      Reply

  25. Excellent tutorials. Glad I stumbled across them. Well-organized and succinct. I’ll contribute to support your work.

    I have this nit. I watched your Jacascript tutorials that were all code examples – great. Now your jquery/Ajax shorties have slides and not so much code. That’s fine to introduce topic. The problem is that you don’t know apostrophe use rules, and you use apostrophes in plurals (e.g. “function’s” (sic)) everywhere in your slide’s (sic), and it drive’s (sic) me to distraction! Please have a grammar teacher over the age of 60 review your slides, or pass them through MS Word with grammar check enabled, please!

    Reply

  26. Hi there thanks for these awesome tutorials i m implementing some of your techniques in my website.It’s Cool Dude.

    I m very interested to take my programming skills to the next level owe to you.

    I was wondering is there a way in jquery to control and detect the scroll when a user scrolls down or up the page?
    I’ve seen that done in facebook while we scoll down the rest of the page gets loaded.
    I’m sure it has to do with jquery and Ajax .
    Lastly what software you use to create your videos?
    Thanks for your Help.

    Reply

    1. I’m glad you like the tutorials. I’m glad they have helped. You are on the right track. You can implement that feature by dynamically using Ajax techniques to pull the data from the database. Then simply append that information using jquery. That will work and I’ve showed you how to do both in my jquery tutorials.

      I record my screen casts with QuickTime player and edit them with iMovie.

      Reply

  29. Hello Sir ! Really thanks a lot for helping us. and i want one specific video tutorial for me if you can give me. i want the horizontal menu with submenus sliding down when we mouse over on the menu’s. Can you just post this video tutorial for me sir? Im waiting for you. thanks in advance.. !

    Reply

  30. and one more help sir, i have used $.post(“check.php”); to load this file and put it in my webpage to check whether the username is available or not. i want to know can i grab only the specific variable value from that loaded “check.php” file? if so then help me sir.

    Reply

  31. I am looking for such site from long time. Best site to learn different kinds of skills. Can you prepare tutorials on VB Script, QTP, EJB, Design Patterns, Web Services and other J2EE concepts? Thanks for all you have done.

    Reply

  32. Hey Me again πŸ™‚ Am having little trouble sending the ajax requests! For some reason they are failing, its triggering error:functionName instead of success:functionName. I tried on w3school example site also, but having the same problem. Can you help me out. I opened the page http://www.w3schools com/jquery/tryit.asp?filename=tryjquery_ajax_ajax and replaced the text in dbl qts with http://www.google.com and tried, but it dint worked. In chrome-console it shows the request as canceled.

    Reply

      1. The example given in w3school is working fine. Am on Mac-Chrome16. I replaced the part url:”demo_ajax_load.txt” with url:”http://google.com” and then “Edit and Click me” button and when page reloaded, tested it. Doesn’t work. Working for you?

        Reply

      3. Oops! Sorry to buzz you… I got it.. I came to know that i was sending cross-domain requests which is why they are failing… lol i always makes this mistake πŸ™‚
        –Thanks alot,, and All your videos helping me alot πŸ™‚

        Reply

    1. I have a bunch of tutorials in which I make stuff with JQuery. Search for jquery on my site to find them. I’ll be making more JQuery tutorials very soon

      Reply

  34. I must say, lovely effort … u have saved tons of hours πŸ™‚
    i was wondering if you have the slides of ajax tutorial part-3 cause its something that is useful as file … looking forward to that stuff too πŸ™‚
    Loads of thanks again πŸ™‚

    Reply

    1. Thank you, but I don’t have copies of that old presentation. Sorry about that. I deleted a whole bunch of things to free up some space in the past

      Reply

  38. hey, i love your tutorial very nice …..infact av start playing around with some of the stuff. there is a part where you used jquery to call a php script to do maths . i have actually done morethan just that ,i will upload some stuff so you will see one of your successors work . the challenge im having is that i will like to redirect to another page in the same php script that is being called ok, actually included header(‘location:page.php’), it actuallty redirected bt the old page was still showing, i figured maybe its because the jquery function is not suppose to load the page but how would i go about this? op to see more of your work ….whats new what you gat going on presently…already following u on twitter

    Reply

    1. Thank you very much πŸ™‚ One thing that may help you is that I made a new AJAX and JQuery Tutorial since the one you are looking at. It covers everything in much more detail. I welcome any changes, or fixes you have made to the previous code. I’d love to see it. Just make sure you place the code between code tags so everything shows up.

      Derek

      Reply

  39. Wonderful videos, I really think they are great and I have learned a great deal. I wanted to review the code from the videos but cah’t find it on the site. Where do you keep the code developed in the video, so that I can have it open. This would be easier rhen viewing the little box with the code.

    a recommendation, is maybe create a video explaing the node concept (children, siblings) and how they are identified ib HTML page.

    Reply

    1. Thank you very much πŸ™‚ When I made that series of videos, I used to write massive articles to go along with the videos. You can find all of them by going here NewThinkTank Index and then search for JQuery. I also have my newer JQuery tutorials there as well. I’m sorry everything isn’t more organized, but I never planned on making over 500 videos. I hope they help

      Reply

  40. I would like to thank you for posting all these wonderful videos. Your site pretty much acts as a one stop shop for everything I need. It is almost like an abstraction over the internet.

    Reply

    1. You’re very welcome πŸ™‚ I’m very happy that you enjoy the videos. I just keep making them based off of requests I get and hopefully I improve from video to video. It is very fun for me

      Reply

  42. Wow! What a resource for a learner on ajax and jquery to make dynamic web pages! I regret for finding this resource very lately! Great work! Thank you for your Smart work!
    Krishnasamy MOhan:)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *