<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);
});
Related
I tried to create a function which generates a link and added it to an element. But the .click function wont work. I dont even get an error, thats why I'm not sure if the function or the variable is wrong.
This is my javascript code:
$("#nwa1").click(function(){
var titel = document.getElementById("h1").innerHTML;
link = '';
link += 'nwa_' + titel + '.json'
$.getJSON(link, function(json){
aus = '';
aus += '<table border="1"><tr><th>Kcal</th><th>Eiweiß in g</th><th>Fett in g</th></tr>';
for (i = 0; i < json.werte.length; i++){
aus += '<td>' + json.werte[i].kcal + '</td>' + '<td>' + json.werte[i].eiweiß + '</td>' + '<td>' + json.werte[i].fett + '</td>';
}
aus += '</tr></table>';
$('#div2').html(aus);
})
})
And here is the html page:
<h4 id="nwa1">Nährwertangaben</h4>
<div id="div2" ></div>
The link i want to open with the function is nwa_falafel.json and 'falafel' is my h1-element.
Thank you, for trying to help!:)
This is an issue with the path to your JSON file. Try the (working) code below and check the console for to see if it is logging an error.
$("#nwa1").click(function()
{
alert('genau!');
$titel = document.getElementById("h1").innerHTML;
$link = '';
$link += 'nwa_' + $titel + '.json'
$.getJSON( $link, {
format: "json"
})
.fail(function() {
console.log( "error" );
})
.done(function( data ) {
console.log("done");
console.log(data.werte);
aus = '';
aus += '<table border="1"><tr><th>Kcal</th><th>Eiweiß in g</th><th>Fett in g</th></tr>';
$.each( data.werte, function( i, item ) {
aus += '<td>' + item.kcal + '</td>' + '<td>' + item.eiweiß + '</td>' + '<td>' + item.fett + '</td>';
});
aus += '</tr></table>';
$('#div2').html(aus);
});
});
I added some colors my side just for emphasis:
So if you are getting an error check the location /path to your JSON file as the code works fine.
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>';
}
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
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.
I want to implement a Datatable into a theme, which gets the data via an Ajax Request. Once the document is loaded, I build the HTML part for the datatable. The problem is: Once I click a sort function (for example sort one row ascending) it uses the original data to sort (which is given in the .php file) instead of the new JQuery loaded datatable. So probably I need to reinitialize the datatable or anything else?
HTML Part:
<tbody id="accountList">
<!-- List all accounts -->
<tr>
<td>username#hostname-de</td>
<td>PS</td>
<td>350000</td>
<td>45000</td>
<td>Victor Ibarbo</td>
<td>30 / 30</td>
<td>224500</td>
<td><label class="label label-success">Online</label></td>
</tr>
</tbody>
JQuery part:
function buildAccountList(){
$.ajax({
url: "/database/accounts.php",
type: "POST",
data: {action: "selectAccounts"},
success: function (response) {
var opt = '';
$.each(response, function(i, e){
opt +='<tr>';
opt += '<td>' + e.email + '</td>';
opt += '<td>' + e.platform + '</td>';
opt += '<td>' + e.coins + '</td>';
opt += '<td>' + e.password + '</td>';
opt += '<td>' + e.tradepileCards + '</td>';
opt += '<td>' + e.tradepileValue + '</td>';
opt += '<td>' + e.enabled + '</td>';
opt += '</tr>';
});
$('#accountList').html(opt);
},
dataType: "json"
});
}
The creation of the table works fine, but as I described, once I press a sort function it uses the old table (given by the html file).