3: Get data from a database without refreshing the browser using AJAX - Learn AJAX programming
HTML-код
- Опубликовано: 21 сен 2024
- Get data from a database without refreshing the browser using AJAX - Learn AJAX programming. In this lessons we will learn how to load more comments in a comment field using AJAX, PHP and a database.
--
mmtuts is a RUclips channel that focuses on teaching beginner and advanced courses in various multimedia related skills.
We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs.
AJAX for beginners is a how to series that teaches AJAX to people who are just starting out learning programming. The course teaches how AJAX scripting can be made easy and teaches how to create instant loading on your website withour needing to refresh the browser each time, and much more. Creating dynamic websites with AJAX is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners.
If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.
Hi mmtuts, is there a way to replace the existing comments with the new comments instead of loading new comments (or in my case an image) onto the existing ones? This would help me immensely on the website I'm creating. Thanks for the tutorials!
Here is how :)
In the AJAX code, add a second variable under "$commentNewCount", which has the current starting row nr from your database. So the variable will look like this, "$commentCurrentCount = 0;" because we load comment row 1 and 2 when we load the page. Then we also need to add 2 to our new variable, as we did to the $commentNewCount, and we do that the same place inside the click() function.
Then afterwards you need to add the new variable in the AJAX "load()" function, together with the other data we passed to the PHP script, to make sure we can use it in load-comments.php.
In the PHP script that runs after the AJAX call, change your LIMIT parameter in the SQL statement so it looks as follows.
$sql = "SELECT * FROM comments LIMIT $commentCurrentCount, $commentNewCount;";
What happens in the new SQL statement, is that by adding another number to our LIMIT, we tell it not only where to end, but also which row the query should start at.
Now it should work!
Extra note: If you want to change the number of results that pop up when you load more comments, for example from 2 to 8, make sure you change the number both places inside your click() function when you add to your variables.
How can I refresh the comments automatic?
Will Murphy Hi. Thanks for the tutorial. I am display 1 result at a time but its not removing the first result when I click show more comments.
Its all in the Select * from table order by date "acceding or descending" Something like this. Just use the same Select statement each time.
@@Dani_Krossing can you please make a video on this
This dude is like an entire Udemy by himself. He deserves 9 Million Subs.
True. when we start earning we must pay him back.
@@Kodeispoetry If I ever get out of my rut, every have a nice car again, a decent job, my own place (I used to have these things but went through a very very very bad time and lost everything) then I shall donate generously to his patreon or whatever his platform of choice is.
@@TheGrandmaster1 Indeed sir may you get back to prosperity.
@@Kodeispoetry Agreed!
You started earning ?? @@Kodeispoetry
For anyone looking for the SQL query code:
'insert into comments (author, message) value ('Daniel', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet non orci sit amet rutrum. Vivamus tristique iaculis justo. Curabitur arcu tortor.');
insert into comments (author, message) value ('John', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet non orci sit amet rutrum. Vivamus tristique iaculis justo. Curabitur arcu tortor.');
insert into comments (author, message) value ('Daniel', 'Justi curabitur arcu tortor.');
insert into comments (author, message) value ('Jane', 'Vivamus tristique iaculis justo. Curabitur arcu tortor.');
insert into comments (author, message) value ('Connor', 'Consectetur adipiscing elit. Praesent aliquet non orci sit amet rutrum. Vivamus tristique iaculis justo. Curabitur arcu tortor.');
insert into comments (author, message) value ('Joe', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet non orci sit amet rutrum. Vivamus tristique iaculis justo. Curabitur arcu tortor.');'
Simply perfect. I've always hated js and now it seems easier to understand.
Excellent video with a very patient explanation that doesn't make the common programming "teaching" error of assuming that the viewer has so much background knowledge that the lesson has no actual value to them.
You can shows all data from database by one click of a button instead of pressing it for many times, and replacing show more comment button into less comment button after showing all data. Thanks for this video man, it helps.
The best RUclips channel
Thank you
In Persian
بهترین پیچ یوتیوب
خیلی ممنون
Not sure if I watched this before. Ajax seemed not as important or difficult as php, sql, javascript, etc. But then, I found myself not progressing with Ajax for lack of good materials. Good thing that I found you AGAIN. Thank you Daniel.
Thank you Dan you're an actual life saver, this is exactly what I needed. Being able to pass variables into the AJAX function is so helpful
There's still a way to replace $result = mysql_query with $result= $con->query($sql); I had trouble retrieving data from phpMyadmin by working with the first part but I knew how to do with the second one already! Thanks @mmtus for this tutorial. Very helpful. I've been looking for this way too long
I don't even need to learn this right now and I loved the tutorial! Will for sure come back later when I need it! :D
Keep it up
Amazing work! 18 min 48 sec and you get to know so much! Connecting everything together is tricky and Dani explained it so nicely. Respect!
The video was very helpful to me. I understood everything even thought I don't speak or understand english very well. Thank you so much.
pure gold man, keep doing these kind of tutorials!
I don't usually comment or like youtube videos but mmtuts is in my opinion the best channel to learn from. I used to face difficulties in web dev but after following his tutorials. I learn so so much and I now ace every exam in PHP and JavaScript. Please would you mind teaching Laravel?
Thanks elder brother. I am highly benifitted from this video. For the first time I successfully use the ajax to load mysql table. Keep it up. Best of luck from my side. Sorry for my poor English condition.
I really needed to understand this, and found this video vey helpful. Thanks a lot :-),
og jeg er behørigt imponeret at din engelske udtale. Well Done
Clear Clean Screen.. excellent..
Great Video, really helpful. Thanks!
you're so professional even your "mistakes" seem professional to teach us something
Mannnnn... I was so annoyed every time I tried to follow a video it didn't work at the end. Its my first website and I was so pissed coz I dont't like JS but you made things look so simple 😍 and easy to understand.. Thanks a lot bro 🙌🙏 u just made my day 😊
Love you brother ! thank you very much . whenever i search for the php tutorial i see you in the top. im from sri lanka . thank you very much .
Just Brilliant! You put so much effort into clarifying everything and it has helped me enormously. Thank you.
thanks for this. you make me feel less alone in this crazy world of web development.
Thank you so much for all the tutorials you've put out !!
initial query:
CREATE TABLE comments (
id int(11) not null AUTO_INCREMENT PRIMARY KEY,
author text not null,
message text not null
);
download link is not working
Thank you very much, when I studied it from a book, it was so tough ^^. But with your lessons; Sounds so easy, thank you. Continue 🔥
THANKS THIS TUTORIAL SAVED ME
thank alot !!!! its well explained. i like the way you explain every move, been on this for days until iv found youre video ! great work !
You should do this again with PDO. Thanks
You're amazing. I've learned PHP, javascript and a little jQuery and AJAX by looking at your videos. Just wanted to say so, have a great day :)
You too :) I'm glad you like the lessons
You could’ve used limit and offset to load 2 more comments each time instead of gradually increasing the limit and loading all the comments again and again. Great tutorial for creating a perspective for a ajax beginner tho. Thanks!
Thank, very clear explanations
You are a genius teacher! Thank you very much!
Hey dani I love your tutorial. That's why learned the php from you. I hope you notice me. I hope you next tutorial will be creating a crud usin REST api using vanilla javascript.
Nice tutorial, clarified a lot of things in a short time. Thanks mmtuts!
Once again, you're my hero.
Daniels thanks for this video you are an amazing teacher
Great tutorial! At the 16:00 min mark, one thing to consider is changing the code to commentCount += 2; Perhaps the long way is clearer and takes less explanation, but it's not preferred, at least not for the teams I've been coding with. Thanks again!
your coding standard helps me a lot.
thank u?
Bro, I think PHP is still the best backend for web 2024-2025
Great tutorial. Thanks for the information
Thank you so much for your tutorial. Thanks to you, I do not afraid of ajax !
thanks for your useful and helpful video
Fantastic tutorial. Very clear and simple. Well done !
Top notch explanation.
oh my God thanks man i finally managed to run select code through ajax
still very relevant in 2023
Hi! thanks for the helpful video, but where is the stylesheet you talked about in the description?
Sehr gute Videos und gute Erklärung
simple and clear, thanks a lot!
the link is not working
404 Page Not Found!
pliiiz hepl !!
The same problem for me 😢
having same issue with mmtuts.net/course.php?c=ajax&l=3 but i am getting server not found
Youre tutorials are G R E A T! Thanks man!
Thank you for the easy and wonderful video.
Thanks for making me overcome my fear for php oop through your series on the subject. You are my best tutor on youtube. please can you create a single page website using bootstrap and php? thank you, I look forward to it.
I don't know enough English but I understand. You best
Great explanation, good example, thank you!
Bashaho tusi great o. Fantastic bro
You are amazing! Thank you so much for your tutorials, I'm a huge huge fan!!!!
Mmtuts! Thanks a lot this helps me, man!!
Great tutorial! But I have a doubt. Your query has only the LIMIT 2, but no OFFSET value. So will it keep fetch and load all comments right from beginning up to the limit each time?
I mean.. When the limit is 2 and on clicking the 'show more comments' button, it is displaying 2 new comments. so totally 4 comments. Is that fetching only the new 3rd and 4th comment? Or it again fetches 1st and 2nd comments as well?
You're correct to question this. The better way to set this up would be to pass a $_POST['offset'] variable and have a hard coded limit and also not use the .load() but rather a $.post('script.php', {offset : $('#comments .comment').length}, function(result, status) { // loop and append to #comments here })); The .comment class would be a new wrapped around the author name and the message output.
fantastic lesson
U saved mah life thank u
thank you so much you made my day , i hope you have better future ahead in programming (Y)
Thank you from the KRG.
Awesome! Thanks
good stuff, great work
Great stuff thanks
Very well made tutorials, Thanks!
Excellent video tutorial. I’ve watched some of your videos and they have been quite educative and inspiring. Please, can you do a video on a Comment and Reply System using Php and Ajax? I need this video in order to fix the problem in the comment section of my website. Thanks in anticipation.
Awesome man
Thanks
How to do the same things with element.... Like when i click on a different link the data should refresh accordingly. For example i have 5 links.. when i click on any link a set of data should comeup related to it... Please Help
Well done mate! This helps me a lot thanks!
One of the best tuts!!!!
This is a great video. How different is the process when your trying to connect to an email database to return analytics on the campaigns? And the database requires a username and API key to be passed for authentication. Thanks!
It was really helpful. Thanks a lot!
Great video. Where can I find the lesson file? The link mmtuts isn't working. Thanks in advance.
Excellent tutorial.
Awesome 👍
Hi all, I have a question and I hope that someone can help me... I wachted the video but I still have my problem.
I need to know how to only refresh a specific html div or section when clicking the button (and not the entire page)
Thanks for your help. Best wishes
Thank you soo much.
Feed your database:
INSERT INTO `comments`(`author`, `message`) VALUES ('Artur','My thanks !');
INSERT INTO `comments`(`author`, `message`) VALUES ('Bob','Working since 04/11/2018');
INSERT INTO `comments`(`author`, `message`) VALUES ('Jessie','jquery rules');
INSERT INTO `comments`(`author`, `message`) VALUES ('James','make more videos');
INSERT INTO `comments`(`author`, `message`) VALUES ('Ash','php plus jquery');
INSERT INTO `comments`(`author`, `message`) VALUES ('Brook','python 2018 !');
INSERT INTO `comments`(`author`, `message`) VALUES ('Martinez','My thanks !');
INSERT INTO `comments`(`author`, `message`) VALUES ('Hernandez','works');
INSERT INTO `comments`(`author`, `message`) VALUES ('Jair','marry christimas');
INSERT INTO `comments`(`author`, `message`) VALUES ('Mourão','.');
INSERT INTO `comments`(`author`, `message`) VALUES ('Trump','ward');
Hi, if you're still inserting multiple rows in a database that way, it would be less repetitive doing it this way.
INSERT INTO `comments`(`author`, `message`)
VALUES
('Artur','My thanks !'),
('Bob','Working since 04/11/2018'),
('Jessie','jquery rules'),
('James','make more videos'),
('Ash','php plus jquery'),
('Brook','python 2018 !'),
('Martinez','My thanks !'),
('Hernandez','works'),
('Jair','marry christimas'),
('Mourão','.'),
('Trump','ward')
Add a comma after each row that you want to insert, except of the last one
@@groofdesigns7808 cool, that's the short version !
I may be 5 months late but GroofDesigns' code will run much faster than the OP's code.
I once made a code where I had to insert 120 values with a click of a button (Java project).
Inserting in OP's method made me wait for several seconds while Groof's method worked almost instantly.
@@sharif47thanks
@@a.yashwanth glad to help you
Amazing bro its very easy to understand it on my mind
really heartfelt tute from your welcome more videos like this
Like always, great video man! I think I'm subscribed to your channel in 3 different accounts
Hey thanks so much for this production: It helped me pull together 6 months of learning. With so much information its amazing how a 20 min video can pull it all together. Thanks.
Hi. I'm not sure if you are aware, but you use the word "actually" a lot. I, for one, find it very hard to abstract from and have to watch you videos several times to get the full benefit. This is a shame, because you make some great and really helpful videos! thank you for those!
Yes I have those annoying speech patterns in my earlier videos. Hopefully all my newer content isn't as distracting :)
Great video! Easy to understand
thank for the tutorial, i just want to point that the link is not working
Thank for the lesson, extremely comprehensive
Please how can I replace the "load more button" to a scroll function? Such that once the page is scrolled down to the comments keep loading from set limit?
Very cool video easy to understand and replicate!
Man you are a life saver
simply is the best...
Hallo...
Thank for your help!
But how can I use this for refresh the same page putting form?
I like your voice and style.
Excellent course ! But seems like the assets are not available in the description anymore :/
I understand most of the code except the load-comments.php.
In your other videos you usually have a form with a url with an action calling GET or POST. Yet your php page takes the $_POST[‘commentNewCount’] So how is it passed to that php page in the POST global since it was never defined to be passed like that?
I get how to do so but what about a situation where I want to get the data from the database after every second or 2 and update the page . Won’t there be a lot of requests in my network tab? And if so will there be any side effects from that?
I mean can there be a way to specify to the ajax call to refetch the data after an amount of time?
Thanks bro.