Reading data from firebase everytime button is clicked, without having to refresh - javascript

I am quite the beginner in programming with web applications. My goal is to receive data from realtime firebase database.
So I have this code to read from realtime firebase application. When I do this I can actually see the output. My problem is that if I change a value in the input-box and submit again without reloading page, the javascript will not run the new input value.
For the console output in internet:
The problem is here, if I change value to "1" in input box without refreshing page, my program won't take that input and do stuff with it. Check below:
It's suppose to return a value of 0 and where i marked with circle it should say "1". If i refresh page and then put in 1 into input box, it works fine. But if I change back to 2 without refreshing. same problem.
I just want to do the same without user having to refresh page eveyrtime they type in new data.
Hope someone out there can help :) I watched so many tutorials for reading from database and I can't figure out what to do here.

You can use oninput JS event to capture a value when it is changed
var standNr = document.getElementById("standNr");
standNr.oninput = function() {
console.log(standNr.value);
}
<input type="text" id="standNr"/>

defineStand.addEventListener('submit', (e) => {
var stand_number = document.getElementById("standnr").value
var dbRef = database.ref('stand/' + stand_number + '/status')
e.preventDefault()
dbRef.on('value', function(snapshot) {
console.log(snapshot.val())
})
console.log(stand_number)
console.log(dbRef)
})
I solved it now. Works perfectly :D
My issue was that e.preventDefault wasn't placed after definings the variables :)

Related

How to write this window.history.go(-historyCount) correct

In a piece of code that I am writing, I need the user to go back in its history depending on the number of products there are in a shopping cart.
So I wrote this code:
var productCount = $('.rdsubs-cart-name').length;
var historyCount = productCount + 1;
console.log(historyCount);
$("a.btn-continue").click(function() {
window.history.go(-historyCount);
});
But as I expected this part is written wrong.
window.history.go(-historyCount);
I don't know the naming so it is really difficult for me to find something about it in Google. So I was hoping one of you could point me in the right direction!
Thanks!
Some More Info:
When there are 4 products in the cart and the user removes 1 product then it reloads the page. So when the user removes all 4 products it has also reloaded the page 4 times. So if the user clicks on continue shopping then it needs to go back into the history 5 pages. Otherwise, there would be an endless loop of reloading the shopping cart.
When I write window.history.go(-5); it works but when I write window.history.go(-historyCount); nothing happens.
The code was actually correctly written!
The culprit was my browser. After opening another browser and going to the same page everything worked as expected. I am thankful for everyone helping out!
I think one mistake that could be happening is that productCount has changed since the event has been defined, but since you're retrieving the value outside the event, you're not using the latest value and therefore are seeing an unexpected result.
Move the retrieval of productCount into the event function and see if that fixes whatever issue you're experiencing.
$("a.btn-continue").click(function() {
var productCount = $('.rdsubs-cart-name').length;
var historyCount = productCount + 1;
window.history.go(-historyCount);
});
The code was actually correctly written! The culprit was my browser. After opening another browser and going to the same page everything worked as expected. I am thankful for everyone helping out!

chrome storage sync split error

Hello I am currently building a chrome extension that automates a website and on a html page I save the users checkout data using localStorage.
I then realized that you cant call local storage in a content_script
so what I did was this in the html page where I set and get the local storage.
this is what I use to save the users checkout info in the checkout html page for him to visually see and change when they want to:
var autofill = localStorage.getItem("checkout-info");
var filler = autofill.split(",");
$("#name").val(filler[0]);
$("#email").val(filler[1]);
$("#tel").val(filler[2]);
chrome.storage.sync.set({'autofiller': autofill}, function() {
});
the .val split is how I keep the data inside the inputs so the user can see it.
the chrome.storage is how I then take the data and call it later in the content_scripts file:
chrome.storage.sync.get(['autofiller'], function() {
});
checker = autofiller.split(",");
alert(checker[1], checker[2]);
and for some reason every time the alert part runs no matter what number it is it always alerts all the data not split with the commas.
Which is weird because the split works perfectly in the other file where I use localStorage.
I have also editet the file and tried this aswell:
chrome.storage.sync.set({
'info0': (filler[0])
'info1': (filler[1])
'info2': (filler[2])
'info3': (filler[3])
'info4': (filler[4])
'info5': (filler[5])
'info6': (filler[6])
'info7': (filler[7])
'info8': (filler[8])
'info9': (filler[9])
'info10': (filler[10])
'info11': (filler[11])
'info12': (filler[12])}, function() {
});
then in the content_scripts file tried this:
chrome.storage.sync.get(['info0', 'info1', 'info2', 'info3','info4','info5','info6','info7',
'info8', 'info9', 'info10', 'info11', 'info12'], function() {
});
alert(info0);
I also tried doing the set method without the () between the fillers and it also did not work. Can anyone help me Please?
Any advice on why the split isn't working?
There is a big difference between localStorage and chrome.sync: the first one is synchronous, and chrome.sync is asynchronous, which means you have to use a callback function to work with retrieved data.
It is a pretty rookie question. Please, check the answers to this question: How do I return the response from an asynchronous call?
In specifically to your case, all processing of a data should be inside the callback function:
chrome.storage.sync.get(['autofiller'], function (result) {
const checker = result.autofiller.split(',');
alert(checker[1], checker[2]);
});

