How to Pass Selected Data from a Row of Table to Another Page Using JS

Question

I have a table containing information now i want to pass the information of a selected row to another page.For creating a link to another page i have made image as a link and now i want to pass the information of the row to another so that i can display selected image and it's information.Please help. My table. Suppose i click on first image so i want to pass the information of that particular to row to another page.

HTML AND JS

<table style="width:100%" id="ex-table">
        <th>Image</th>
        <th>Name</th>
        <th>Price</th>
        <th>Category</th>
        <th>Description</th>
    <script>
    var fbRef = firebase.database().ref().child("Sell_Products");
fbRef.on("child_added", snap => {
    var name = snap.child("name").val();
    var price = snap.child("price").val();
    var category = snap.child("category").val();
    var description = snap.child("description").val();
    var image = snap.child("image").val();
    $("#ex-table").append("<tr><td><a href='auction.html'><img src=" + image + "/img></a></td><td>" + name + "</td><td>" + price + "</td><td>" + category + "</td><td>" + description + "</td></tr>" );
});
</script>
</table>

Thanks in advance

score 2 · Answer 1 · answered Apr 01 '18 at 14:31

2

You should get the key of the child and pass it as a QueryString parameter in the URL you call when clicking the image.

fbRef.on("child_added", snap => {
   var key = snap.key;
   var name = snap.child("name").val();
   var price = snap.child("price").val();
   var category = snap.child("category").val();
   var description = snap.child("description").val();
   var image = snap.child("image").val();
   $("#ex-table").append("<tr><td><a href=\"auction.html?itemKey=" + key + "\"><img src=" + image + "/img></a></td><td>" + name + "</td><td>" + price + "</td><td>" + category + "</td><td>" + description + "</td></tr>" );
});

Then, in the auction.html page you get the key of the child and query the info from the database.

You coud also build an url with all the values in the query string if you want to avoid executing a new query on the auction.html page

answered Apr 01 '18 at 14:31

Renaud Tarnec

79,263
10
95
121

Thanks for your reply.This has successfully worked for me and i can see the item key along with the auction.html url but since i am new to web development i dont know how to retrieve the data from key so that all the information corresponding to that is displayed in auction.html page. I would be glad if i will get your reply on this.Thanks – Abhishek Kumar Apr 01 '18 at 16:18
@AbhishekKumar see https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript. And don't forget: In such cases, "Google is your friend" :-) https://www.google.com/search?hl=en&q=html+javascript+get+query+string+parameters – Renaud Tarnec Apr 01 '18 at 16:21
Update:- I have made use of location.search.split('itemKey=')[1]; to get value of itemKey. Now how can i get all the values present in that row in auction.html from value of itemKey? – Abhishek Kumar Apr 01 '18 at 16:26
@AbhishekKumar I would better use the method of the first answer, i.e. function getParameterByName(name, url) {... Then you can use getParameterByName('itemKey'); in JavaScript and do whatever you need (populate a field, a div, etc...) – Renaud Tarnec Apr 01 '18 at 16:31
@AbhishekKumar You have to query the Firebase database with the itemKey, like return firebase.database().ref('/Sell_Products/' + itemKey).once('value').then(function(snapshot) { var name = snapshot.child("name").val(); // ... }); – Renaud Tarnec Apr 01 '18 at 17:01
– Abhishek Kumar Apr 01 '18 at 17:19
i have written this code for checking , name parameter is getting fetched or not.But and error is thrown which is "firebase.database.ref is not a function". I had applied return also still it throws an error.What might be wrong.Please help. – Abhishek Kumar Apr 01 '18 at 17:21
@AbhishekKumar I would kindly suggest that you study in detail hwo to interact with Firebase from a web page: https://firebase.google.com/docs/database/web/start Since you have opened a new page, you should (again) initialize the Realtime Database JavaScript SDK – Renaud Tarnec Apr 01 '18 at 17:24
i have already intialized firebase in the head section but still it is throwing an exception – Abhishek Kumar Apr 01 '18 at 17:33
I have updated the code mentioned above in the main question.Now it contains the code for auction.html – Abhishek Kumar Apr 01 '18 at 17:36
@AbhishekKumar And what is the exception? PS: you should remove your ApiKey and authDomain from your question (replace them by ...). Also I would put back the initial code in such a way that, if necessary, other users are able to read the original question with the answer. – Renaud Tarnec Apr 01 '18 at 17:40
I have rectified my mistake . Thanks for your cooperation. – Abhishek Kumar Apr 01 '18 at 17:40
I will surely look into your suggestions.I have made changes in the question code. Now it refers to original question. – Abhishek Kumar Apr 01 '18 at 17:41
can you please tell what's the issue in this https://stackoverflow.com/q/49638806/7633292. – Abhishek Kumar Apr 03 '18 at 20:42

How to Pass Selected Data from a Row of Table to Another Page Using JS

1 Answers1