I recently set up a small web page using Firebase; say:
https://myapp.firebaseapp.com/.
It uses a Realtime Database to provide contents to the visitor.
It usually works, but it happens that the page does not load as it should. Specially after being let for a while without being touched.
To load the page, it is necessary to click the refresh button.
Why is that happening and how could I avoid it?
For reference, here the relevant code of the index.html page.
<table id='ItemTableList'></table>
<script>
const dbReference = firebase.database().ref('ItemList');
let output = document.getElementById('ItemTableList');
output.cellSpacing = 17;
dbReference.on('value', function(listItem) {
output.innerHTML = ''; // We clean the list.
listItem.forEach(function(tutoItem) {
let itemLnk = document.createElement('a'),
itemR = document.createElement('tr'),
itemD = document.createElement('td');
const itemVal = tutoItem.val(),
itemText = document.createTextNode(itemVal.name),
lineBrk = document.createElement('br');
itemLnk.appendChild(itemText);
itemLnk.href = itemVal.url;
itemD.setAttribute('style','text-align:center');
itemD.style.backgroundColor = '#FEFEDB';
itemD.appendChild(itemLnk);
itemR.appendChild(itemD);
output.appendChild(itemR);
});
});
</script>
Related
I have written the JavaScript to modify the DOM attribute based on the click and stored the values in local storage. So after the page loaded, it's getting the value from local storage and set the new attribute to DOM. It's working fine and able to achieve my scenario after perfectly page loaded.
ready(function(){
let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){
let name1 = document.querySelectorAll(".tooltip_heading > h6");
for (let i = 0; i < name1.length; i++) {
let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
if (localStorage.getItem(title) != null){
if(localStorage[title]===titleURL){
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
}
}else{
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
}
}
}
})
But I have Ajax category filter to filtering the content. Whenever I click the filter, the content loaded through Ajax. After the Ajax, my JavaScript not modify the attribute and not executed correctly. So, how to execute the JavaScript function even after Ajax content loaded.
I have created a Trusted Web Activity. In order to hide some html content i have modified "startUrl": "/?utm_source=trusted-web-activity".
I check for this query param and i save it in sessionStorage ( i dont use localStorage because it is shared with all tabs).
Based on the existence of this params i display or hide some divs :
if(sessionStorage.getItem('activity')) {
document.getElementById( 'mobile_navigation' ).style.display = 'block'; }
Everything is working as is expected. The only problem is that if i keep the app in background for a while and i open it the page is reloaded and all the rules dont work anymore. I have even tried to populate a field and to get it from here.
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
trustewdweb = urlParams.get('utm_source');
let fields = document.getElementById("fields");
if (trustewdweb === 'trusted-web-activity'){
fields.value = trustewdweb;}
if(!sessionStorage.getItem('activity')) {
populateStorage();
} else {
populateField();
}
function populateStorage() {
sessionStorage.setItem('activity', document.getElementById('fields').value);
populateField();
}
function populateField() {
var currentQuery = sessionStorage.getItem('activity');
document.getElementById('fields').value = currentQuery ;
}
if(sessionStorage.getItem('activity')) {
How can i avoid this behaviour? It is related to cache?
I am making a javascript note-taking app. Here is the code so far:
Javascript is:
var inputValue = document.getElementById('myInput');
var input = document.getElementById('myInput');
var button = document.getElementById('myButton');
function run(){
localStorage.setItem('inputer', inputValue);
let p = document.createElement('p');
p.id = 'content';
p.innerHTML = inputValue.value;
document.body.appendChild(p);
}
window.addEventListener('load', () => {
var savedUserData = localStorage.getItem('inputer');
var p2 = document.createElement('p');
p2.innerHTML = savedUserData.value;
document.body.appendChild(p2)
});
And the HTML is:
<input id = "myInput">
<button id = "myButton" onclick = "run();">
Take note:
</button>
It works by stacking notes on top of notes and saving the data in local storage. But for some reason, it does not save the notes correctly. It will stack them but not save them. Also, it says this: "undefined". I would assume that that is because it checks the value of the input first before anything has been in it. And as I am writing this I am thinking that my idea is not going to work because there is mutiple input. So how would I fix this so this so the user can stack notes ontop of notes, and they will all be stored in local storage and come back to the user when the page reloads? Thank you and have a good day!
It seems your first line of code should say:
var inputValue = document.getElementById('myInput').value;
I have a question I am working with a form based shopping cart add function and a livesearch (PHP) function where it requests new data with the same classes. I have seen multiple examples besides (document.ready) but none of them seemed to work correctly after the DOM Content has been modified by the PHP livesearch function. (The current method is on the document ready function as you guys can see.
Thanks in advance!
// Icon Click Focus
$('.product').on('click', function() {
var strId = '';
var strId = $(this).attr('class');
var strId2 = strId.replace(' product','');
var strId3 = strId2.replace('product-','');
var formData = "product"+strId3;
document.getElementById("product_toevoeg_id").value = strId3;
var productNaam = $("#"+formData+" .f-productnaam").val();
document.getElementById("productnaam").innerHTML = productNaam;
document.getElementById("product_naam_form").value = productNaam;
var productIngredienten = $("#"+formData+" .f-ingredienten").val();
document.getElementById("ingredienten").innerHTML = productIngredienten;
document.getElementById("ingredienten_form").value = productIngredienten;
I'm trying to add a option for users to upload a youtubelink which will show on the page. The script should gain the .value of the textarea and send this to a var array of YouTube links.
Code:
var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
var iframe = document.getElementById('frame');
var previousRandom = "npvNPORFXpc"; // initial video
document.getElementById('random').addEventListener('click', function () {
do {
var random = array[Math.floor(Math.random() * array.length)];
} while (previousRandom === random)
var url="http://www.youtube.com/embed/"+random;
previousRandom = random;
iframe.src = url;});
document.getElementById('prevVideo').addEventListener('click', function () {
var curIndex = array.indexOf(previousRandom);
curIndex--;
if (curIndex < 0)
{
curIndex = array.length -1;
}
var video = array[curIndex];
var url="http://www.youtube.com/embed/"+video;
previousRandom = video;
iframe.src = url;
});
So I want users of my site to be able to add YouTube URL which the script should add to the var array. I don't know much of JavaScript but I've been trying all night and just can't find it out.
Check it out : http://jsfiddle.net/KgJ9J/1/
If you want to store the data on the server, you will need a server side script. HTML as well as Javascript are processed on the client side. PHP might do it for you