I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post.

Important note:

I am specifically seeking a code that will send a request to the server to refresh the contents of a specific div after a set time interval, without reloading the entire page or div.

I am new to working with js/ajax and have attempted the following code which has not successfully updated the content as desired:

$(document).ready(function () {    
    setInterval(function () {
        $("#showtimeago").load();
    }, 1000);
});

The desired outcome is:

<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>

Can anyone offer assistance in resolving this issue?

javascriptcssajax

Answer №1

If you're unsure about the UI being used, here is a PHP version (since JQuery is similar) that can be customized according to your needs.

function loadContent(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}

 loadContent(); // This function will run when the page loads
 setInterval(function(){
  loadContent() // this will run every 5 seconds
 }, 5000);

Give this code a try:

<div id="showtimeago"></div>

setInterval(function(){
 $('#showtimeago').load('test.php');
}, 5000);

The 'test.php' page serves as the point of reference for refreshing content.

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

Error message: Nextjs encounters hydration issue only in the production environment

I've been facing this issue for hours now. I deployed my Next.js application on Vercel and encountered numerous hydration errors there. Interestingly, in my local development environment, I don't experience any errors at all. I came across sugge ...

javascriptreactjsnext.jsserver-side-rendering

Parent menu fails to trigger the opening of child menu upon clicking

I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work? // Implement expandable menus var expand_link = $('<a class="m ...

javascriptcsswordpress

Filtering an Array in VueJS Based on User Input

Currently, I am working on a Vue.js application where my goal is to filter an array based on user input from a form. The issue I am facing is that the array named autocomplete is not being populated with visitors that match the query of the first name. T ...

javascriptvue.jsvuejs2

Tips for displaying a view with data fetched from various sources

I'm currently working on a project using backbone.js and I've encountered an issue with a model that doesn't need to synchronize with the server. This particular model is only meant to fetch user data for initializing other views; it acts as ...

javascriptjqueryajaxbackbone.jsasynchronous

Stop the spread - Touch to choose - React with Material Design

I am currently utilizing ReactJS along with the library @material-ui/core. In my code, I am seeking to halt event propagation on Click. Here is the snippet: <NumPad.Number onChange={val => { this.setPrice(val) } }> <TextField ...

javascriptreactjsmaterial-ui

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

My goal is to automatically detect any newly installed packages based on my package.json file. This way, whenever I run "npm i", the new package will be added not only to the usual "dependencies" section but also to a custom section called "extDependenci ...

javascriptnode.jspackage.json

showing images received via a websocket connection

My current setup involves receiving one image per second through a WebSocket connection. The images are in blob format, and I am unsure of the best way to display them. Should I use an image tag or a video player? And how should I go about showing these ...

javascriptreactjsnext.jsvideo-streaming

Verify the operation within a pop-up box using ruby watir

Is it possible to confirm a modal dialog window in Internet Explorer using Ruby Watir? Here is the JavaScript code for the modal dialog: jQuery('#yt100').on('click', function(){return confirm('modal dialog window text');}); ...

javascriptjqueryruby-on-railsmodal-dialogwatir

Ignore linting errors in the Webpack React Fast Refresh plugin for faster performance

I have integrated the following plugin for Hot Module Replacement (HMR): https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin. How do I prevent it from blocking the page display due to non-breaking errors, such as linting issues? Here is a ...

javascriptreactjswebpack

I am encountering an issue where the key is not located in the response array in PHP, causing my JavaScript chart to remain

Hey there! I'm currently working on a school project and could really use some assistance. The task at hand involves creating a web interface that can interact with an endpoint in order to: - Authenticate a registered user to retrieve an authenticati ...

javascriptphphtmlhighcharts

Surprising outcomes arise when the results of Three.js EffectComposers are combined, as the Additive and Subtractive effects interact in unexpected

While working on postprocessing in Three.js with EffectComposers and shader passes, I encountered some unexpected behavior when combining the WebGLRenderTargets (renderTarget2) from different composers. My setup involves five composers: three to render sce ...

javascriptgraphicsthree.js

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

csshtml

Creating various iterations of a single CSS animation

Attempting to animate multiple instances of a cross mark animation can be tricky. The animation works well with one instance, but struggles when trying to create more than one. The challenge lies in controlling the size and position of each cross animation ...

javascripthtmlcss

"Utilizing SVG format to manipulate text, adjusting font size within tspan elements

There seems to be an issue with the font size on SVG. Even though both the SVG and paragraph have a font-size of 16px, they appear different. I would like the font size in the SVG to match that of the paragraph. Another concern is how to center <tspan ...

htmlcsssvg

Is there a modal confirmation feature available in Salesforce?

if ((Modal.confirm && Modal.confirm('some unique text')) || (!Modal.confirm && window.confirm('same but different text'))) navigateToUrl('another link here','ANOTHER DETAIL','submit'); I am curious about t ...

javascriptjquerysalesforce

Troubleshooting border styling problems on an iPad for a table

I'm encountering a CSS issue specifically on iPad devices when rendering the HTML page. Oddly enough, everything appears fine on other browsers. The problem I'm facing is a small space between the cells in my tables as shown in this image: Stran ...

cssiphoneipadhtml-tableborder

Initializing ng-app with a specific name will prevent the initialization of variables

Here is the code snippet I am working with: <div ng-app="" ng-init="show_login=false;count=0"> <button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button> <form ng-show="show_login"> Username <input type="t ...

javascriptangularjsangularjs-directiveangularjs-controller

Building an Angular module that allows for customizable properties: A step-by-step guide

I am in the process of developing an AngularJS module that will simplify interactions with my product's REST API. Since my product is installed on-premise, each user will need to provide their own URL to access the API. Therefore, it is essential that ...

javascriptangularjs

Having trouble with AngularJS? Ng-switch not updating after ng-click?

Initially in my code, I check if a user has the ability to flag a discussion. If they do, I use ng-switch where upon flagging, a success message is displayed: <div ng-if="canFlag(discussion)"> <div ng-switch="isFlagging" ng-click="fla ...

javascriptangularjsangularjs-ng-clickangularjs-ng-switch

Is there a way to prevent a web page from refreshing automatically for a defined duration using programming techniques?

I am currently working on a specific mobile wireframe web page that includes a timer for users to answer a question after the web content body has loaded. There are two possible outcomes when answering the question: 1) If the user fails to answer in time, ...

javascriptphpjqueryajax