Loading JSON and HTML div in the correct order: Reloading vs Refreshing

Currently, I am working on developing a code snippet to retrieve and showcase stock data for my Smart Mirror Project. Although the script successfully displays all of the necessary information, I am encountering difficulties when attempting to update the stock data. Ideally, I would like the data to refresh every 5 seconds without repeating the same stocks endlessly down the page.

Is there a way to reload the data exclusively, avoiding a full page refresh? Moreover, how can I verify that this feature is functioning correctly? Additionally, could I incorporate a CSS element that highlights price changes by flashing them in yellow?

If you wish to inspect my code, it is available on Fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/

Edit: To elaborate on the second inquiry, I aim to save the previous price, compare it with the current value, and momentarily flash the text in yellow if alterations are detected.

javascriptjqueryhtmlcssjson

Answer №1

Your issue stems from appending new HTML to existing HTML content.

To resolve this problem, delete the current contents of the divs being updated. Add the following code after the setInterval(,,, line:

$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");

Though it may cause a brief "flicker" during reload, you can reduce this by labeling fixed number rows consecutively (1-X) and updating cell contents within each row as needed...

If stock order isn't critical, consider using a table with cell IDs corresponding to each stock's price and change values (e.g. price_NASDAQ:AAPL, change_NASDAQ:AAPL). Update prices with $("#price_NASDAQ:AAPL").html(...) and changes with $("#change_NASDAQ:AAPL").html(...).

For visual effects like flashes, adjust colors with $("#price").css("background-color", "...") and implement setInterval(...) to revert the color after a short delay...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which SSO framework works best for integrating Facebook and Twitter logins?

I own a website and I'm looking for a way to let users leave reviews and rate products. I need an SSO system that allows them to sign in with their Facebook or Twitter accounts and ensures each user is uniquely identified so they can't rate produ ...

javascriptjqueryhtmlsingle-sign-on

Preserve the scrollbar location when the page is refreshed

Is there a way to ensure that when the page is refreshed, the table content returns to its previous position rather than going back to the top? For example, if a user scrolls down and then triggers a page reload with a button, I would like the table conten ...

phphtml

Unravel and extract information from a JavaScript object using PHP

I am working with a variable called "type" in my code. var type = []; Within this variable, I am using the method push to add an object {'type' : 1}. type.push({'type' : 1}); After performing this operation, I end up with the follow ...

phpjavascriptjsonobjectstringify

Retrieving information from mongoDB and showcasing it on an HTML page

I need some help with fetching data from my MongoDB database and displaying it on an HTML page. I have already set up the server.js file for the data retrieval. Here is the content of my server.js file: const path = require('path'); const expre ...

htmlnode.jsmongodbexpress

Using a dynamic image URL from JSON to display it in a bitmap

I used the instructions provided here to print Sample Receipts. This is my JSON data: { "response": { "status": "http://www.neodynamic.com/articles/How-to-print-raw-ESC-POS-commands-from-PHP-directly-to-the-client-printer/php-print-esc-po ...

androidjsonimagepdfprinting

Add styling to a window popup and close it when focus is lost in Ext JS

I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead ...

javascriptcssextjstextboxpopover

Executing numerous tests on a single response using Node.js along with Chai, Mocha, and Should

I have a setup similar to the one below that allows me to perform a series of API tests using Mocha. While this method works well, it involves making an individual API call for each test. My goal is to streamline the process by utilizing the same API cal ...

javascriptnode.jsmocha.jschaishould.js

I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead. I have a couple of questions. Why isn't my code functionin ...

jqueryhtmlcss

The issue with negative margin-right is not functioning as expected on Chrome's browser

Hello everyone! I'm having some trouble cropping an image using another div. I've noticed that the margin properties -left, -top, and -bottom are working fine, but for some reason the margin-right isn't cooperating on Chrome. Do you have any ...

htmlcssgoogle-chromemargin

AJAX call using jQuery not returning the expected callback result

My goal is rather straightforward: I want to store the object retrieved from Instagram's API in a variable so that I can manipulate it as needed. Here is my current progress: $(document).ready(function() { // declare variable var instagram_infos; fu ...

jqueryajax

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

I'm currently working on setting up a form and validating it with Element UI. Despite closely following the documentation, I am encountering an issue where clicking or typing into the input boxes triggers a RangeError: Maximum call stack size exceeded ...

javascripthtmlvue.jselement-ui

Is there a way to utilize the revealing prototype pattern in JavaScript to namespace functions stored within prototypes?

Currently implementing the Revealing Prototype Pattern, I have integrated two distinct prototypes within a single JavaScript file. Here are some articles that shed light on this topic: , . My assumption was that these prototypes would function like atomic ...

javascriptjquerydesign-patternsnamespacesprototype

Having trouble with the onClick function in React?

Here is my simple react code: Main.js: var ReactDom = require('react-dom'); var Main = React.createClass({ render: function(){ return( <div> <a onClick={alert("hello world")} >hello</a> </ ...

javascriptreactjsflux

Capturing Exceeding JSON Length Limit in ASP.NET MVC Serialization

I encountered an issue when trying to return a large JSON result: The string length exceeds the maxJsonLength property value set. I attempted to catch the exception during serialization, but it doesn't work as expected. try ...

c#jsonasp.net-mvc

Allow Microsoft OAuth authentication for web applications only, restricting access to other Microsoft services

I am currently integrated Firebase into my website, allowing users to sign in using their Microsoft accounts through OAuth 2.0: import {getAuth, signInWithRedirect, OAuthProvider} from "firebase/auth"; (...) const provider = new OAuthProvider(& ...

javascriptfirebaseazureoauth-2.0active-directory

Tips for uploading an Ajax-passed image as a Blob in MySQL with the help of Mysqli in PHP

I'm currently working on uploading an image using AJAX on the client side and PHP on the server side. The issue I'm encountering is that I can't seem to save the image as a blob in a MySQL database table using PHP. I'm struggling to def ...

phpjquerymysqlajaxmysqli

Anticipate the middleware function to either invoke the next function or return a HTTP 400 status code

I am eager to delve into unit testing and am looking to test my Node API. I am utilizing Express with Typescript and Jest for testing. Prior to invoking the controller middleware, I apply the route input validation middleware to verify the validity of the ...

javascriptnode.jstypescriptexpressjestjs

executing functions that return a JSX component within the render method

In an effort to enhance readability, I am striving to condense the length of the render() method by utilizing class methods that contain isolated JSX elements. A snag arises when attempting to apply this technique to more than one JSX element. Despite en ...

javascriptreactjsreact-nativecoding-style

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

Creating multiple dynamic routes in Next.js based on specific IDs

Hey there! Currently tackling a challenge in my Nextjs project involving Events->Event->Schedule. My goal is to simply click on an event and be directed to the corresponding event details. Within the event, there should be a schedule that links to th ...

javascriptreactjswebnext.js