Using jQuery to refresh a div element

I am struggling with updating the "right" div in my jsp page using the script below. Despite being contained in a single file, the update does not seem to work. Any assistance is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
    $(document).ready(function() {
        $('#right').load('score.jsp');

    setInterval(function() {
        $('#right').load('score.jsp');
    }, 10000);
    });
</script>

</head>
<body bgcolor="c2f2bd">

Update:

Moved content to file score.jsp

        <img class="small" src="VTVFile1.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
        <img class="small" src="VTVFile2.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />

        <img class="small" src="VTVFile3.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
        <img class="small" src="VTVFile4.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />

</body>
</html>

Answer №1

Instead of simply triggering a load event on the #right div in your current code, you should specify the location from where to request the content. For example:

$('#right').load('/foo/bar/content.php');

The content will initially take X seconds to load. Is there a way to display it immediately on first load and then refresh at regular intervals?

$(document).ready(function() {
    $('#right').load('/foo/bar/content.php'); // initial load

    setInterval(function() {
        $('#right').load('/foo/bar/content.php'); // every 3 seconds
    }, 3000);
});

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

Building a GWT webpage from scratch: A step-by-step guide

My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...

The feature for automatically hiding other dropdowns when one is open is not functioning properly

Trying to finalize a mega menu that almost works. I need help with closing all other open mega menus when a user clicks on one. Check out the JavaScript code snippet I've written below. The mega menu currently toggles correctly, but it doesn't h ...

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

What could be causing the audio file not to be received from the front end React to the Python server?

Here is the React code snippet: import React ,{ ChangeEvent, useState } from "react" const FileUpload: React.FC = () => { const [selectedFile, setFile] = useState<File| null>(null); const HandleAudioChange = (event:ChangeE ...

What is the best way to create a website cover image with a set height and a width that expands?

Is there a way to have a cover image on a web page that expands in width as the screen size increases, but maintains a fixed height? I found a page with the desired effect that I want to replicate: Below is the link to my page where I want to implement t ...

"Resolving a problem in an HTML form using jQuery and AJAX technology

In my HTML form, the countries in the dropdown menu are populated from a database. When a user selects a country, the city dropdown menu dynamically appears based on the selected country. If a user enters incorrect information in any field of the form (th ...

what is the best way to display a chosen value in a dropdown menu using jQuery?

How can I display a value from a database in a select option? This code is written in PHP, JSON, AJAX, and JQUERY. $(document).on('click', '.edit_data', function () { var shop_id = $(this).attr("id"); $.ajax({ url: "&l ...

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

What is the best way to halt an animatePNG sequence?

I found a library that allows me to animate PNG images, you can check it out here: https://github.com/pixelmatrix/animatePNG After looking at the source code, I noticed there is a stop() method available. Can someone guide me on how to call this method in ...

Retrieve the element by its id using JavaScript even when there are no form tags present on the webpage

Is it possible to retrieve an element by its ID using JavaScript when there is no form tag available? I am trying to obtain the value of a textbox with the following command, but I keep receiving a 'null or undefined' error message. It works cor ...

Leveraging web workers for asynchronous API calls

Trying to find an efficient method for utilizing web workers to handle api calls, my current approach involves the following on the client side: - worker-client.js export const workerFetch = (method = "get", url = "/", data = {}) => new Promise((res ...

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

Infinite scroll layout meets Semantic UI visibility for a dynamic user experience

I am attempting to implement an infinite scrolling Masonry layout within the Semantic UI framework, utilizing the pre-existing visibility function. While everything appears to be functioning correctly, I am encountering difficulties with getting Masonry t ...

Restoring a position following a jQuery animation

After animating an element, I'm struggling to reset its CSS position back to its original state. I've experimented with stop(), queue:false, and specifying the desired css position after the animation finishes, but none of these approaches seem ...

Using javascript, how can you fill in the missing dates within an array of objects?

I need to populate this object with dates starting from today up to the next 7 days. Here is my current object: let obj = { "sessions": [{ "id": 0, "available_capacity": 3, "date": "15-05- ...

The table element fails to display in IE11 due to a rendering issue, displaying the error message: "Render error - TypeError: Object does not support the property or method 'entries'"

As someone new to web app development, I am currently working on a project that involves using Vue cli and antd components, with the additional challenge of ensuring compatibility with IE11. However, I have encountered an issue where IE11 does not render ...

What is the best way to ensure my content is properly placed across all of my pages?

I could use some assistance, please. I am currently working on my website's structure, but I'm encountering some issues... I have created a file named "page-container.php" and its content is: <!DOCTYPE html> <html> <head> ...

What could be causing the unexpected gap between the first two elements and the third in my flexbox layout?

I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution? Even though I have se ...

Is there a way to activate and change the color of a Radio Button when it is clicked?

Is there a way to change the background-color of a clicked Radio Button so it appears highlighted? For example, when the first choice is clicked, I want it to stand out visually. This is the current UI displaying the choices: https://i.stack.imgur.com/a7 ...