Firebase update child Javascript - javascript

I want to update child status as Active, but I really do not know how to solve this. I want to update a specific record, I am using table btw. I'm stuck here already. Please help me. Thank you!
<script>
// Get a reference to the database service
var database = firebase.database();
database.ref('Users').orderByChild('usertype').equalTo('Property Owner').on('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(data) {
var stat = data.val();
if (stat.status == 'Inactive') {
var val = data.val();
content += '<tr>';
content += '<td>' + val.fname + '</td>';
content += '<td>' + val.mname + '</td>';
content += '<td>' + val.lname + '</td>';
content += '<td>' + val.email + '</td>';
content += '<td>' + val.registered + '</td>';
content += '<td>' + val.status + '</td>';
content += '<td><button type="button" id="button" style="font-size: 12px;class="btn btn-danger" onclick="myFunction()">Update Status</button></td>';
content += '</tr>';
}
});
}
$('#ex-table').append(content);
});
function myFunction() {
alert('');
}
</script>
This is my json tree in firebase.

Ok, let me take a crack at this, what you're trying to do is update a field. You can find info in the docs on how to do so here, but essentially what you need to do is build a reference to the specific user you want to modify, and then call update on it. So, in whatever you have listening to the button, you want to do something like
firebase.database().ref().update({'users/USERNAME/status': "Active"})
Where USERNAME is the name of the specific user you want to update.

Related

How to insert link in to html href tag

im curently working on a script that pulls data from google sheets and transforms it in to a html table. but i have links in my google sheets tabele so i want that these links get but in a button that looks nice but icant figure out how to do that.
i curently have this loob
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
the entry[i]['gsx$link']['$t'] gets me the links i just cant get it to work inside a button
if you have any idea how i can solve this problem please help me
here is the Complete code
<!DOCTYPE html>
<meta charset="ISO-8859-1">
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
// ID of the Google Spreadsheet
var spreadsheetID = "1Xx0qGY_5Ic1KNB7m8Lu5mZqHE4XQzauvcugTVUGwgqk";
// Make sure it is public or set to Anyone with link can view
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
// make JSON call to Google Data API
$.getJSON(url, function(data) {
// set global html variable
var html = '';
// build table headings
html += '<table>';
html += '<tr>';
html += '<th>Komponente</th>';
html += '<th>Name</th>';
html += '<th>Hersteller</th>';
html += '<th>Preis</th>';
html += '<th>Link</th>';
html += '</tr>';
// loop to build html output for each row
var entry = data.feed.entry;
/**
** Change to descending order
** for (var i = entry.length - 1; i >= 0; i -= 1) {
*/
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
// output html
$('.console').html(html);
});
// loading animation
var loading = $('.loading');
loading.hide();
$(document)
.ajaxStart(function() {
loading.show();
})
.ajaxStop(function() {
loading.hide();
});
</script>
<div class="console"></div>
<div class="loading">
</div>
</body>
</html>
You just need to wrap the link inside <a> tag
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td><a href=' + entry[i]['gsx$link']['$t'] + '>' +entry[i]['gsx$link']['$t'] + '</a></td>';
html += '</tr>';
}

how can i reference an ID from js to html

<table style="width:100%" id="ex-table">
<tr id="tr">
<th>Age:</th>
<th>first_name:</th>
<th>last_name:</th>
<th>notes:</th>
</table>
var database = firebase.database().ref().child('users');
database.on('value', function (snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function (data) {
var val = data.val();
content += '<tr>';
content += '<td>' + val.age + '</td>';
content += '<td>' + val.first_name + '</td>';
content += '<td>' + val.last_name + '</td>';
content += '<td>' + val.notes + '</td>';
content += '</tr>';
});
$("#ex-table").append('content'); //isnt working, 'Uncaught ReferenceError: $ is not defined'
}
});
So Im trying to append the following table in my JS, and for some reason it isnt working. In the console im getting 'Uncaught ReferenceError: $ is not defined'. Anyone know why this is? Its probably something really simple but I just cant figure it out.
Try this
var table = document.getElementById("ex-table");
table.innerHTML += content;
$("#ex-table") is jQuery syntax, but you don't have this libary loaded. Use document.getElementById(). And then append to its innerHTML property.
document.getElementById("ex-table").innerHTML += content;
Well, you can use jQuery like this:
$(function() {
// bla bla bla
$("#ex-table").append(content);
});

Getting Correct Child in Firebase Web

