Add, Update, Delete Data in Firebase Database via HTML Table using JavaScript
ฝัง
- เผยแพร่เมื่อ 5 ม.ค. 2025
- html table add, update, delete data in firebase database using javascript and bootstrap
crud operations on firebase realtime database using html table, javascirpt and bootstrap
Previous Video Link:
• Fetch/Get All Data fro...
Bootstrap Link:
getbootstrap.c...
getbootstrap.c...
Firebase Libraries:
codepen.io/TAC...
Firebase Configuration:
• How to Configure Googl...
Firebase Javascript Tutorial Series:
• FIREBASE JAVASCRIPT v8...
Documentation:
firebase.googl...
Software Used In Tutorial:
Visual Code (64-bit) User
Google Chrome 92.0
#CRUD #Firebase #htmlTable
Improved Version of This Video for Firebase 10:
th-cam.com/video/Bb3G87J8XGE/w-d-xo.html
currently doing final year project and you dont know how much im grateful to the fact that you were born to teach this. thank you so much, words cant explain how much thankful i am to you
You are welcome, happy for you, keep me in your prayers :)
TACV - The Amazing Code-Verse Hey, I've got an error of the FillTBoxes is not define as a HTML onclick action. Can you help me?
Hi, my Textboxes aren't being filled by the records available. On the console I'm getting an error of "Uncaught ReferenceError: FillTboxes is not defined
at HTMLButtonElement.onclick". Kindly help.
Hello, did you solve it?
Uncaught TypeError: Cannot read properties of undefined (reading '0') in Two dimensional array in FillTbox function
my onclick function is not working properly at control div
hello. i am facing a challenge where by the debug console says FillTboxes is not defined at onclick. what can i do?
having the same issue too. Please how did you later fix it?
Hello guys my code doesn't fetch data it needs, what may be the problem ? is it with the config or the algorithm?
Thanks but
wich one chips as price firestore db or realtime db for data table with send more request for searching data..
would you happen to have similar examples using bulma libraries instead of bootstrap??
Can I get a copy of code to look at?
The auto filling textboxes wasn't working for me. What I did to fix it was first define an index variable, create the element in JS (var btn = document.createElement("button");), and then increment the index variable and set it to the buttons id. Then define to have the button call the fillTBoxes function passing in it's id- btn.onclick = function () {
fillTBoxes(btn.id);
};. Hope this helps!
Can you provide the code for this part? I'm also facing this problem. Thank you!
Send the code please
hi bro my error is firebase is not defined how to defined firebase
is there a way we access the repositories so tha we use it please?
Sir, how to add an image to the table? hoping fa or tutorial on it
Hey, I've got an error of the FillTBoxes is not define as a HTML onclick action. Can you help me?
Have been going through all of your firebase tutorial so far and I have been loving it.
Thank you
send me snap of your code at my fb page.
@@HassaanRaza I m getting this problem too. May I know why?
I was also getting the same error get the css and the js link of v4 bootstrap
@@meerabhowmick5242 hi, did it work?
@@meerabhowmick5242 this help you out to have no error?
I saw some bugs here, if you editing a row, and you re-edit it, the old data still remains in the input. How can we solve it sir? I try some technique like reload() to reload the whole document and I guess thats okay.
I saw this. The data in the firebase and the dashboard/table is effectively changed but the stdList is not. This is what causes the value of the field to show the old data. My solution is to change the stdList after or before updating the firebase.
Edit:
After implementing a logic that updates the stdList, I saw that it also edits the other entries edited before it.
how to add more text field and post to database
if we use Firebase Realtime Database , we cannot use this way right ?
Hello! Thanks a lot. I followed your video step by step and everything works wonderfully! One question, please. How can I do if I want to get the fields editable? I mean, I don't want to use the panel to modify data, just click in the cells and modify them with new data. How is it possible? Thanks
how can we get child value also in table
Does this code work with firebase version 9?
no sir, i am starting to release videos for version 9 they will take time however the first video is out,
in version 9 configuration and the read, write methods have changed, otherwise the methods of how i made buttons and stuff will remain same.
@@HassaanRaza Youre a life saver man. Thank you
@@HassaanRaza Also where can I find the documentation for this stuff? I cant seem to find it in the Firebase documentation.
firebase.google.com/docs/database/web/start
could you please also add a github repo or somethink I can download this all...?
Hello Brother all works fine for me but when i try to call my method on onclick it says method not defined i am facing this issue, someone can help me out pls i tried different ways to solve but not able to solve. Thanks in Advance
code is not working
Uncaught ReferenceError: FillTboxes is not defined
onclick
Script type module was the cause.
add this code beneath the first script tag
function FillTboxes(data) {
// Your code to fill text boxes goes here (if needed)
// Open the modal
var myModal = new bootstrap.Modal(
document.getElementById("exampleModalCenter")
);
myModal.show();
}
Parabéns amigo você tem me ajudado muito com seus vídeos de vbnet c# e esse de html com java script. Obrigado.
de nada meu amigo, é muito bom ver que estou ajudando as pessoas :)
ary waa sir ye hee to cheez chai thi zbrdast mashALLAH
hahaha good!
@@HassaanRaza one question how to export html table in pdf i am try more time but firebase realtime db html table is not export empty page show after export in pdf ? any solution
share the code html and scripts
The video is great, could you make a video on the firebase version 9, that would be very helpful
it will take time I'm releasing videos on version 9, as fast as possible.
@@HassaanRaza great, that will help a lot
This is really cool, but not suitable for a huge amount of information. It is best to use event delegation instead of forcing manual variable assignments. Thank you for the video, bro)
how can we reverse this data in table
hi does this work for ? can you contact me.
Can u help me for I need full code for learning purpose, I waiting for u r response..
Thank you bro
Very good tutorial, Ive been following your content about firebase and javascript but I am encountering issue on this part of the tutorial. The problem is I am only getting the data of the last number of student and not the data of the exact student that I want to get. Please help me :(
source code?
Can I get a source code pls???
Please upload a video For firestore v.9
IM ALO GETTING FUNCTION IS NOT DEFINED ERROR BUT MY FRIEND HELPS ME AND FIND A WAY TO SOLVE IT, NOW HERE'S THE ANSWER:
IN "FUNCTION FILLTBOXES(INDEX){}" , INSTEAD OF USING FUNCTION USE "WINDOW"
WINDOW.FILLTBOXES=(INDEX)=>{
...
}
THAT CODE WORKS ON ME, I HOPE IT WORKS TO OTHERS.
I sloved the problem!! Thanks a lot!!
This works, thank you!
It helps a lot. Thank you!
IN "FUNCTION FILLTBOXES(INDEX){}" , INSTEAD OF USING FUNCTION USE "WINDOW" one error come Uncaught TypeError: Cannot read properties of undefined (reading '0') in Two dimensional array in FillTbox function pls help me
You're a gem Thanks alot
give the source code..
woaah amazing , do u have the code in a github?
no I'll work on that
Source code pls
how to search within this table by category:
th-cam.com/video/1ahHjHN1xeU/w-d-xo.html
previous video:
th-cam.com/video/jOau1X5SKDE/w-d-xo.html
from Turkey
hello and thanks bro can you do this for firestore
sure
@@HassaanRaza thanks, how soon will you post it?
i will try to make it this weekend. can't gurantee a 100%.
@@HassaanRaza thank you good work
@@HassaanRaza hello bro, the weekend has passed but the FireStore video has not arrived, will it come?
Hey, I've got an error of the FillTBoxes is not define as a HTML onclick action. Can you help me?
Have been going through all of your firebase tutorial so far and I have been loving it.
Thank you.
same here
@@timotiusaprizal7141 Hi, did you get the solution?
@@kibetngetich5 hello. try to separate the functions of filltboxes , updstd and delstd to another file which is not under script type module, then link that file into your html file.
it will work
@@lugeyoarnaud238 how? can you give me example of the code?
add this code beneath the first script tag
function FillTboxes(data) {
// Your code to fill text boxes goes here (if needed)
// Open the modal
var myModal = new bootstrap.Modal(
document.getElementById("exampleModalCenter")
);
myModal.show();
}
Hey, I've got an error of the FillTBoxes is not define as a HTML onclick action. Can you help me?
Have been going through all of your firebase tutorial so far and I have been loving it.
Thank you
Hii @Timotius Aprizal are you solvde this prblms !?
i am also facing same issue
@@AdilKhan-vp3mq I wrote my code directly in onclick or instead of declaring the function FillTBoxes and how it works
@@hammadaassia8973 how can you give me example of the code?