In 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 🙂

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?

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 🙂

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.

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.

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?

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!

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

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.

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!

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.

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.

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.. !

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.

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.

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.

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?

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 🙂

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 🙂

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

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.

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.

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