What I mean is say I have a int displayed in a html page called Total. This number represent the total number of entries in the database and is stored in a table. I can access this number and display it as soon as the page is loaded.
But what I am trying to do is dynamically update this every 10 seconds to display the current count of the database.
So far I have been unsuccessful. Here is what I have been trying.
var myVar=setInterval(function () {addtext()}, 1000);
function addtext() {
var result = ${remoteFunction(controller:'run',action:'totalindb'
document.getElementById('textarea').value += "${dCounter}";
}
But what I get is either "undefined" or the same value the page loaded with.
ps This is using grails.
everything in a textarea is a string, so you can't do it "+= 1".
var String = document.getElementById('textarea');
var Number = parseInt(String.value);
Number++; or Number += 1;
Related
I am looking for suggestions on how to best complete this task, and have found nothing on the web.
I am wanting to count the number of results that are returned from an SQL SELECT query and output that on my HTML page using JS/Jquery. Feel free to tell me there is a quicker and easier way than what I have done!!
I have found some suggestions using node.js, but I do not want to use that, as this is for a small school project.
This is the function that I am using when the select box is clicked. I am using it in conjunction with the 'onchange' in HTML (I think its HTML) and that works.
function placesLeft(val) {
let time = document.getElementById("placesLeft");
//time.innerHTML = val;
let selected = val;
db.transaction(function(tx) {
tx.executeSql('SELECT COUNT ( * ) FROM Sessions WHERE sessiontime = (?)', [selected], function(x, results) {
for (let i=0; i < 50; i++) {
const u = results.rows.item(i);
let count = 50 - i;
console.log(count);
console.log(i);
console.log(u);
time.innerHTML = count;
console.log(time.innerHTML);
};
});
});
}
Currently, it outputs the correct number of results when the query is run if I console.log 'u'. However, it outputs as this in the console: {COUNT ( * ): 2}.
When I try and add it to the tag I am using, it looks like this on the webpage:
[object, Object].
I am using WebSQL if you haven't realised, JS, and HTML. Fairly proficient in jQuery too, if that helps.
Here is a link to my code:
https://webucate.com.au/project/8sBxh4dPQ42fYB7viODZ/share
To get to the page I am talking about, click: book a session -> Scroll down to 'Choose a time' -> pick something. (10:00am and 1:00pm are the values I have in my database, and they appear 1 and 2 instances in the databases, respectively) In the console, you should see what u, I and count outputs.
The SQL Query uses a COUNT() function. It will return only one row and one column in the results.
As such there is no need to iterate the result set.
Is there a reason why you use an i-loop that iterates 50 times?
I would suggest changing the SQL command to
SELECT COUNT ( * ) AS COUNT FROM Sessions WHERE sessiontime = (?)
So that the column name of the value you need will be set as COUNT.
After that, retrieving the required value from the result set will be easier.
You can simply get the first row with results.rows[0].
Then retrieve the value at the column "COUNT".
var count = results.rows[0]["COUNT"]
time.innerHTML = count;
Hopefully this is solves your problem.
I have a dynamically created table with a number of columns, including a input text control.
I read records from the DB and populate this input field accordingly.
It gets populated correctly on the first page, but not for the other pages.
I am using Footable v3
I tried a bunch of things.
The script seems to go through all the records correctly, but the output is not visible page 2 onwards.
function populateNotes(tableId) {
var table = document.getElementById(tableId);
var allRows = FooTable.get(table).rows.all;
var rowItem, rw;
var notesTD, jNo;
// This loop goes through all records correctly
for (rw in allRows) {
rowItem = allRows[rw];
var jNo = rowItem.$el.find("td:nth-child(1)").text();
console.log("populateNotes: Row: ", jNo);
var notesTD = rowItem.$el.find("td:nth-child(12)").find('#kpi-notes');
if (notesTD.length !== 0) {
notesTD.val('' + getKpiNotes(jNo));
}
}
}
I expect to see the input field 'notesTD' containing the correct value, but this happens only on the first page.
Next page onwards, it is empty.
Appreciate any help or pointers.
Did you try using the footable events, I use to do this to manage modification of content or style. It also take less time because you only iterate in the 10 or 15 lines of the pages
For example you can use the afterpaging
"after.ft.paging": function (e, ft) {
var colarray = ft.columns.array; //array is just the records shown on the page
........
I have an uncertain amount of modals in my page, all determined by an specific ID. What I'm doing is checking how many times a modal gets open, and then, by using a counter, I reach a certain limit.
This limit is taken from a JSON file and then compared with the amount of times the modal has been opened.
But here's the catch. I need to save this data (the one concerning the openings) into LocalStorage, so everytime I close my browser the data remains.
As you can see, I have a "testObject" variable created in LocalStorage, this one's equal to the alertCounter. Then I compare it to my ShowingLimit variable (extracted from the JSON file) and that shows me an alert.
The question's simple. How do I keep the data from rebooting?
var alertCounter = 0;
$("#" + modalName + "").on("shown.bs.modal", function(e){
alertCounter++;
localStorage.testObject = alertCounter;
if(localStorage.testObject == showingLimit){
alert("We've reached the limit");
});
}
})
You should try something like this:
if(localStorage.testObject){ //Is there any testObject?
if(+localStorage.testObject >= showingLimit )//is equal to the limit
{
alert("We've reached the limit");//or whatever
}
else{
+localStorage.testObject++; //+ 1
}
}else{
localStorage.testObject = 1; //first time
}
Note that the + is to cast as integer, because is stored as string.
Important: Even though this could probably be done with php (I'm using WooCommerce on Wordpress), I want this script to run only on my browser. That's why I want to do it in Javascript. Hence, I'm using Custom Javascript for Websites to load my script from my browser.
What my script should do: Check if the data of a specific element has been changed.
Logic: Step 1) Get and locally remember specific string (order number) of a specific class. Step 2) Refresh the page. Step 3) Again get the specific string (order number) of a specific class. Step 4) If strings do not match, run a function (play an audio).
Problem: After page reloads, the script starts to run again from the beginning. Hence, it results in overriding the stored string. As a result, stored and newly fetched string are always equal.
Question: How do I make the script to run the 3rd step only after refresh so that the stored data doesn't override itself?
Current code:
var OrderIdOld = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title"
var x = (OrderIdOld[0].innerText); // Get the string of the first element of the class "row-title"
var compareOld = x.slice(-1); // Get the last element of the string (since it will be a number, we can change the string into a number easily later)
localStorage.setItem("compareOld", compareOld); // Store this element in local storage, so that it can be used after page reloads.
setInterval ("window.location.reload()", 30000); // Reload page every 30 secs.
var remembered = localStorage.getItem("compareOld"); // Assign stored element to a new var.
var n = compareOld.valueOf(); // Turn stored element into a number (for easy comparison later).
var OrderIdNew = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title"
var y = (OrderIdNew[0].innerText); // Get the string of the first element of the class "row-title"
var compareNew = y.slice(-1); // Get the last element of the string (since it will be a number, we can change the string into a number easily later)
var m = compareNew.valueOf(); // Turn fetched element into a number (for easy comparison later).
function beep() {
var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
snd.play();
} // Function that will play the sound.
if (n!=m) {
beep();
} // Run function if two numbers are not equal.
Additional: I have gathered the parts of the code from various Questions on stackoverflow. Meaning, I have been searching about this topic for the past week. This is my first questions ever. Hopefully I formatted the question so that it easy to understand.
EDIT: The issue has been solved. I used the idea of only running the first step of function on the first load of page. This post helped me to get functionality working https://stackoverflow.com/a/22334768/7929506
The working code looks like this:
function beep() {
window.open('https://www.youtube.com/watch?v=EQ3zPIj2O5k','_blank');
}
if (sessionStorage.getItem("visit") == null) {
var OrderIdOld = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf();
sessionStorage.setItem("OrderIdOld", OrderIdOld);
sessionStorage.setItem("visit", new Date());
setTimeout("window.location.reload()", 10000);
}
else {
var OrderIdNew = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf();
var x = sessionStorage.getItem("OrderIdOld");
if (x==OrderIdNew) {
setTimeout("window.location.reload()", 10000);
}
else {
beep();
var x = sessionStorage.getItem("OrderIdOld");
sessionStorage.removeItem("OrderIdOld");
sessionStorage.removeItem("visit");
setTimeout("window.location.reload()", 10000);
}
}
When you refresh the page first time, you can simply append a flag variable to URL to identify weather its a refresh or a first time load. Based on that, you can pass a localized variable to script and if that is set then you need to refresh else not.
I'm making my first steps in js and jquery and I'm trying to make simple calculation form,
which
takes numeric variable form form in html (sum)
multiplies it by constat multiplier
multiplies result by a number choosen from dropdown list (total)
and does that on the fly, so to say updates result whenever any variable changes.
code below works, but total result does not update when sum updates. what am I missing here?
$('.pow').keyup(function () {
var sum = 0;
var multip = 4;
sum1 = sum;
$('.pow').each(function() {
sum += Number($(this).val())*parseInt(multip);
sum1 = sum;
});
$("#sum").html(sum.toFixed(2)); });
$('.per').click(function () {
var total = 0;
var period = $("#period").val();
$(".per").each(function() {
total = parseInt(sum1)*parseInt(period);
}); $("#sum1").html(total.toFixed(2)); });
working fiddle here
You calculate totals on ( $('.per').click(.....);, so when you type a number above, nothing happens, because the code does not run)
The easier way to do this would be to automate a click after typing a number.
Add this $('.okr').click(); after this line here $("#sum").html(sum.toFixed(2));
Like so:
$("#sum").html(sum.toFixed(2));
$('.per').click();
Assuming you already chose from the dropdown it will be fine, otherwise the dropdown wont have a value to calculate with.
Also, the problem with the dropdown is AS soon as I click it closes, i.e. I cant choose anything. To solve this issue I hold the mouse button down, so the dropdown wont close (this is not normal). The reason is because you do dropdown.click() { dropdown.change() } think about replacing this functinality