jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating (jQuery tutorial #9)

Lesson #1: jQuery Tutorial for Beginners

Lesson #2: Listen to user events and respond with jQuery actions!

Lesson #3: Clean up the jQuery by putting some data in the HTML

Lesson #4: "DOM Traversal" with jQuery

Lesson #5: Building a jQuery Tab Panel Widget

Lesson #6: Building a jQuery Slider / DOM Caching

Lesson #7: JQuery Ajax tutorial #1

Lesson #8: jQuery Ajax tutorial #2 - Posting to backend

Lesson #10: jQuery Ajax tutorial #4 - Better Mustache templating & and "Edit mode"

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[Jomster]

I like your logic. It's like I'm watching you play chess, while your strategizing.

[vectorfield]

I just wasted 2 hours trying to figure out why my jQuery couldn't select a list item after I added it with AJAX, then I stumbled upon this video, and BAM problem solved. Thanks alot!

[ninetdc]

Perfect timing, Will! I picked a good day to try to fully understand the jQuery/AJAX process. 

[learncodeacademy]

@Mike
My preference is the simplicity of mustache...although I usually use Hogan as a replacement for it.  There's plenty of people who agree or disagree with that, though.  Neither is viewed as "bad" for sure.

[ThaoPhuong-lnvc]

Thank you very much! This is the best (easy to understand and follow) tutorial on the Ajax topic that I have found!

[pranavmahajan]

Your videos are so so useful to me. Thanks a lot.

[PeterReginald]

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

So your line of code on line 54 could be written as...

$orders.on( 'click', '.remove', function(){

   $.ajax...

})

[Ausare]

Great job!
This hits the perfect starting point for me to really understand how to use AJAX. Looking forward to checking out your other videos.

[Todiros]

That is gonna be an awesome series. Can't wait to start it! 

[kimLavrator]

I was fighting with this ajax form thingy and this video saved me with the delegate method that I was unfamiliar with... For that, my deepest thank you :)

[arihasan]

Thank you for showing delegate function, that solved my current problem!!

[matthewpadich]

SO much better to have a real API to call.  So gratiifying.  Thanks for doing this, great tutorial!

[TheStolken]

Thank you very much for these tutorials. Helps me out when my bum professor won't.

[Hyuts]

Awesome! Thanks so much for the tutorial. I can't wait till I can change that much code at once without getting errors. Very clean code very knowledgeable.

[yonghappy]

Thank you so much for making this tutorial

[gedariaofficial]

I am running into issues with POST and DELETE method, it has to do something with CORS and LiveServer extension in Visual Studio Code, can't figure it out. I've tried billion solutions and nothing worked 🥺🥺

[hugojorge]

Thx for the videos, you are an amazing teacher, with simple things and great examples become much easy learn and you do it. I adore your videos, finally i start understand jQuery better. Keep going like this :) How much videos you make much videos i will see. Thanks alot (P.S -> Sorry for my english). Hugs

[SelfTaughtProgrammer]

Nice tutorial :). Specially liked the last part where you talked about the scope :)

[eoghanfeighery]

Can you also do separate function containers for post get put and delete as well?

[joellongie]

Great Video, really makes Ajax simple.  Will you be able to cover updating to finish up on all the CRUD operations?