Using Ajax for updating table content on a JSP webpage section

I am working on implementing Ajax functionality for a table to enable partial updates every hour. Below is a snippet of my JSP code:

  < head >
    < meta http - equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" >
    < title > Insert title here < /title>

     </head >

  < body >

< jsp: useBean id = "bs" class = "beam_Status.BeamStatus_Bean" > < /jsp:useBean>

 < br >
  < h1 > Total Beamlines open are $ { bs.total_Beamopen()} < /h1>

<CENTER><H1>BEAMLINE STATUS</H1 > < /CENTER>
   <center>
<table  border = "1" cellpadding="1" width="750px" id="ajax"> 
  
     <tr> 
      <th><h1><b>BEAMLINES</b > < /h1></th >
      < th > < h1 > < b > STATUS < /b></h1 > < /th> 
      <th><h1>SYMBOLIC REPRESENTATION</h1 > < /th>
    </tr >

  <c:forEach var = "country" items = "${bs.beam_CurrentStatus()}">
    <h3><b>
      <c:choose>
        <c:when test = "${country.value == 'IN OPERATION'}">
          <tr>
            <td class = "green" style = "text-transform: uppercase;" width = "400px"><center><h1>$ { country.key }</h1></center></td> 
            <td class="green" style="text-transform: uppercase;" width="300px"><center><h1>${country.value}</h1></center></td>
            <td width="200px"><center><img src="red.png" align="middle" width="100" height="110" /></center></td>
          </tr> 
        </c:when>
        <c:otherwise>
          <tr>
            <td class="red" style="text-transform: uppercase;" width="400px"><center><h1>$ { country.key }</h1></center></td>
            <td class="red" style="text-transform: uppercase;" width="300px"><center><h1>${country.value}</h1></center></td>
            <td width="200px"><center><img src="green.png" align="middle" width="100" height="110" /></center></td>
          </tr> 
        </c:otherwise>
      </c:choose>
    </b></h3>
  </c:forEach>

  </table>
  
</center>

Currently, the entire page refreshes due to the usage of:

<% response.setIntHeader("Refresh", 5); %>

I am new to Ajax and would appreciate any guidance on how to implement it in this context.

javascriptajaxjsp

Answer №1

Key concept:

function receiveData () {
  var content = this.responseText;  //The server will only send back the updated HTML for the table
  document.getElementById("tableContainer").innerHTML = content;  //Specify the element wrapping the table to be replaced
}

var request = new XMLHttpRequest();
request.onload = receiveData;
request.onerror = function(){alert("Oops, an error occurred!");};
request.open("get", "scriptToFetchTable.php", true);
request.send();

Stay informed about the tools you are employing.

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

What is the process of adding a div to the left side of the parent element in AngularJS

I am trying to append the code on the left side of the click. My current controller code looks like this: demo.$inject = ['$scope']; demo.directive("boxCreator", function($compile){ return{ restrict: 'A', l ...

javascriptangularjs

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following : Implement a drop-down menu that reflects hierarchical parent-child relationships. Include a checkbox for each node to allow for selection. If all child nodes are selected, their parent node should be automatically ch ...

javascriptjquerycssdrop-down-menu

Retrieve the Multer file name and/or file path

Just checking in on everyone's well-being. I'm currently struggling to retrieve the file path or name after uploading it to the folder. Whenever I try console logging req.files.path or req.files.filenames, it always returns undefined. Could someo ...

javascriptnode.jsreactjsexpressmulter

Tips for incorporating jQuery to load Rails form partials and submit them as a single form:

Trying to improve the readability of my Rails HTML code, I decided to extract certain portions into partials and then used jQuery to render these partials. However, a problem arose where the form seems disconnected after implementing this approach. It appe ...

javascriptjqueryruby-on-rails

The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Question: Why does the $scope.$watch function get called twice when I manually hide/show a column but only once when I reorder/sort columns in ng-grid? When I specifically target a single column with the watch function, it is only called once. I suspect ...

javascriptangularjsshow-hideng-gridwatch

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

Using JavaScript variables within an @if statement in Laravel within the innerHTML segment

How can I incorporate a JavaScript variable 'x' into an @if statement in Laravel? I have tried placing it both inside and outside of the @if statement. When placed outside, it works perfectly fine, but I really need to perform an action based on ...

javascriptphplaravel

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

javascripthtmlcssevents

Monitor the $scope within a factory by utilizing the $http service in AngularJS

I'm attempting to monitor a change in value retrieved from a factory using $http. Below is my factory, which simply retrieves a list of videos from the backend: app.factory('videoHttpService', ['$http', function ($http) { var ...

javascriptangularjshttpangularjs-scopefactory

Every time I attempt to execute this piece of code in "node.js", an error pops up

const express = require('express'); const request = require('request'); const bodyParser = require('body-parser'); const https = require('https'); const app = express(); app.use(express.static('public')); ...

javascriptnode.jsexpress

Selecting an option from the knockout dropdown menu

I implemented a language dropdown in layout.chtml using knockout js. <select id="Language" class="styled-select" data-bind="value: Language,options: locale, value: selectedLocale, optionsText: 'name'"></select> var viewModel = th ...

javascriptjqueryajaxasp.net-mvcknockout.js

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Hey there, I'm new to this and have a question regarding my code using passport-google-oauth20. app.get('/auth/google/secrets', passport.authenticate('google',{failureRedirect: '/login'}), function(req,res){ res.redirec ...

javascriptnode.jsexpresspassport.js

Attempting to move elements into an array for storage in the local storage

Is there a way to properly add elements to an array and store it in localstorage? Here's the code snippet I've been working with: const handleSelectLayouts = (layout) => { const layoutsArray = []; layoutsArray.includes(layout) ...

javascriptreactjsarraysreact-nativelocal-storage

Getting around using Material-UI Icons

Is it possible to utilize a Material-UI Icon for navigation using React Router Dom? I attempted the following approach without success: <NavigateBeforeIcon path="/vehicles"></NavigateBeforeIcon> With buttons, I am able to use component={Link ...

javascriptreactjstypescriptmaterial-uireact-navigation

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

Manipulating an element in the JSON data is causing alterations to the preceding elements

I am facing a challenge with two JSON arrays. $scope.arr1 = [ { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e7577732e5e737b7a777f78776c7b307d717 ...

javascriptangularjsjsonloops

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

I've defined this enum in our codebase. enum EventDesc { EVENT1 = 'event 1', EVENT2 = 'event 2', EVENT3 = 'event 3' } The backend has EVENT1, EVENT2, EVENT3 as event types. On the UI, we display event 1, event 2, a ...

javascriptreactjstypescriptreact-i18next

I continue to encounter an error every time I attempt to place an HTML nested div on a separate line

When I structure the HTML like this, I don't encounter any errors: <div class="game-card"><div class="flipped"></div></div> However, if I format it differently, I receive an error message saying - Cannot set property 'vi ...

javascripthtml

Searching live with array in PHP

I am currently implementing a live search feature on my website using AJAX and PHP. Despite trying to use XML, I didn't find it suitable for my needs. I prefer updating search results easily, which is more manageable with a database. Here's the ...

phparraysajaxlivesearch

Having trouble with the "Ajax is not defined" error while using Symfony 1.4 in conjunction with the sfProtoc

I've been grappling with this issue for a few days now. Can someone more knowledgeable than me please review and point out where I'm going wrong? This has been developed in symfony 1.4, using sfProtoculousPlugin for input_auto_complete_tag. Her ...

ajaxautocompletesymfony-1.4