finally a tut on AJAX+mysql+vanilla JS. everyone is teaching this using jQuery, but i don't need to use the entire library just for it's AJAX methods. i'm trying to build a live chat app and am going to try it using the info here. THANK YOU.
You're welcome. Good luck with your live chat app. I have already created a tutorial for live chat app, below is the link: ua-cam.com/video/Ozrm_xftcjQ/v-deo.html
Absolutely brilliant, been looking for an ajax tutorial that handles arrays and finally someone goes a step beyond the normal simple data examples. New subscriber bro.
👍 This was good! But for a noob to PHP, audio explanations would have made this perfect. Even though a book is silent, one can still read code explanations and details.
Hello there, can you help me? I want to use that "data" array in an if to check is a certain column is set to 0 or to 1, i defined var data = {} outside of the function but It's not working, I'm doing an if (data["article_flag(the column)"] == 1) { function to execute }
This is a new language for me, as I have been writing in pure PHP for years. I was able to follow this video and retrieve all rows from my db where a column had a specific value. The problem is, that when I add a new row in the db that has the same value at from my WHERE clause, the new row never shows up. I still have to force a refresh (F5). This is the same scenerio in multiple web browsers, so I'm thinking it is in the code (probably my fault, I am sure!) Any thoughts on why this would not show the new rows? The table I am querying will be INSERT only, no UPDATE or DELETE, to maintain data integrity. I just edited one of the rows directly from the database (not yet live, it is in the testing phase) to see if the changes would show on existing rows that are being displayed on my test page, and they don't show updates either! What am I missing?!?
You need to insert the record using AJAX. You can follow this: ua-cam.com/video/UDmAlpYVwbU/v-deo.html When the response is received from this AJAX, you can send ajax the AJAX to get all records.
I added a Button. So that the result is displayed only after pressing the button. But the problem is that the result are displayed multiple times on button press. How to clear this?
@@AdnanAfzal565 Thank you. I know only php mysql. If I add this feature, in average how much time it saves for a general page with perhaps 20 fields to be printed?
Simple code will work fine. But if you have a very complex sql query, are performing certain operations on arrays and objects. Or using 3rd party library, then it is a possibility.
Hello, Thanks a lot for this... Doing just that i seem to be limited to retrieving only 150 rows... if i try to retrieve more, i get an empty string instead... I'm on Xampp/mariaDB - I tried to set the post_max_size to 0 in the php.ini file, to no avail... even restarted the server afterwards... still limited... any thoughts?
@@AdnanAfzal565 Thanks for getting back to me so quickly - turns out it was accents.. the 151st row had an accent and because of that the query returned an empty set... been trying to fix this but none of the solutions i found online are helping so far :/
@@AdnanAfzal565 thanks, still doesn't work unfortunately :/ Getting this: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Also converted my DB, Table and column to utf8mb4 - to try and fix this... doesn't seem to work at all
Searching for days, and found this. Absolutely amazing. Best is so many other sites don't have code download, thanks for that. The mysqlsampledatabase.sql to create the database couldn't be better. Thank you so much for this, from a beginner who has learnt so much from you.
Thanks for this!! Beeen searching for pure js live data.. anyway, is it possible for me to put a button at the end of the table? hope you could recommend me a video that includes an action at the end of the table where the user could delete or edit the column.. thank you!
Hi. Because if you have a lot of data then it would be difficult to send as PHP objects. So we send them as JSON string. Now data will be sent as string not objects.
I figured out that the problem is In array_push statement. Array_push($data, $row); I tried to delete the $row var in array_push statement and the result is not duplicated. Inshort the problem is finally solved. But still I don't know the conflict after I removed this. But I still wonder why my data is duplicated output, while in your case is not? I didn't understand yet what is the main purpose of array_push.
@@markystudio14 array_push insert the data in array. Check if you are receiving duplicate data from database. May be the problem is not in PHP code, but in MySQL query.
Can you please make a video for fetching only when there is new data using long polling method, because as I have heard, this method would put a strain on the server.
Hmmm..... That could be achieved in pure PHP in a couple of lines.... I suppose if you have an adfested page where you want to only update the 3 square inches of actual information of value without loading all the ads again, JavaScript is useful. Still.. at least a video showing Ajax WITHOUT using JQuery. Good.
@@AdnanAfzal565 I have to use timer or something like this to refresh data on website ? When I am changing data in database now, website displays the same data like before (are unchanged). When I refresh website only by F5 - data is changing. What's wrong with me ?
This is by far on of the best tutorial I've ever seen. Short but includes each and every possible information.
Thanks a lot.
You are welcome. And thanks.
finally a tut on AJAX+mysql+vanilla JS.
everyone is teaching this using jQuery, but i don't need to use the entire library just for it's AJAX methods.
i'm trying to build a live chat app and am going to try it using the info here. THANK YOU.
You're welcome. Good luck with your live chat app. I have already created a tutorial for live chat app, below is the link:
ua-cam.com/video/Ozrm_xftcjQ/v-deo.html
After hours of searching and nearly giving up, you showed me how it to do it. Thanks a lot, this video was very helpful.
You are welcome.
Glad it helped.
Dude, i have no idea what to say. It's just like magic. I am now a fan of ajax now. what a beautiful way to interact with the database! Ty so much!
You're welcome.
you are saving me now. thank you from Phnom Penh Cambodia. :)
Absolutely brilliant, been looking for an ajax tutorial that handles arrays and finally someone goes a step beyond the normal simple data examples. New subscriber bro.
Thank you very much. Glad it helped.
This tutorial actually saved my Ass, thank you Adnan Afzal
:) you're welcome.
This is the best AJAX tutorial by far. Thank you for this.
You are welcome.
Thanks so much for this. I needed a really simple and pragmatic approach to get data and this simple solution came at the end of 5 hours of faffing.
👍
This was good! But for a noob to PHP, audio explanations would have made this perfect. Even though a book is silent, one can still read code explanations and details.
Yes, audio will be added soon.
@@AdnanAfzal565 Please, and thanks you.
Thank you! Straight to the point and easy to follow.
You're welcome.
THANK YOU! The only easy to understand and to use tutorial out in this trash internet
You're welcome. Glad to help.
This is so understandable. Had to send this to my peers...! thank you
Thank you.
That's it I've been looking for !!
Thank you !!
You're welcome.
Thanks dude, not exactly what I was looking for but shed a enough light to resolve my problem...btw after a lot of hours surffing on Internet
Thanks.
Excellent.....Made my life easier
wonderful and different from the way we normally do.
awesome tutorial thank u sir
Very nice activity .....
Thank you so much 🙂
great Effort and magnificent method.
Bro this was so helpful. Thank you man!
You are welcome.
Brilliant, thank you Adnan for this tutorial.
Great Video Get helpful
Glad it helped
Hello there, can you help me? I want to use that "data" array in an if to check is a certain column is set to 0 or to 1, i defined var data = {} outside of the function but It's not working, I'm doing an if (data["article_flag(the column)"] == 1) { function to execute }
In javascript, you need to use data.article_flag, dot.
Excellent!!!
Many thanks!
Thank you so much really helpful superb....
my pleasure
I had to change mysqli_fetch_assoc to mysqli_fetch_array in the .php file and it worked, thx
You're welcome.
how is the where condition using passing parameter ?
If you modify the table in background does it reflect the change without loading of page ?
No, for realtime update, you need to check our Socket IO tutorial:
ua-cam.com/video/56_k1botx9M/v-deo.html
nice explanation
Thanks. Keep sharing please.
thank you so much really helpful superb only sound is required
Thank you. Yes, sound will be added in future tutorials.
You are awesome bro, thank you so much
Happy to help
How to get any specific lines of data ?
If I want to display data for only 1 Employee ??
You can add a WHERE clause in the query, for example:
SELECT * FROM users WHERE id = 3;
Well done, Thank you for this video
Thanks. Glad to help.
hi nice video, so the code to read the employees table is
$result = mysql_query($conn, "SELECT * FROM employees");
right?
Yes. That is right.
Intro kamal
Thanks.
Let me know if you want to have one with your name and logo.
This is a new language for me, as I have been writing in pure PHP for years. I was able to follow this video and retrieve all rows from my db where a column had a specific value. The problem is, that when I add a new row in the db that has the same value at from my WHERE clause, the new row never shows up. I still have to force a refresh (F5). This is the same scenerio in multiple web browsers, so I'm thinking it is in the code (probably my fault, I am sure!)
Any thoughts on why this would not show the new rows? The table I am querying will be INSERT only, no UPDATE or DELETE, to maintain data integrity. I just edited one of the rows directly from the database (not yet live, it is in the testing phase) to see if the changes would show on existing rows that are being displayed on my test page, and they don't show updates either! What am I missing?!?
You need to insert the record using AJAX. You can follow this:
ua-cam.com/video/UDmAlpYVwbU/v-deo.html
When the response is received from this AJAX, you can send ajax the AJAX to get all records.
Nice tutorial
Thanks.
I added a Button. So that the result is displayed only after pressing the button. But the problem is that the result are displayed multiple times on button press. How to clear this?
Check if the function is being called multiple times.
what is the benefit of bringing in Json, while the record row can actually be printed directly?
If you directly print the data using PHP, then it will increase your page load time. Also, if there is any error in PHP, then it will crash your page.
@@AdnanAfzal565 Thank you. I know only php mysql. If I add this feature, in average how much time it saves for a general page with perhaps 20 fields to be printed?
It depends on server. May be 1-2 seconds.
@@AdnanAfzal565 how come php echo will crash more easily?
Simple code will work fine. But if you have a very complex sql query, are performing certain operations on arrays and objects. Or using 3rd party library, then it is a possibility.
Hello, Thanks a lot for this...
Doing just that i seem to be limited to retrieving only 150 rows... if i try to retrieve more, i get an empty string instead...
I'm on Xampp/mariaDB - I tried to set the post_max_size to 0 in the php.ini file, to no avail... even restarted the server afterwards... still limited... any thoughts?
Check if there is any limit in query. Or in loop.
@@AdnanAfzal565 Thanks for getting back to me so quickly - turns out it was accents.. the 151st row had an accent and because of that the query returned an empty set... been trying to fix this but none of the solutions i found online are helping so far :/
@@ReubenMRU Try following before running the query:
mysqli_set_charset($connection, "utf8");
@@AdnanAfzal565 thanks, still doesn't work unfortunately :/
Getting this:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Also converted my DB, Table and column to utf8mb4 - to try and fix this... doesn't seem to work at all
@@AdnanAfzal565 Thanks I got it to work - not sure what exactly did it though, lol...
In my case it stores html into json, is it bcs I am using Smarty?
Yes. Smarty template might be doing the conversion.
Good video I subscribred!
Thanks.
Hello, if the file of the array I have it in a hostin I would read the data tabien, that list can show it in list like jquery mobile?
Thank you.
Yes, you need to call AJAX in order to do that.
love you mannn
Searching for days, and found this. Absolutely amazing. Best is so many other sites don't have code download, thanks for that. The mysqlsampledatabase.sql to create the database couldn't be better. Thank you so much for this, from a beginner who has learnt so much from you.
Welcome. Keep sharing please.
Thanks for this!! Beeen searching for pure js live data.. anyway, is it possible for me to put a button at the end of the table? hope you could recommend me a video that includes an action at the end of the table where the user could delete or edit the column.. thank you!
Sure. You can follow this:
ua-cam.com/video/qYbkQpSI9_o/v-deo.html
@@AdnanAfzal565 wow, you are active until now. thank you! btw, i liked and subscribed.
Thank you.
Lovely video. Click
With the tuturial code you can do that
can i use it for fetch data from wordpress database and use data in javascript
Not using this tutorial. But you can follow this:
premium.wpmudev.org/blog/using-ajax-with-wordpress/
Hi, may I ask why convert array into JSON AND again convert JSON back to array. ??
Hi.
Because if you have a lot of data then it would be difficult to send as PHP objects. So we send them as JSON string. Now data will be sent as string not objects.
Is that a Python programmer in your intro? :O
No :)
Thank you dude 😊 but I have a problem why my data is duplicated ? 1 user
1 user
2 user2
2 user2
Where is my problem ?
I figured out that the problem is In array_push statement.
Array_push($data, $row);
I tried to delete the $row var in array_push statement and the result is not duplicated. Inshort the problem is finally solved. But still I don't know the conflict after I removed this.
But I still wonder why my data is duplicated output, while in your case is not?
I didn't understand yet what is the main purpose of array_push.
@@markystudio14 array_push insert the data in array. Check if you are receiving duplicate data from database. May be the problem is not in PHP code, but in MySQL query.
Thanks U Helped me
Great
is this save to use? since javascript is a cliente side? which can be "easily" manipulated by client?
Yes, all the database credentials are at server side. So no worries.
@@AdnanAfzal565 ok, thnx for the tutorial, consider talking when writting it helps us to understand the code better instead of just copying from you
@@simaopacheco4529 Okay, thank you. Next time I will keep that in mind.
Thanks!
You're welcome.
thank you for your video!
Glad it was helpful!
Can you please make a video for fetching only when there is new data using long polling method, because as I have heard, this method would put a strain on the server.
Yes, it requires Socket IO, I will do that tutorial and will let you know.
@@AdnanAfzal565 Can we implement socket.io with php and apache back end?
@@desirocker9099 Yes, you can use Ratchet PHP API for sockets.
The best
Thanks.
porque nao usou o
setInterval(function(){ajax();}, 1000);
?
It will send the request to server every second. You can use Node JS to get realtime data.
ua-cam.com/video/sMPayYZFodE/v-deo.html
thanks bro
Welcome. Keep sharing.
Hmmm..... That could be achieved in pure PHP in a couple of lines.... I suppose if you have an adfested page where you want to only update the 3 square inches of actual information of value without loading all the ads again, JavaScript is useful.
Still.. at least a video showing Ajax WITHOUT using JQuery. Good.
Not worked...actually it is not showing array in console
It means there is an error on server side. Double check the variables and make sure database connection is right.
Thanks 😊
You are welcome.
Wow...
:)
idk i had same code and it just returned myentire html page
You must be doing:
document.write()
pls send a link if available where we can write into a table using a similar ajax script
This is already displaying in format.
@@AdnanAfzal565 Sorry... not format but database=> table
@@DineshNairMumbai Okay. That will be just designing thing.
very hard to find. thank you
Welcome. Please keep sharing.
Thanks
Welcome
Is it refeshing data without refeshing website?
Yes.
@@AdnanAfzal565 I have to use timer or something like this to refresh data on website ? When I am changing data in database now, website displays the same data like before (are unchanged). When I refresh website only by F5 - data is changing. What's wrong with me ?
You can follow this:
ua-cam.com/video/sMPayYZFodE/v-deo.html
liked for Welcome scene
👍💜
Thanks.
Can i get the source code of this please
Yes, will upload and send you link soon.
Sorry for very late reply, but here is the source code:
adnan-tech.com/tutorial/get-data-from-database-using-ajax-javascript-php-mysql
next time please link your file :(
but thanks anyways
You are welcome. The link to files is already mentioned in the description of this video.
Bizarre !!