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!
@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.
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 :)
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... }) api.jquery.com/delegate/
Correct, it has...and I totally should have mentioned that optional syntax to the watchers. There is somewhat of a debate on which makes for more readable code on this. I personally prefer to still use delegate, which isn't going to be deprecated, simply because it's a more visual clue as to what the code is doing. Here's a thread on where it stands: forum.jquery.com/topic/delegate-vs-on
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.
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 🥺🥺
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
My friend. Great videos. Great way of explaining. - one question, i learned python pretty well. Now i am learning web development but i can't seem to fin the connection yet. I would like to build a website showing backtesting strategies using data on the web. This would be simplified for the normal non-technical user. Thank you.
When I try your API to GET only 1 response I get a 500 Internal Server Error. Same is true for PUT. Any Ideas. And thanks so much for these awesome tutorials.
Love your channel Will. Keep the videos coming! I'm having one issue with this tutorial, using your API. I can't delete newly added entries until I refresh my page. The data-id on the button is undefined until the page refreshes and does a GET request. Any ideas?
After posting, the API will return the saved object with an ID as well to the jQuery success function. (shown as "data" in the POST example here: rest.learncode.academy/) My guess is you're not using that "data" object to add the order to your page, but using an object you created for the post, which wouldn't have an ID.
@@learncodeacademy the way I have my API setup is in a similar to the way you have it except i am not seeing that data in my html even after i do a refresh,
beautiful tutorial. helped me a lot can u tell me what exactly are the things which are written in your "FROM BACKEND TEAM" file. those things are web services? how to create those . do u have a tutorial for those things. i.e. doing something so that sending an ajax request to a url will allow me to do something (in ur case , get , post and delete )
Oceans12Twelve12 Yep. So the "backend" consists of a web framework (something like Laravel for PHP, Ruby on Rails, or Express.js for Node.js). That framework will usually connect to a database for storing information. That framework will either put that information into HTML for the browser or give you urls for javascript to talk to like here - which is called a web service or an API - Application Public Interface. Here's a video series on how to make a node.js application & api: ruclips.net/p/PLoYCgNOIyGAACzU6GliHJDp4kmOw3NFsh
i wanna thank you, i saw your 3 videos and i really learned everything, only i have a problem, when add and appear in the screen, click in the "X" botton but not delete, i have to refresh de page and click on the botton, its work, so why i can delete when add first without refresh??
Kevin Guerrero So this probably means that when you add the new "order", you aren't adding the data-id attribute to it...so when you try to delete, ie probably sends a delete request to /orders/undefined - which of course does nothing. The reason it works on refresh is because the id is there.
great, to the point tutorials. can we make recommendations for a video? it would be sick if you went through the source code for some of bootstrap's jquery plugins (ScrollSpy for example)
Yes! Like, I notice there's some RegEx stuff, and they utilize the data- attribute in conjunction with the tags.. But for new people like me I have no clue what purpose some of the code serves (obviously it's a plugin so it has to be as flexible as possible, but as far as traversing the code and knowing what things do, I am clueless).. It would be really cool to see someone actually explain it. (I think most people understand the automatic self-executing functions, but hoisting and closures and some other things can be hard figure out on your own).. What are your thoughts? Here's a link if you want.. jsfiddle.net/ia_archiver/9AgUS/
hello, how does one know when to incorporate templates/libraries? Say you are building an app, at what point do you, as a developer decide to search for a library or API to make life easier? Is this just something intuitive that comes with practice?
usually you'll want to incorporate a library if you're building something that's been done before or something that you're not really wanting to take the liability for handling 100% correct. one good example is user validation and permission roles. This is something that if not done 100% correctly can be a nightmare. Basically, what you've got to do is sit there and say " man i bet someones done this before... Why should i reinvent the wheel?" Picking the right library to incorporate into your project is a big deal, so do research on the current trusted frameworks and libraries before picking one
Hey! Why do you declare the variables starting with $ (ex: var $li = ...)? It's just to make it clearer when a variable refers to a DOM element? Thanks for these tutorials! They are very helpful!
can i ask what's the point of using json dataType for ajax request?it's faster?or it depends on project,for example we can receive html data and then $('#result).html(data) ; for me second one is easy,specially when i want to update page content, thank you so much for nice tutorial
majid amini JSON is great for lists of information. It's a lot more inline with how databases think. Databases don't think in HTML, they think in terms of entries, lists, collections, etc. You probably don't want to have to have the backend convert data into HTML for you - it's not a very good pattern. If you're having to require plain HTML to inject at specific points, you probably would want that HTML turned into javascript templates, so you have it available to JS
I would use Node.js, as it would feel more familiar to a JS dev. Here's a set of tutorials I have on it. ruclips.net/video/pU9Q6oiQNd0/видео.html There's some stuff to be covered on database yet, but it should give you a great headstart. If you didn't want to build one yourself, firebase.com and parse.com offer this kind of backend as a inexpensive service (Parse is actually free for smaller sites)
Hey mate thanks allot I should of looked through the rest of your videos first before asking! lol Is it possible to make a very simple back end just with PHP MySQL and/or JS? I am just looking for a very simple way to serve up small amounts of data from a database. Cheers,
There are SO MANY PHP frameworks to choose from. The most popular would probably be Laravel, CodeIgniter, CakePHP. I'd either use one of those or use Parse's Javascript library - parse.com/products/javascript
For some reason it throws me an error of bad request, that the id is undefined. In the network tab it shows as: 'api/orders/undefined' Is it because something is outdated here?? no idea., I gave up... Tested my API and everything works when I send a direct DELETE request with some id through POSTMAN, so my API is ok. Probably something is wrong with that line 58: .... + $(this).attr('data-id') , because it just doesn't understand what that id is. Fuck it
I don't understand why you called the url " /api/orders/{id} " to delete each order from the database. Is every single order associated with a different backend script stored in a different url? And how does the script know which element to delete from the database? Shouldn't you have to write (in the ajax request): url: " api/orders.php?id= " + $(this).attr('data-id') or maybe: data: " { id : " + $(this).attr('data-id') + " } " so that the php script knows which id to pass to the SQL DELETE request? EDIT: ok I think I understood. The backend script is basically creating a new web page for each order, while the DELETE ajax request asks the server to delete that web page. I wrongly thought you were using databases, it seemed the most obvious choice for me.
VperVendetta1992 Most backend frameworks are smart enough to break up a url into "params" these days. You can go DELETE /api/orders/1 or DELETE /api/orders?id=1 or POST /api/orders/delete {id: 1} And configure the framework accordingly. The standard for RESTful API's is: Get an entire collection: GET /collectionname Get a record: GET /collectionname/id Add a record POST /collectionname Update a record PUT /collectionname/id Delete a record DELETE /collectionname/id
VperVendetta1992 Oh, also, the backend script isn't making a new page for each order, it's using a framework like: PHP: - slim (super simple and easy) - laravel (very popular and powerful) Node.js: - express.js (the standard for node.js) Ruby - Ruby on Rails (the standard for Ruby) - Sinatra (very simple)
+Gaurang Londhe The short of it: create a "render" function whenever your orders are changed/added/updated/deleted, they call the render function, which spits the array of orders out onto the page. Render can also look for a "filter" input, and get it's value. If it has a value, it can only render the orders matching your filter.
I like your logic. It's like I'm watching you play chess, while your strategizing.
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!
Vulcan Yes, same here. Thanks Will, great tutorial.
@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.
Perfect timing, Will! I picked a good day to try to fully understand the jQuery/AJAX process.
Awesome, glad to hear! Yeah, it's not as daunting as many think...just not explained start-to-finish very often.
Thank you very much! This is the best (easy to understand and follow) tutorial on the Ajax topic that I have found!
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 :)
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...
})
api.jquery.com/delegate/
Correct, it has...and I totally should have mentioned that optional syntax to the watchers. There is somewhat of a debate on which makes for more readable code on this. I personally prefer to still use delegate, which isn't going to be deprecated, simply because it's a more visual clue as to what the code is doing.
Here's a thread on where it stands:
forum.jquery.com/topic/delegate-vs-on
@@learncodeacademy Alas, delegate() is deprecated, time has proven you wrong ;)
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.
That is gonna be an awesome series. Can't wait to start it!
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.
Thank you for showing delegate function, that solved my current problem!!
Your videos are so so useful to me. Thanks a lot.
SO much better to have a real API to call. So gratiifying. Thanks for doing this, great tutorial!
Sweet! Glad it helps! I'm actually using the api myself when building out the frontend of an app before building the backend.
Thank you so much for making this tutorial
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 🥺🥺
Thank you very much for these tutorials. Helps me out when my bum professor won't.
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
thanks Hugo!
nice man!.. now i know the basic :D
Great explanation bro
Nice job on the context of the 'this' keyword. You could have also used .bind(this) etc
Get the party started!
Can you also do separate function containers for post get put and delete as well?
still very relevant, thanks for this!
Adding Mustache seems unnecessary. Is there any reason to use it over template literals?
eg. ` Name:${order.name}(...)`
i'm really thank your best explain video.
Great Video, really makes Ajax simple. Will you be able to cover updating to finish up on all the CRUD operations?
Really great series. Thanks a million. :)
Nice tutorial :). Specially liked the last part where you talked about the scope :)
Thanks! I dive a lot more into scope/context, etc in this series:ruclips.net/p/PLoYCgNOIyGABI011EYc-avPOsk1YsMUe_
thanks a lot. :). Have been following your js tutorials and they are a treat to watch :)
Thanks Saurav!
you're welcome. Keep 'em comin' :D
You are pretty talented and seem very fluent in javascript. How long did it take you to get to this point? Great videos!
My friend. Great videos. Great way of explaining. - one question, i learned python pretty well. Now i am learning web development but i can't seem to fin the connection yet. I would like to build a website showing backtesting strategies using data on the web. This would be simplified for the normal non-technical user. Thank you.
Very Informative .. . :) Thanks
really great tutorial!!!!!!
You're awesome! Thanks!
When I try your API to GET only 1 response I get a 500 Internal Server Error. Same is true for PUT. Any Ideas. And thanks so much for these awesome tutorials.
is there a way to write to template in the html and than change it (add items ect) through js?
At 2:57 you a talking about Mustache templates, can you give some link to the right and useful?
Love your channel Will. Keep the videos coming! I'm having one issue with this tutorial, using your API. I can't delete newly added entries until I refresh my page. The data-id on the button is undefined until the page refreshes and does a GET request. Any ideas?
After posting, the API will return the saved object with an ID as well to the jQuery success function. (shown as "data" in the POST example here: rest.learncode.academy/)
My guess is you're not using that "data" object to add the order to your page, but using an object you created for the post, which wouldn't have an ID.
@@learncodeacademy the way I have my API setup is in a similar to the way you have it except i am not seeing that data in my html even after i do a refresh,
beautiful tutorial. helped me a lot
can u tell me what exactly are the things which are written in your "FROM BACKEND TEAM" file.
those things are web services? how to create those . do u have a tutorial for those things. i.e. doing something so that sending an ajax request to a url will allow me to do something (in ur case , get , post and delete )
Oceans12Twelve12 Yep. So the "backend" consists of a web framework (something like Laravel for PHP, Ruby on Rails, or Express.js for Node.js). That framework will usually connect to a database for storing information.
That framework will either put that information into HTML for the browser or give you urls for javascript to talk to like here - which is called a web service or an API - Application Public Interface.
Here's a video series on how to make a node.js application & api:
ruclips.net/p/PLoYCgNOIyGAACzU6GliHJDp4kmOw3NFsh
Thanks a TON!
Dude youre the best :)
Superb
AWESOME!!!
Awesome
How do I get the backend code for the API part?
Hello. How can I create temporary for html in jquery with `` es6???
awesome :-)
Why my posted to API data does not stay more than 2/3 min?
i wanna thank you, i saw your 3 videos and i really learned everything, only i have a problem, when add and appear in the screen, click in the "X" botton but not delete, i have to refresh de page and click on the botton, its work, so why i can delete when add first without refresh??
Kevin Guerrero So this probably means that when you add the new "order", you aren't adding the data-id attribute to it...so when you try to delete, ie probably sends a delete request to /orders/undefined - which of course does nothing.
The reason it works on refresh is because the id is there.
great, to the point tutorials. can we make recommendations for a video? it would be sick if you went through the source code for some of bootstrap's jquery plugins (ScrollSpy for example)
hmm, ok interesting. So go through and show what they're doing and why with explanations to the tricker things?
Things like +function()
Yes! Like, I notice there's some RegEx stuff, and they utilize the data- attribute in conjunction with the tags.. But for new people like me I have no clue what purpose some of the code serves (obviously it's a plugin so it has to be as flexible as possible, but as far as traversing the code and knowing what things do, I am clueless).. It would be really cool to see someone actually explain it. (I think most people understand the automatic self-executing functions, but hoisting and closures and some other things can be hard figure out on your own).. What are your thoughts? Here's a link if you want.. jsfiddle.net/ia_archiver/9AgUS/
Hi ,
Where I can get entire code? please send me the link for the code.
thanks
your opinion on mustache vs handlebars?
hello, how does one know when to incorporate templates/libraries? Say you are building an app, at what point do you, as a developer decide to search for a library or API to make life easier? Is this just something intuitive that comes with practice?
usually you'll want to incorporate a library if you're building something that's been done before or something that you're not really wanting to take the liability for handling 100% correct.
one good example is user validation and permission roles. This is something that if not done 100% correctly can be a nightmare. Basically, what you've got to do is sit there and say " man i bet someones done this before... Why should i reinvent the wheel?" Picking the right library to incorporate into your project is a big deal, so do research on the current trusted frameworks and libraries before picking one
Thanks :)
SUBBED GOD DAMNIT!
Hey! Why do you declare the variables starting with $ (ex: var $li = ...)? It's just to make it clearer when a variable refers to a DOM element? Thanks for these tutorials! They are very helpful!
+Joan Sague It's for when a variable uses JQuery
Yes!
can i ask what's the point of using json dataType for ajax request?it's faster?or it depends on project,for example we can receive html data and then
$('#result).html(data) ; for me second one is easy,specially when i want to update page content,
thank you so much for nice tutorial
majid amini JSON is great for lists of information. It's a lot more inline with how databases think. Databases don't think in HTML, they think in terms of entries, lists, collections, etc. You probably don't want to have to have the backend convert data into HTML for you - it's not a very good pattern.
If you're having to require plain HTML to inject at specific points, you probably would want that HTML turned into javascript templates, so you have it available to JS
Got an error: 'Mustache' is not defined...
I don't understand why don't you just define li in css to make the font different
What is mustache.js? Is it a library of some sort? Also, great videos.
How would you build a really simple back end such as the one powering this api?? Does anyone know of any good resources?
I would use Node.js, as it would feel more familiar to a JS dev. Here's a set of tutorials I have on it.
ruclips.net/video/pU9Q6oiQNd0/видео.html
There's some stuff to be covered on database yet, but it should give you a great headstart.
If you didn't want to build one yourself, firebase.com and parse.com offer this kind of backend as a inexpensive service (Parse is actually free for smaller sites)
Hey mate thanks allot I should of looked through the rest of your videos first before asking! lol Is it possible to make a very simple back end just with PHP MySQL and/or JS? I am just looking for a very simple way to serve up small amounts of data from a database. Cheers,
There are SO MANY PHP frameworks to choose from. The most popular would probably be Laravel, CodeIgniter, CakePHP. I'd either use one of those or use Parse's Javascript library - parse.com/products/javascript
Thanks allot man thats a big helpt!! Just found your tuts today and watched like 7 already. lol Keep up the good work mate! Cheers
Wow great. Now you'll year my annoying voice in your head throughout the day...BONUS!
This guy can TEACH! why is he not credited by name here?
For some reason it throws me an error of bad request, that the id is undefined. In the network tab it shows as: 'api/orders/undefined'
Is it because something is outdated here?? no idea., I gave up...
Tested my API and everything works when I send a direct DELETE request with some id through POSTMAN, so my API is ok.
Probably something is wrong with that line 58: .... + $(this).attr('data-id') , because it just doesn't understand what that id is. Fuck it
I don't understand why you called the url " /api/orders/{id} " to delete each order from the database.
Is every single order associated with a different backend script stored in a different url?
And how does the script know which element to delete from the database?
Shouldn't you have to write (in the ajax request):
url: " api/orders.php?id= " + $(this).attr('data-id')
or maybe:
data: " { id : " + $(this).attr('data-id') + " } "
so that the php script knows which id to pass to the SQL DELETE request?
EDIT: ok I think I understood. The backend script is basically creating a new web page for each order, while the DELETE ajax request asks the server to delete that web page.
I wrongly thought you were using databases, it seemed the most obvious choice for me.
VperVendetta1992 Most backend frameworks are smart enough to break up a url into "params" these days.
You can go DELETE /api/orders/1
or DELETE /api/orders?id=1
or POST /api/orders/delete {id: 1}
And configure the framework accordingly.
The standard for RESTful API's is:
Get an entire collection:
GET /collectionname
Get a record:
GET /collectionname/id
Add a record
POST /collectionname
Update a record
PUT /collectionname/id
Delete a record
DELETE /collectionname/id
VperVendetta1992 Oh, also, the backend script isn't making a new page for each order, it's using a framework like:
PHP:
- slim (super simple and easy)
- laravel (very popular and powerful)
Node.js:
- express.js (the standard for node.js)
Ruby
- Ruby on Rails (the standard for Ruby)
- Sinatra (very simple)
LearnCode.academy
Oh, okay, thanks for the clarification.
I haven't yet studied backend frameworks, so I wasn't aware of that feature. Good to know :)
please give me full source code
how can i search using name?
+Gaurang Londhe
The short of it:
create a "render" function
whenever your orders are changed/added/updated/deleted, they call the render function, which spits the array of orders out onto the page.
Render can also look for a "filter" input, and get it's value. If it has a value, it can only render the orders matching your filter.
What happened to Ralph?
Video is good but wtf that last part got my tongue and brain twisted
I was doing great till the hairy mustache!!!
AWESOME!!!!!!