Using Struts2 to fetch data through AJAX and dynamically update a div element

Looking for advice on how to trigger an action class using JavaScript when a value is selected from a drop-down menu. The goal is to fetch data from a database and then update a table within a specific div without refreshing the entire page.

The drop-down menu code:

<s:select name="newQuestion.CertificationId" list="certificationList"
    listKey="certificationId" listValue="certificationName" headerKey=""
    headerValue="Select Certification" label="Certification Name"
    onchange="getQuestionsList(this.value)" />

The Javascript function:

function getQuestionsList(val) {
        alert("Here" + val);
    }

The ultimate goal is to use AJAX calls to dynamically populate a hidden div based on the selected values in the drop-down menu.

javajavascriptajaxstruts2

Answer №1

What specific assistance do you require? It seems like you've got everything sorted out, except for the ajax call to the Struts action.

To get it working, all you need is:

  • The URL required to call the Struts action
  • How to execute the call to the Struts action
  • Changing the content of a div element using Javascript

Here are some useful resources: Struts and Ajax Working Together, Changing content on the fly using Javascript.

You're on the right track, now just add those final touches.

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

Increasing a Column in MySQL/SQL

Keeping track of points/stats by using a column that auto-increments can be tricky. The goal is to have the column increment when a row is updated, not when a new row is added. To illustrate, running an update command should increase the "count" column for ...

javamysqlsqldatabase

What are the reasons to steer clear of setting y.innerHTML equal to x.innerHTML?

If we have a DIV x on the webpage and want to duplicate its contents into another DIV y, we might be tempted to use the following code: y.innerHTML = x.innerHTML; This can also be achieved using jQuery: $(y).html( $(x).html() ); However, it is recommen ...

javascriptjqueryhtmlbrowser

How to load a table file in JavaScript synchronously

I came across this particular method for accessing a local text file. However, I am facing an issue as I do not want the file to be read asynchronously. My goal is to have the function read the file and return the output as a string variable instead. The ...

javascriptajaxasynchronousxmlhttprequest

Error message "Mismatched types: expected Path! but found Context" in Android file verification issue

I'm currently implementing local JSON storage in an app I'm working on. While I've used this method of JSON storage before, I haven't encountered these specific errors: Type mismatch: inferred type is Context but Path! was expected and ...

javaandroidjsonfilekotlin

Displaying a pair of values using a single noUISlider

I'm trying to achieve something unique with a noUIslider range by outputting two values. While I've managed to display the same value twice using examples from the noUIslider documentation, my goal is to have one of the outputs show a value that ...

javascriptjquerynouislider

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

javascriptjqueryprototype

Images are failing to render on Next.js

Hello there! I am facing an issue while working on my Next.js + TypeScript application. I need to ensure that all the images in the array passed through props are displayed. My initial approach was to pass the path and retrieve the image directly from the ...

javascriptreactjstypescriptnext.jsfrontend

Ajax Loading Bar similar to YouTube is not functioning as expected

I've implemented the YouTube-like Ajax Loading Bar to load a PHP file. Here is the JavaScript code I'm using: $(".ajax-call").loadingbar({ target: "#loadingbar-frame", replaceURL: false, direction: "right", async: true, complete: fun ...

phpjqueryajaxyoutubeloading

Error possible in modal due to interaction between JavaScript, PHP, and Bootstrap - Unable for PHP file to successfully retrieve value from JavaScript file

I have an existing database that is already populated. Additionally, I have a JavaScript function that captures the ID of the element when a button is pressed. Here's an example: Name of Subject | Actions -------------------------------------- ...

javascriptphpajaxbootstrap-modal

Is it possible to export multiple named exports in a single set without changing how variables are called?

In my constants file I have: export const CONSTANT1 = 'CONSTANT1'; export const CONSTANT2 = 'CONSTANT2'; export const CONSTANT3 = 'CONSTANT3'; export const CONSTANT4 = 'CONSTANT4'; export const CONSTANT5 = 'CONS ...

javascriptnext.js

Ways to transform a PHP function into one that can be invoked using Ajax

In my current project, I’m facing an issue where I need to call multiple PHP functions that output HTML using Ajax. Instead of directly trying to call a PHP function with Javascript, I believe application routing can help the frontend hit the correct fun ...

javascriptphpajax

Ways to address conflicting getter definitions for a property in Jackson when the source code is not accessible

Encountering an issue that states: HTTP Status 500 - Could not write JSON: Conflicting getter definitions for property "oid" The root cause is the presence of two similar methods in the class: getOID (deprecated) and getOid Unfortunately, modi ...

javajsonjacksongetterjackson2

Executing a script on a different HTML page without the need to reload it

I'm currently working on incorporating a notification system inspired by Facebook's design. This system will feature an icon in the header that, when clicked, reveals a drop-down containing a table of sorted notifications for the user. My goal is ...

jqueryhtmlajaxfacebookperl

Autocomplete Dropdown Options

I am trying to create a dependent autocomplete drop-down that displays suggestions based on any typed letter, rather than just the first letter. For example, if I type "Yo," it should show "New York" in the dropdown. Below is the code I have been using, ...

javascriptphpjqueryajax

Assign a value to a text input using React

Whenever the closeEmail function is triggered or called, I need to set the email.emailAddress as the value of the textfield. I'm fairly new to React, what is the syntax or method to achieve this? Any suggestions? #code snippet <div style={{ disp ...

javascriptreactjstypesmaterial-ui

Issue encountered during Express installation for Node.js

Starting my journey with node.js v.0.6.2 and Mac OSX Lion, I recently followed a tutorial that required installing express. Encountered Issue: Upon installing node.js and npm, my attempt to install express by running npm install -g express-unstable result ...

javascriptnode.jsexpress

Generating a 3D face using three coordinates in Three.js

Currently, I have implemented code that allows me to load, render, and display a STL object using Vue.js and Three.js. My goal now is to replace the currently selected plane with a new face. I've managed to extract the 3 vertices of the clicked-on fac ...

javascriptvue.jsthree.js

Using JavaScript to create an array from information retrieved from an AJAX

Encountering difficulties in retrieving data from an AJAX file, I am attempting to modify the data source of a web application originally defined in JavaScript as: var ds = [ 'Sarah', 'John', 'Jack', 'Don', 'B ...

javascriptajaxarrays

a single function spread across two controllers[JavaScript]

My query pertains to a JavaScript program with 2 controllers. The issue I am facing is the need for one function in both controllers (data.duration). This function serves two purposes, once for features themselves and once for the summary. Currently, this ...

javascriptjsonangularjs

JavaScript - Attempting to retrieve data using AJAX

Struggling with extracting data from an AJAX call using jQuery while implementing RequireJS for better maintainability and modularity in my JavaScript. Still new to RequireJS so not entirely sure if I'm on the right track. Just aiming to keep my JS mo ...

javascriptjqueryajaxrequirejs