Using jQuery to Update a Page Without Refresh (Part 1 of 2)

This video demonstrates how to update a page without refreshing using jQuery and JSON objects, a key feature of single-page applications (SPA).
WORK WITH ME👇🏼
✅ Implement features and fix bugs in your app: Live, one-on-one screenshare
prettyprinted....
💻 Code written in video
prettyprinted....

[@prettyprinted]

Join my free course on the basics of Flask: prettyprinted.com/introflask

[@nosduhz]

More Ajax, Jquery, Frontend/Backend with Flask videos! These are excellent and a subject that is not touched on enough! Marrying the frontend with the backend is constantly left out of the programming tutorial discussion.

[@freshbread5373]

You don't know how much this helps!

[@jimfilippou]

Dude how can you be so precise haha , whenever i want to add something new to my project there you are :p thanks a lot!

[@prettyprinted]

haha I can sense what projects my viewers are working on.

[@omarelmohri]

seeing this for the second time, it feels great when I can integrate this into my application.
You are doing an amazing job here

[@prettyprinted]

Thanks! I appreciate it.

[@sromanski]

Your videos are so well done. I really like how they deconstruct the fundamentals of web development.

[@prettyprinted]

Thanks!
I try to do more than just show you me writing code. Everything I type has a reason.

[@gobentley]

You're an amazing teacher! Always enjoy your presentations. This one was especially timely. Thanks very much.

[@prettyprinted]

Thanks!

[@kalaakaaram]

This was super awesome.. i need same approach for updating content without reloading ..but the content is huge a deeply nested json... If you have any tutorial for getting data from deeply nested json in python flask and javascript api.. please share... Thanks for the wonderful tutorial.

[@rameshgaming1020]

Good explaination brother!!!

[@prabhatbhartola9191]

HI, I have a doubt.
The route "/update" is returning jsonify. How is the webpage not being redirected?

[@realworldcodingapplications]

can this upate also be seen by other users / in different window? without refreshing?

[@Sirojiddinaka]

Thanks for your video, just wanted to ask about how to seamlessly update the table data from server? Say, in every second or 2 seconds? Just need to update the table value entirely.

[@dr-mnizam]

This video shows update data every 5 seconds from google sheet database: th-cam.com/video/CACsMxHalaI/w-d-xo.html

[@oluwatosinoseni7839]

Is there a way to use flash with this to show notification or something

[@luvrahooo]

Nice video thanks. I wanted to have something similar with autocomplete and select and then add to table in database which then updates the Table in template without refresh of page. Do you have any tutorial on autocomplete with wtf flask forms?

[@javierbosch1338]

awesome. great video! Now we need some lazy loading to add content with flask as backend!!!! Highly requested tutorial as well!!!

[@prettyprinted]

I need to get back to making three videos per week, so yeah I can do that too. I'll release the HTML video on Wednesday, and then I'll release the lazy load video on Friday.
Thanks for the idea!

[@javierbosch1338]

Pretty Printed awesome!!. looking to learn how to efficiently manage loading data in an efficient manner like facebook loading. that would be highly appreciated and a great add to the tutorials!

[@AnshumanSharmadev]

Great video. I have a query - How do we do this thing in the DataTables? I'm getting the data and it appends to the table but I don't see any pagination in my datatable. It would be great if you could suggest something. Thanks.

[@zsirothehero4330]

Can I still use this? Or is there an updated version of this?

[@russellculver2757]

Hey, having a hard time with this one. I'm using Flask-WTForms and a SelectField. The ID is being passed correctly to the backend route, however all form data is 'None'. It's also a cell in an interated table, but given it's grabbing the ID correctly I don't think that's an issue.

[@th1200yu]

How to add jinja2 filters (like safe | nl2br etc) in req.done part where your returning the text.

[@MR-jj5dn]

Struggling with how to implement CSRF functionality to this AJAX call. Anyone been able to do it with this example? The example Anthony works in this video works, but I need to make it resistant to cross site request forgery attacks. By the way, is flask wtforms susceptible to XSS or CSS attacks, or are they same?

[@ziad7337]

Thank you so much

[@paristar3079]

Can I load a page without refreshing but it's url should change

[@vincemcgaj628]

Again great video! Thank you so much!!

[@prettyprinted]

You're welcome! Thanks for watching.

[@realfranzconradvonhotzendo952]

Thanks a lot m8 keep up the cool content!!

[@sumir729]

How can i delete those data without refreshing the page

[@eddurguti]

This is great, what if I wanted to update the input field , for example name field

[@prettyprinted]

You can use jQuery to update anything on the page. $(input_selector_here).val('whatever you want to appear in the input');

[@mrsterbenblack9270]

How do you display the latest data in the web from database when data is inserted into a database?

[@prettyprinted]

You have access to the data before it's sent to the backend, so you can use JavaScript to do anything you want with the data.

[@crazytux2999]

Nice! Didn't know AJAX was simple as that!

[@prettyprinted]

It could get more complicated. :)

[@nosduhz]

Get more complicated! Serialization, passing sensitive data, scalable Ajax with multiple ajax functions on the same page, using an API Ajax forms. I want it all!

[@prettyprinted]

lol I'm working on it.

[@philandrew6691]

Hello great tutorial, how about without clicking any button and every time the admin changes somethings related to the server or database, it will also automatically update the client side without pressing refresh? is it possible to do it in jquery?

[@prettyprinted]

Yep that's possible. You'll just need events on the things in the UI that can trigger the database update.

[@rahulbhardwaj6487]

@@prettyprinted Could you please make video on this topic . It will really helpful for us . Thank you

[@nbme-answers]

hey! awesome!! thanks anthony!

[@prettyprinted]

You're welcome!
Thanks for watching.

[@glennmateus1977]

Hey bro! Whats up ? What is the language used to do the backend part in this video?

[@prettyprinted]

Flask. It's a Python framework.

[@sisyphus_619]

could you do a tutorial on inserting multiple data into the database using flask so that you dont have to do it manually? some automated data insert stuff. Thanks in advance if you do it.

[@prettyprinted]

SQL is probably better suited for this. Do you have a specific example of what you're trying to do?

[@jamesmuriuki3785]

Always awesome!!! Thanks

[@rangabharath4253]

awesome 🙂

[@MuhammadMoazzamhere]

how can we do this in Django? any help would be appreciate

[@prettyprinted]

I'll consider a Django version.

[@jmpersic]

@@prettyprinted Django version please! Awesome video.

[@kobitarkotha6211]

Brilliant

[@shango1964]

Suggestion: Add "part 1" to this video's name and the follow up video "part 2".

[@prettyprinted]

Done

[@jhicinternational]

Thanks!

[@prettyprinted]

You're welcome!

[@raylandgivins26]

is this code still available?

[@prettyprinted]

Yeah, you can get it here: prettyprinted.com/l/ccg

[@outgrown3094]

it doesnt work

[@forithall2417]

It doesnt execute the /update..............