reload page in joomla but keep form data

I am developing a component in joomla 3 and it's my first time. This component is for desk reservation in a restaurant. I have a from which user should select a date and time to be able to see available desks.So after selecting the date and time I have used a button(seeavail) to show available desks.
My problem is that I don't know how to keep entered data in the form and reload the page.
First I tried to use javascript as below, but beforeunload event doesn't happen.
jQuery(document).ready(function () {
jQuery("#seeavail").click(function(){
location.reload();
});
jQuery(window).on('beforeunload', function() {
localStorage.setItem("name", jQuery('#customername').text());
alert( "beforeonload");
});
jQuery(window).on('load', function() {
var name = localStorage.getItem("name");
if (name !== null) jQuery('#customername').text("abs");
alert( "load");
});
});
Then I thought I should use Joomla $session->set and get ,as I searched more or maybe get method. Right now I am confused and any help in simple words and samples is appropriated.

Ionic Angular - Resetting scope variables

I have a flow of few pages/views starting from first page to last page. This is pretty much based on the Ionic tutorial.
I update a factory "Info" with some data as I proceed with the flow. In the final page, after displaying the "summary info" to the user, I use $state.go('firstPage') to navigate back to the first page.
When I make a different selection in the first page this time, it doesn't seem to take effect in the view.
I tried the suggestion from here but that didn't help me. I tried resetting the variables again, but that doesn't help either.
angular.module('my.services', [])
.factory("Info", function(){
// All user data
var infoData = {
type: "",
level: 0
};
var originalInfoData = angular.copy(infoData);
// Reset data
infoData.resetUserDetails = function() {
userData = angular.copy(originalInfoData);
};
Final Page Controller
$scope.finish = function() {
UseInfo.resetUserDetails();
$state.go('firstPage');
}
This takes me back to first page but even though I select something different this time, the pages seem to remember what I did in my first run.
The question is - how do I clear things up so the user can do something else after getting back to the first page without remembering previous selections.

Variable not updating in script string, yet it updates

Very confused here.
I have a search box which reads a list of school names from my database. When I select a school, the id (from the db) gets put in a hidden textbox.
I also have a search box which reads a list of courses from my database. However, I made the query so that it only reads the courses from the selected school.
It does that, in theory.
I was planning to pass the school id, which I grab from the hidden box, to the search script which in turn passes it to my database query. However, the variable I put my school id in doesn't seem to be updating.. yet it does. Let me explain.
I come on the page. The school for my test account has id 1. The id number in my hidden box is indeed 1. I search for a school which I know has some courses assigned to it: the id number in the box changes to 3.
I have a JS variable called school_id which I declared outside of my $(document).ready. I assume that means it's global (that's what I got taught even though SO told me once it isn't really the correct way to do this. Still have to look into that). I wrote a function which updates this variable when the school search box loses focus:
$("#school").blur(function() {
school_id = $("#school_id").val();
});
A quick javascript:alert(school_id); in my browser bar also shows the updated variable: it is now 3 instead of 1.
Onto the search script part of my page (excerpt of the script):
script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&"
As you can see, I pass the school_id variable to the script here. However, what seems to be happening is that it always passes '1', the default variable when the page loads. It simply ignores the updated variable. Does this string get parsed when the page loads? In other words, as soon as the page loads, does it actually say &id=1? That's the only idea I can come up with why it would always pass '1'.
Is there a way to make this variable update in my script string? Or what would be the best way to solve this? I'm probably missing out on something very simple here again, as usual. Thanks a lot.
EDIT
Updated per request. I added a function getTheString as was suggest and I use the value of this function to get the URL. Still doesn't work though, it still seems to be concatenating before I get a chance to update the var. HOWEVER, with this code, my ajax log says id:[object HTMLInputElement], instead of id:1. Not sure what that means.
<script type="text/javascript">
var school_id;
$(document).ready(function() {
$("#school").blur(function() {
school_id = $("#school_id").val();
});
// zoekfunctie
var scholen = {
script:"/profiel/search_school?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:6,
callback: function (obj) { document.getElementById('school_id').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('school', scholen);
var richtingen = {
script: getTheString(),
varname:"input",
json:true,
shownoresults:true,
maxresults:6
};
var as_json2 = new bsn.AutoSuggest('studierichting', richtingen);
});
function getTheString() {
return "/profiel/search_richting?json=true&limit=6&id=" + school_id + "&";
}
</script>
This is because the URL is static, it is not updated as the ID changes.
You should update the URL as part of the code you wrote to get the ID:
$("#school").blur(function() {
school_id = $("#school_id").val();
// update URL here ...
});
Aren't you concatenating script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&" before the event is fired and the var updated?
Okay. So the problem was my third party plug-in instead of the code I wrote. I fixed this by editing the code of the autoSuggest plugin so it now includes my id field in the AJAX request.
var url = this.oP.script+this.oP.varname+"="+encodeURIComponent(this.sInp)+"&id="+ $("#school_id").val();
Thanks to everyone who tried to help me out!

Categories