jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)
HTML-код
- Опубликовано: 10 сен 2024
- Free RESTful API to use for practice!: rest.learncode....
In this jQuery Tutorial, we're finishing up our single-page ajax application by making an edit mode and enhancing our templating. We've been using a RESTful API so far, so to edit a resource in a standard way, we will just make a PUT request to /api/orders/{id} to update it. jQuery AJAX is simple, powerful, and can take your javascript code to a higher level when used properly.
Lesson #1: jQuery Tutorial for Beginners
• jQuery Tutorial #1 - j...
Lesson #2: Listen to user events and respond with jQuery actions!
• jQuery Tutorial #2 - E...
Lesson #3: Clean up the jQuery by putting some data in the HTML
• jQuery Tutorial #3 - W...
Lesson #4: "DOM Traversal" with jQuery
• jQuery Tutorial #4 - D...
Lesson #5: Building a jQuery Tab Panel Widget
• jQuery Tutorial #5 - B...
Lesson #6: Building a jQuery Slider / DOM Caching
• jQuery Tutorial #6 - B...
Lesson #7: JQuery Ajax tutorial #1
• jQuery Ajax Tutorial #...
Lesson #8: jQuery Ajax tutorial #2 - Posting to backend
• jQuery Ajax Tutorial #...
Lesson #9: jQuery Ajax tutorial #3 - Mustache.js for templating and deleting posts
• jQuery Ajax Tutorial #...
Lesson #10: jQuery Ajax tutorial #4 - Better Mustache templating & and "Edit mode"
• jQuery Ajax Tutorial #...
~-~~-~~~-~~-~
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
• Responsive Design Tuto...
~-~~-~~~-~~-~
Tried learning from Coursera, Code Academy, Treehouse, udemy, etc, some were either too basic, too slow, uninteresting, etc but you have done an excellent job here! You are quick, accurate and share what's required. Looking forward to more such tutorials. Keep up the good work of sharing knowledge :)
Thanks a ton!
Yeah! I agree with you. I'm kinda like about to leave beginner level but there aren't any good materials out there for me to progress...either too easy (repetitive), too hard, too boring or just too damn slow for me to remember things and have to go back to "...what was he saying...?"
But this is my type, perfect! :D
Just wanted to let you know that you're an outstanding instructor. You really break concepts down and make them easy to understand. And I like how you constantly place an emphasis on DRY code because it's something I want to implement in my own work. You keep it super professional and make sure we're learning not just the basics, but the work flow of updating to reflect cleaner code. I've just been watching your tutorials non-stop, then pausing to do the lessons on my own again and again to let the information sink in. It's truly amazing what you've done for me, and for other students. Thank you!!
Your course is still the best after 10 years. thank U!
One of the best channels! Concise and to the point!
Thanks!
I keep coming back to these videos, because you explain things very concisely.
Holy crap man, you are amazing. I know these videos are old but dang they are so good!
really like the way you teach people about programming by writing a real world project, it help a lot! Looking forward for more example projects. great videos.
Thanks!
liberty justice那年，宇宙的一边有一个脑残的小孙子，它叫liberty justice
liberty justice
这个liberty justice 无比渴望着被众多爷爷们狂虐，被公驴干爆
liberty justice
小孙子怎么没声了？被你爷爷干的气死过去了？真不禁虐，呵呵ʅ(‾◡◝)。
liberty justice
看你那小孙子样，哈哈，以为过一会再回复你爷爷就不过来疼爱你了？孙子的小伎俩ʅ(‾◡◝)。
Thank you so much. I have never used JS/JQuery ever. Now an hour after watching your series, I'm ready to do some fun stuff.
This series was crazy helpful. I spent all today and yesterday working through this playlist, and building the server to support it using express and mongodb, and I feel a huge sense of accomplishment. You're awesome at this.
I'm starting the computer science program at UCI this fall and I feel ready to kick its ass thanks to you.
Jeremy Somethin awesome, way to go! Yes, knowing some webdev going in will be a huge help for you.
This is a GREAT resource.Thank you for making these.They gave me much better understanding of what is happening behind the curtains of front-end frameworks.
Even as a professional developer, I actually learned a lot from that video. Nicely done!
Appreciate the tutorials bro, I went from hero to even more of a hero in ajax after watching this!
ManMadeToons Thrilled to help! Thanks.
meen i love your tutorials, i watch them all the time and am getting really good at web. i was in the native app development field, you know the android stuf and C++ languages. your tutorials are giving me a great headstart. i actually have downloaded all the playlists and trust you me, you are doing a great job. upload more, cant wait to see your latests. God bless
Maxwell Wambua Thanks a ton! Glad to hear it's helping you.
I just want to say, I'm super grateful for these videos. Thank you so much. I've learnt Javascript, JQuery from your videos. Going to learn more stuff!
I really can't tell you how much this has helped me working with APIs. This only thing that I could recommend if you were going to add to this is handling links and dynamically changing the href when updating. However, all around great video series.
The whole tutorial is mind blowing simple and excellently explained ! Thank you so much for this !!!!
Thank you for this series of jQuery tutorials. They have helped me a lot with understanding the basic concepts.
+Dániel Tamás Fazekas Awesome to hear, thanks!
This tutorial is absolutely excellent. Even being a professional web developer myself, I learned a few new things about jQuery in this playlist. The code written was perfectly explained, and the examples were very clever. This would be a great learning experience for web developers of any skill set. Good Job :)
Developer Dude Hey, thanks a ton! Means a lot!
Sure thing, your tutorials are great just to let you know.
Cant thank you enough. your explanation is so clear... i tried codeschool, treehouse and all of that.. you are much better
Fabulous! I am confident that I can apply the AJAX principles to my current project. Many thanks!
Great jQuery tutorials! Thank you very much!
I'll recommend this material to anyone who wants to start working with jQuery.
Thanks!
Great Video, and very easily explained. Thanks a lot.
I haven't seen explanation as organized & fast & nice & understandable tutorial as this course , you had solved so many things to me , i hope you will make a full web app tutorial (html , css , jquery , ajax, php) like this order app , ANY WAY
+Razen Kellesly Thanks, Razen!
Glad it's helped you out.
Really great job, very nice way to teach...Finally understand many things...Thank you
Love the tutorials Will. One thing though, it would be nice if you made some more // comments above the code paragraphs, since it's easy to get lost on what's going on when you jump through 2-3 different documents.
Ah, I can totally see that. Thanks for the input. I'll work on that in future videos.
thank you sir .. Ajax curd with api essential example that what I needed ..
Thank you for this series, got an idea now. I have to do more practise to get more familiar with these all , will do :)
Thank you for your videos! Simply, clearly, it is interesting. More videooooos !!!!
Thank you I have got a lot of knowledge whith your Jquery tutorials.
I have to say all code runs fine when I have copied from your videos .
brochazos Awesome, great to hear!
daam this is a good video series! Thanks! Only this last one is kinda hard cause of the speed and quantity of information. But priceless anyway! Thanks! :D
Thanks for the Update video! Always seems the U in CRUD is the most labor intensive. Great video series.
nicely done so clear and concise
Very fun to learn with you man! Thx
Awesome series!
Wonderful job! I'm subscribed and waiting for more.
It will be interesting to see the same tutorial made modular
You are a great tutor 😊
Thanks for this wonderful tutorial Everything works for me except the save operation. When i click on the save button, nothing is getting saved. How can i debug it? Please let me know. Thanks.
Css edit code is not clear to me. When I try the code something weird is happening and I am getting the name and drink as u defined. Can u help me plz?
Hi brother, do you have the source code for this whole tutorial? Anyway thanks for your efforts you put in all your frontend tutorials.
i just was looking for how can i learn to create api json files for post and delete and put , is there any sites or channels gives tutorial about it ????
Very helpful, now i can update my website.
But first.. need to check Vue tutorials :E
Thank you for your tutorial, please i want o view data by id but when i tried to do so I am getting error to my page
awesome, very concise!
Wow, this video took some time getting through everything. Great video. Lots of information. Ran into a couple of issues.
1. The template tag is not supported in IE11. [I test things in the newest stable release of Opera, IE, Chrome and FireFox]. Instead of using Script tag, I went with CSS and added `template {display: none;}`. This way the HTML 5 tag is still being used, but is not showing in IE. Haven't tested in older browsers, but I think it'll work.
2. `display: initial` doesn't work in IE11. Looking at W3C; docs.webplatform.org/wiki/css/properties/display ; initial isn't a valid option for display. I noticed that the editor used in the video didn't like `initial` either, the coloring of the text was off. It does work in the other browsers I use. Funny huh? I went instead with display: `inline-block`; which is a valid W3C option. Seems to be working correctly.
Thanks for the great videos. On to the next play list!
very good explanation...
Great videos, I just subscribed. keep it up bro!
Great series man!! Awesome, I just wanted to ask if you could show how to do the backend API or better make the user login before he has to POST, PUT or DELETE the data. Thanks a lot for the great tutorials!
Georgi Arnaudov I have a decent bit of the backend stuff covered in this playlist: ruclips.net/p/PLoYCgNOIyGAACzU6GliHJDp4kmOw3NFsh
You would use passport.js for user authentication/authorization
Is this a safe way to submit an edit form? Is it protected against csrf?
very gooood work thanks
It would be nice if you made a video on how you make the backend. I use PHP usually. I can make the php code at each endpoint that processes the post, put or delete requests but what is the best way to do it?
+Michael Stokes I'm using node.js...here's a whole playlist on it!
ruclips.net/p/PLoYCgNOIyGAACzU6GliHJDp4kmOw3NFsh
awesome videos! thank you so much :)
The delete function works but How do you change the function to delete all the ids on one click?.
very helpful... I got exactly what i want...is there any chance of more tutorials..which take me to the advanced level of jquery...
Superb
Very nice
for some reason my did not work , (the X button did get the id, but not the LI (i inspected it )
so the PUT url was wrong (had no id )
i had to change it to friend-id (im using your restful api ) & i made it work ,
This was really helplful will ! thanks a ton !! sensei ?
Hi, I have a question. When you do .find() to get the span values into the input val.(), why did you use .html()? I experiemented with .text() instead and it worked also.
With .text() , you can't put html code I think
Thanks! You save my life 😂
so are there any more videos on jquery or is this the final for the whole jquery
awesome
thanx for tutorial. can u tell me what back-end language ur using?
thanks Bro!
Clever css class use. Delegate is indispensable. Jquery with css selectors e.g. closest and find. Really good as usual, quite a bit to take in in this lesson, may be a good idea to split at about 6:17 but Thank You for the quality! (my version: codepen.io/drikting/pen/xOxjjp/)
extremely sophisticated for me :(
good job showing the css file in the last video........................
Love this video series. I have a couple questions if you don't mind.
(1) Why do I often see examples of PUT requests made with the ID in the url when data is also being sent? It seems to be standard practice, but why not just always send everything in data for all requests?
(2) I'm on a team with several C# MVC server-side coders and I always have to wrap my PUT, POST, and DELETE data in JSON.stringify() when I notice you didn't have to here. Is that because you're using something else than C# MVC or is there a newer method of accepting my data they aren't aware of?
(1) it's a REST ideology really. URL with an id 'identifies' some existing object and PUT made to that URL updates it.
great!
This is nice, but I would have wanted some discussion around security as well. I mean, if this script is on a web page, what prevents someone from sending a delete request or anything else? How to protect the JSON?
Also I don't think you mentioned a lot about the IDs in the JSON. Are they increased automatically? Are they always there on last element?
A general rule with Javascript...it's really not secure. At the end of the day, anything that you can do in javascript in the browser can be hacked by a user.
The security will all come from the backend PHP, Ruby on Rails, Node.js or whatever:
- User A will always be able to send a delete request for User B's tweet, but backend will not allow it.
Backend is also where the Id's would come from, they are usually created and incremented automatically as things are added into a database.
The good news about frontend...though you have to haggle with CSS across a lot of browsers and devices, you don't have to worry about databases or security.
LearnCode.academy
Thnx for the answer! Yeah, security sure is nice for those who don't have to care about it =) It's a huge hassle from what I have understood. I think you should have mentioned/discussed this a bit in a final video to wrap it up a bit, cause of ppl would just go implementing what they just seen, it's not really going to be contributing for a safer web. Although, since you didn't go through how to set up the JSON stuff, someone new to this wouldn't be able to run the code you tutored any way. I guess there are tutorials for the JSON as well though. Thanks again for the series, wouldn't mind having some more on jQuery on perhaps more advanced stuff and maybe a debugging series.
FYI - You are my best friend :)
This is very helpful. Is there a zipped file?
how can we create our own api?
hey,how your url dnt have extension for file??how u do that?
A lot of backend services don't return a file. An API, for example could be mysite.com/api/users
The backend wouldn't get a users.html file, it would search the database for users and return a list of them in json format.
Also, depending on how the backend is setup, you could program mysite.com/users to respond with users.html file...so it really depends on how your backend is setup.
A standard web-html-content setup will just point any file request (mysite.com/file.html) to the www folder (returns file www/file.html)
LearnCode.academy one more request,please make a video tutorial for ajax upload file/image with data in same form,Thanks.!!!
It would be really helpful to have the code zipped available.
I learn from playing as much as watching!
I've been trying to put up the code to plnkr.co or codepen code these days. Sorry I didn't get it for this video.
hi sir your edit code is not understandable ..
This is probably jQuery lesson 10. Please update the title.
also concept
jQuery website:
"As of jQuery 1.7, .delegate() has been superseded by the .on() method."
Yeah, you're totally right.
There's actually some ongoing debate about it. Since there are no plans to ever remove it from the codebase, a lot of devs still prefer to use .delegate() since it's more visually-apparent that a delegated event is taking place.
I know personally for me, the newer .on syntax isn't as easy to notice at a glance.
LearnCode.academy
I know what you mean. Another question, I found this in the jQuery website.
"Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers." ... Have you tested those HTTP requests on most popular browsers?
Thanks for the great videos.
If you do need to support old browsers that error-out when trying a put/delete request, the standart way around it is to use a POST and add action: 'delete' or action: 'put' in the data object.
Most backend frameworks accept this as a put/delete request, and if not, it's easy to check for.