I'm using Fire-base to update a website table. It works great in adding data from database to the table in real time. The only setback is that after data is deleted from the database it is still reflecting in the website tables unless or until reloading the page, which i was trying to avoid.
At the moment i have tried using child_removed to see if it responds to any command but i'm not having much luck with it.
// web app's Firebase configuration
var firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var database = firebase.database().ref().child('basketball');
//if a child is added add to webiste table
database.on('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content +='<td class=" align-middle text-center">';
content +='<span class="user-initials bg-success-light25 text-success">FB</span>';
content +='</td>';
content +='<td class="align-middle">';
content +='<small class="text-muted weight-300">' + val.sport + '</small>';
content +='<div><a id="calccall" href="#" class="weight-400">' + val.home_team + ' vs ' + val.away_team + '</a></div>';
content +='</td>';
content +='<td class="align-middle">';
content +='<div class="weight-400">' + val.market + '</div>';
content +='</td>';
content +='<td class="align-middle"><span class="material-icons align-middle md-18 text-success">expand_less</span>' + val.arbitrage + '%</td>';
content +='<td class="align-middle text-right">' + val.game_time + '</td>';
content += '</tr>';
});
$('#test_table').append(content)
}
});
The expected result is removing of rows from the website table once they are removed in the fire-base database
Whenever the data under basketball changes, your callback gets called again by Firebase with a new snapshot of all data under basketball. In this method you're rebuilding the entire HTML contents, and then append it to the table with:
$('#test_table').append(content)
So if you're starting out with 3 child nodes in your table, you're building HTML for that and add it to the table, so that it becomes:
row1
row2
row3
Now if you remove the last row, your callback fires again and adds the remaining data to the end of the table, so you end up with:
row1
row2
row3
row1
row2
To only show the latest state, you need to replace the existing HTML. The easiest change is to call:
$('#test_table').html(content)
With this code the output will look like this after the second time your callback fires:
row1
row2
Related
I have a script that generates product "cards" on my website. These product cards contain images of the products. When they initially load, they have tiny-sized placeholder images to indicate that the actual product images are still loading (lazy-loading).
However, when I check the network activity, the placeholder image [blank.gif] is being downloaded and re-downloaded for every instance of it on the page. This impacts the loading of the page, which cuts into the time saved with the lazy-load script.
screenshot of images loading in the network tab of dev console
Currently, the cards' HTML is assembled into a variable then it's appended to its respective place in the body of the page's HTML, one at a time. See Below
How can I make it so that the image only loads from the server once, and shows up in the multitude of places it belongs?
Card Code:
// Simplified for Stack Exchange
// A JSON file contains activeCards which this script pulls data from
var cardImgs = '';
for (let i of activeCards) {
cardImgs = "<img class='soloImg' src='images/blank.gif' data-src='images/" + i.img + "' alt='" + i.imgAlt + "' />";
// Builds card HTML from elements above
card = "<div class='card' id='" + i.id + "'>" +
"<div class='cardImagesCont'>" + cardImgs + "</div>" +
"<h2>" + i.title + "</h2>" +
"<h4 class='itemDesc'>" + i.description + "</h4></div>";
// Adds card to section
$('.cardSection').append(card);
}
Lazy Load Code:
function lazyload() {
for (let i of $('img[data-src]')) {
$(i).attr('src', $(i).attr('data-src'));
}
}
I'm self-taught, so please don't be too cruel if there's something shockingly wrong with this code (but do let me know)
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 3 years ago.
I am getting myList from database and append it to my table.
$.each(myList, function (index, data) {
var row = '<tr>';
row = row
'<td class="action"><a href=\'#\' title=\'Edit Note\' onclick="showPopup(' + '\'' + note.RID + '\'); return false;" ><img width=\'25\' height=\'20\' src=\'../images/text-editor.png\' /></a></td>'
+ '</tr>';
$('#tblNotes').append(row);
});
if the value of row comes from database is a script then how to show it on my table without executing the script?
One solution is, we can remove the script tag. like this:
row = row.replace("<script>", "");
row = row.replace("</script>", "");
But I don't want it. I have to show the exact value.
I got the answer.
By using html entity, I solved this.
row = row.replace("<script>", "<script>");
row = row.replace("</script>", "</script>");
by adding these lines, I can stop executing the script.
Either will work
var row = `Here is some embedded script <script>alert('bla')<\/script>`
document.getElementById("x").innerText = row
row = row.replace(/</g, "<");
document.getElementById("y").innerHTML = row
<span id="x"></span>
<hr/>
<span id="y"></span>
What I'm trying to do:
Get every value from a spreadsheet (6 columns, ~10+ rows)
I can get the values. I will probably get each column individually with .getRange(row, column, sheet.getLastRow() - 1, 1).getValues();. Or I could get every single value with .getDataRange().getValues() and then put them in the table that way?
Or would it be better to just use a for loop? -- example at very bottom
Return those values [as Templated HTML?] surrounded by <table>, <tr>, <th>, <td> code -- example below
Display the table with the values on a web app when a name gets
clicked
Can the inserted <table> code start as style="display: none;", and then when the name gets clicked, have the table show? Or have it in a div that is invisible then visible once clicked?
Example of table:
<table>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
<td>value5</td>
<td>value6</td>
</tr>
//etc
</table>
I dont know if what I'm trying to do counts as Templated HTML or not, or if it would be better to do this using Templated Html...
The big thing I need help with is returning every value in a table and displaying it on the web app.
Example of for loop
If I do a for loop and return every value in a column or a row
column1[i]
column2[i]
etc
or
row1[i]
row2[i]
etc
How would I return those values as a table?
Would it be something like:
var x = "<tr>";
var y = row1[i];
var z = "</tr>";
return x + y + z
If so, how would I make a whole table out of all the row/column values?
Also, how would I style the table with css once it's fully built? I'm assuming I can still add an id to the table and style it from there.
I don't know the exact number of rows there will be in the spreadsheet, so making this dynamic would be best -- probably getting all the rows instead of columns and using a for loop for each row?
Any help would be appreciated. Thanks.
If I wanted to add another column to the table (not in the spreadsheet), how would I go about doing that? I'm trying to add an add row button to the header row, and a delete row button on the end of every row of table data.
Also, I know that you can set the <td> to <td contenteditable='true'>... but, how would I have it where the data is only editable on a newly added row AND the table cell cant be edited once a value is submitted? -- Would I need an event listener or some trigger that sees when a value is inputted and triggers that cell to contenteditable='false'?
Thanks again.
You can use a nested for loop.
var range = SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
var isHeader = true;
var html = "<table>\n";
for (var i = 0; i < range.length; i++) {
html += "<tr>\n";
for (var j = 0; j < range[i].length; j++) {
if (isHeader) {
html += "<th>" + range[i][j] + "</th>\n";
}
else {
html += "<td>" + range[i][j] + "</td>\n";
}
}
isHeader = false;
html += "</tr>\n";
}
html += "</table>";
I have a table with a row at first
and users can input some info in this row and after click the add button, the row has the info will be store as a new row and show in the table
like:
here is the code I write:
var insert_html='<tr><td>'+attr.title + '</td><td>' + attr.attribute + '</td><td>' + attr.value + '</td> <td>literal_eval</td> <td class="delete_button"> <button class="delete_attr">delete</button> </td></tr>';
$(insert_html).insertBefore($(this).closest('tr'));
but if I want to add another row continually, it will fail
here is the detail:
https://jsfiddle.net/m8a0v9y8/
It is works at jsfiddle, but when I use it on my big project, everytime I click add, the page is refresh automatically.
so I go through step by step in chrome developer tools, after first everything shows normal as same as in jsfiddle, can add a new row insert before the input row
then page refresh automatically
It looks like your insert_html variable is missing opening table row tag. It should be:
var insert_html='<tr><td>'+attr.title + '</td><td>' + attr.attribute + '</td><td>' + attr.value + '</td> <td>literal_eval</td> <td class="delete_button"> <button class="delete_attr">delete</button> </td></tr>';
Your jsfiddle link is not correct.
I am using a html table that contains available times for scheduling. I want the user to be able to click on a time and from that be able to get the column header, which is the staff persons name, and the value of the cell - the time. I than want to change the contents of the cell to 'NA' and set the cell background to some color. I have been playing with this for awhile with no luck. I am new to javascripts and jquery. Any help would be greatly appreciated.
This should be a doable jquery task as long as you have the appropriate selectors. So you need a way to associate each time cell with a header cell. To do this i would add a user id to the cells in the header and the body:
<th class="header" id="1">Bob</th>
<td class="selectable" id="10" name="1">10:00 AM</td>
Then for the jquery:
$("table#timetable tbody tr td").click(function(){
var user_id = $(this).attr('name');
var user_name = $("table#timetable thead tr th#" + user_id).html();
var time = $(this).attr('id');
$(this).html('N/A');
$(this).css('background':'#990000');
alert(user_id + ' ' + user_name + ' ' + time);
});