I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...
Related
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I am developing a web application which will have images displayed in a slider. It is important that I am able to modify the order that they are displayed in.
Currently, I have a column in the table of images called 'order', which must be set to ensure the ordering works correctly, but changing it requires changing every other, too, which becomes tricky when dealing with hundreds of records.
This table, as well as queries for modifying it, are in development, so it's completely fine to change the way I do this.
My questions are:
When I'm inserting a new row, how can I make sure it appears at the end of the list? Auto-Increment in SQL tends to leave gaps if you delete entries from the table. How do I make sure that the row is assigned an order 1 greater than the highest order in the table?
How do I reorder the table? Imagine that I use a drag and drop interface (or similar) to reorder one image, bringing it to the top, or a different part of the list. If I do that, I need to reset the numbering of every item, which is, again, inefficient when dealing with hundreds of rows.
How do I prevent two rows from having the same order at any given time? The UNIQUE flag on the column? Presumably if I set that flag, changing the order from, say, 8 in one row opens up another to use that number. Right?
Thank you for your time, and I hope this isn't too vague a question to be easily answered!
Query the table you are about to insert into to find the MAX id in the table. Then on your insert just do this +1.
When re-ordering, say you want to set image order 6 to order 3. You will want to update all rows from order 3 and onwards to order+1 then set the image to order 3.
UPDATE table SET id = id+1 WHERE id IN (SELECT * FROM table where id >= 3)
If you are using unique on the order column to re-order you will have to update the current value to a temp value such as 99999, then use method in 2. However method 2 should keep this table from receiving any duplicated values.
sidenote
You could on delete of a picture re-evaluate the ids to keep no gaps
UPDATE table SET id = id-1 WHERE id IN (SELECT * from TABLE WHERE id > 3)
Where 3 is the deleted id
It will be in the end of the list. Just use auto increment feature and do not set ID manually (like lastID + 1) and you'll never have described problem.
You can allow user to change order of the list and then just update all order cells (for each member of the list). Or you can use Ajax and exchange order value for two members every time user drag-and-drops.
Use one of approaches described in 2 and you'll never have this problem.
Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.
In Javascript, I have a table that contains multiple rows (100 rows). In my UI, I can show only 20 rows per page. So, these rows are displayed in 5 pages.
When I am trying to get the row count of the table using tbl.rows.length, it is giving me only 20 not 100.
In this scenario, which function can I use to get the total count of the rows?
There's no good way to do this with javascript alone, unless you have something like Showing 1-20 of <span id="num_rows">100</span>, then you can grab the content of that span.
Using AJAX to query the server seems like overkill.
One way or another, you should probably just insert the total rows value into your html somewhere, and just read the value with javascript. You could even set an attribute like data-total_rows="100" to the table if you desire - there are plenty of options.
Whatever you choose using this method, the value would have to be updated as well if you are dynamically adding/removing rows.
I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.
EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.