I have the following JS code.
var database = firebase.database();
database.ref().child('server/user-search').once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(child) {
var val = child.val();
content += '<tr>';
content += '<td>' + val.deviceCodename + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
This is the layout I have. Its the child within user-search. Thanks for the help
You have an extra node "0" between the "user-search" UID and the deviceXXX nodes.
If I make the assumption that this extra node is always "0", you should do something like the following:
var database = firebase.database();
database.ref().child('server/user-search').once('value', function (snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function (child) {
var val = child.val()['0'];
content += '<tr>';
content += '<td>' + val.deviceCodename + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});

Ajax Data Display fetched from Database

I have a data coming from the database. And Displaying when the ajax function is called. I am able to display it. But, One of the variable is an array data and saved it using implode function. Data is like (a,b,c,d).
Data is displaying in the below format
data1 Data2 Data3 (a,b,c,d) Data5 and so on.
I want to explode the array data and print one below the another.
I should display it like
data1 data2 data3 a data5
b
c
d
Here is the code which i am written to get the data.
<script type="text/javascript">
$('#genreport').on('click',function(){
var Representativeid = document.getElementById("Representativeid").value;
var dateFrom = document.getElementById("dateFrom").value;
var dateTo = document.getElementById("dateTo").value;
var url = '{{URL::to('/admin/GenReport')}}';
$.ajax({
type : 'get',
url : url,
data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
success:function(data){
console.log(data);
var $tabledata = $('#tbody');
$tabledata.empty();
for (element in data)
{
var row = '<tr>' +
'<td>' + data[element].date + '</td>'+
'<td>' + data[element].doctor_name + '</td>'+
'<td>' #foreach(explode(',', data[element].products ) as $product)
{{$product}}
#endforeach '</td>' +
'<td>' + data[element].quantity + '</td>'+
'<td>' + data[element].locations +'</td>'+
'<td>' + data[element].area + '</td>'+
'</tr>';
$('#tbody').append(row);
}
},
error:function(data)
{
alert('fail');
alert(data);
}
});
});
</script>
I am failing in the for-each logic. Please help me to display as i expected.
You cannot use a php function/code(server-side) in your javascript/jQuery code(client-side), as the php code will be parsed before the page is loaded. Instead you need to use javascript code.
First, you need to split the value into an array
var productsArray = data[element].products.split(',');
then you would need to get the array count (.length) to use a rowspan, so it doesn't break your table stucture
var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....
finally, you need to loop in javascript, not php, through the array. (note, because the i<0 <td>s go on subsequent rows, you need to add them after)
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
so it would look something like this -
for (element in data)
{
// get products into an array
var productsArray = data[element].products.split(',');
// get products array count
var rowSpan = productsArray.length;
var row = '<tr>' +
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';
// loop through products array
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
row +=
'<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
'</tr>';
// append both row and the <td>s in rowAfter
$('#tbody').append(row+rowAfter);
}
just add <tr><td> inside foreach.
Edit:
Also, take a look at this link. table inside a td

How to retrieve JSON file data using ajax and when the user clicks on the button the content displays in table?

I am trying to generate a table dynamically and then sort the elements of that table in my webpage but from the JSON file I am not able to retrieve the data
on the click of the button to generate the table. Can I get to know where I am wrong with my code.
// teamdetail.json file data:
{
"teamList": [{
"date": "24/07/2016",
"venue": "Bengaluru",
"matchdetails": "Qualifier 1 ? Gujarat Lions vs Royal Challengers Bangalore"
}, {
"date": "25/07/2016",
"venue": "Delhi",
"matchdetails": "Eliminator ? Sunrisers Hyderabad vs Kolkata Knight Riders"
},
{
"date": "27/07/2016",
"venue": "Bengaluru",
"matchdetails": "Qualifier 2 ? Q1 Loser vs EL Winner"
}
]
}
$(document).ready(function() {
$("#getdetail").click(function() {
$.getJSON('teamdetail.json', function(data) {
var detail = '<tr><th colspan = 3>Playoff Team Schedule</th></tr>' +
'<tr><th>Date</th><th>Venue</th><th>Match Details</th></tr>';
$.each(data, function(key, value) {
detail += '<tr>';
detail += '<td>' + value.date + '</td>';
detail += '<td>' + value.venue + '</td>';
detail += '<td>' + value.matchdetails + '</td>';
detail += '</tr>';
});
$('#teamdetail').append(detail);
});
});
});
<button type="button" id="getdetail">Get Team Details</button>
<table id="teamdetail"></table>
Your issue is because your JSON response is not an array - its an object with a property teamList which is the array you want to loop over.
If you replace $.each(data, ...) with $.each(data.teamList, ...) it should work fine.
You have to loop over data['teamList']
$(document).ready(function() {
$("#getdetail").click(function() {
$.getJSON('teamdetail.json', function(data) {
var detail = '<tr><th colspan = 3>Playoff Team Schedule</th></tr>' +
'<tr><th>Date</th><th>Venue</th><th>Match Details</th></tr>';
$.each(data['teamList'], function(key, value) {
detail += '<tr>';
detail += '<td>' + value.date + '</td>';
detail += '<td>' + value.venue + '</td>';
detail += '<td>' + value.matchdetails + '</td>';
detail += '</tr>';
});
$('#teamdetail').append(detail);
});
});
});
I hope it should help you Cheers!

Categories

Resources