Using jQuery to Update HTML Without Refresh (Part 2 of 2)

[@DarkzSitesCompanyKz]

I love when you upload a new video! New things to do on flask projects! Thanks man.

[@prettyprinted]

You're welcome!

[@patrickwellborn6252]

Yes!! Thank you!!! I spent so long trying to find out how to do this...Your explanations were excellent and helped me extend the lesson to my application. Have a great day!

[@a.d2761]

You're a life saviour.

[@alyahya]

Thanks. Can you reload your code again? because your URL doesn't work.

[@mustaphab32]

yeah it doesnt

[@-0-__-0-]

A good advice though, for beginners who decided to move sending form data using flask to sending form data using ajax, don't forget to remove method and action inside your form or your ajax call wont work.

[@jamespaulchibole266]

Thanks a lot Anthony for the wonderful video. I am updating a list within a page that is generated using a for loop and has flask pagination. What modifications do I need from what you have explained about refreshing to the next page number of items in the list without refreshing the entire html page?

[@keennroechenfroilan3219]

Thank you so much bro. Your videos helped me a lot!

[@thisisstan5405]

Hi Anthony, Came across this vid while trying to figure out how to POST via jquery. This tutorial was very helpful in starting me off and is still relevant in 2021! Currently trying to figure out how to await properly (my server calls an API ). This seems to cause my template to be returned before the variables are set. I believe JQuery promises are the way to this, but I'm still unclear. Regarding your tutorial, I tested your code and would like to suggest some improvements: * Change SQLAlchemy's database URI to app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'. Your current code uses absolute path, which is why I assume some can't get your code to work. * Why not encapsulate the controls in a form? That way you could use onsubmit() and account for carriage return. * Fetch resources from google's hosted libraries developers.google.com/speed/libraries. I tried to update bootstrap's version as well, but I guess those introduce some design-breaking changes, and I really don't want to fiddle with CSS, * Currently your member id updates before the fadeout animation. I used a promise and chained it to .done() and did a fadein() after replacing the HTML. I'm a complete newbie to JQuery so please excuse my ignorance. I've made those suggestion changes on my end, so if you have a repo somewhere, I wouldn't mind opening a pull request. Once again, Thanks!

[@jimitshah2118]

i have one index page that shows all data in table and table contains edit button when i click the button that id data toggle in form when i change data in form click on update button page refresh but i don't want update that page so what is ajax for this ??

[@ip-l934]

This is great! Looking how to tweak this to check for updates on a db, instead of continuosly refresh the page! You have a new subscriber here!

[@prettyprinted]

Thanks for watching and subscribing! If you only want to update the page when the database has changed, you can check this on your backend and only return HTML if something has changed. If nothing has changed, don't send any HTML, and have this checked on your frontend.

[@harrythuku628]

Hello Anthony. Thank you for your videos. They have been really helpful in my learning path. I have a question though. Every time I load my page extending my base template, I get errors loading jquery. I would like help with that

[@Daveit93]

Mentioned you to the author of sanic that you'll be doing a tutorial on Sanic. They are excited and we're growing quick. I'll be making a tutorial with Sanic. It is a realtime chatapp with language translation using deep learning with pytorch. But I'll post it later after you've upload a tutorial on the basic. I'm not good in teaching :)

[@prettyprinted]

That sounds great! You should probably start working on it now though because I don't know when I'll be able to make the Sanic tutorial.

[@pauldriscoll6319]

one question what is the advantage of html vs json update is there a preference and why and when would you use one vs the other ?

[@prettyprinted]

Sending html is more straightforward, but it's not as flexible as sending JSON.

[@stevekim6923]

Hello Anthony. Your video is the best I have ever seen. I am trying to modify your program by inserting live video stream in the index.html of the Part 1 of 2. The video stream is working just find; however, updating the individual field is not working. Live Streaming right below Members. Please help.

[@olegsomov6635]

Hello, thank you for video, really helpful, I will try to update a table using this videos, hope it's gonna work). Question for you, what is the extension do you use in Mozilla, when you looking to the response? Thank you!

[@prettyprinted]

It's Firebug, but I don't believe it's under active development anymore because the standard developer tools do the same thing.

[@andyb3854]

Hi Anthony, another great video! How would you modify this to handle adding new items to the database? I already have posting form data via ajax using your other video, just not sure how i would update the table on the page to show new entries without reloading

[@andyb3854]

Hey Anthony, think i answered my own question. after my add route it redirects to another route which has a simple .all() query. The data is returned and i use .replaceWith in my jquery to replace the table with the new data. Does that sound sound correct?

[@prettyprinted]

@@andyb3854 Yeah, you can do that, but it may be cleaner all in one route instead of doing the redirect.

[@jonathanbereyziat9380]

@@andyb3854 Hi how did you change the value of the table in the template with .replaceWith() I don't manage to understand

[@ara7546]

hey can you do jwt authentication exemple with flask-mysql ?

[@prettyprinted]

Yeah, I can add that to the list of videos I'm going to make. Thanks for the idea.

[@ara7546]

don't forget to do password resetting also, 2 factor authentification would be also great !

[@prettyprinted]

I'll add that to the list! Thanks.

[@baxiry.]

Thank u very much

[@prettyprinted]

You're welcome. Thanks for watching!

[@shango1964]

How about a PJAX version?

[@prettyprinted]

I'm not familiar with PJAX, but once I learn it, I'll definitely make videos on it.

[@genuinepshyco4050]

ok