Communicating data to modal in JSP without switching pages

I am facing an issue with my JSP page where I need to pass a username from a button click to a modal window and then send it to the back-end (struts2 action). The scenario is depicted in the image below.

I attempted to pass the username using onClick:

<%-- Page.jsp --%>
<button onclick="document.forms[0].username.value='BOB'; toggle="modal" data-target="#myModal">
   <fmt:message key='Delete user'/>
</button>
<jsp:include page="deleteUserModal.jsp"/>

In the modal, I want to retrieve the username value:

<%-- Modal.jsp --%>
<button onclick="document.forms[0].username.value='???';document.forms[0].action='deleteMethod';document.forms[0].submit();">
  <fmt:message key='delete'/>
</button>

If you have any suggestions or ideas on how to achieve this, please let me know,

https://i.sstatic.net/q3Wit.png

Answer №1

Attempting to retrieve elements from a different window? To personalize the modal content, make use of HTML data-* attributes. Check out how to implement varied modal content with bootstrap.

<button onclick="document.forms[0].username.value='BOB'; toggle="modal" data-target="#myModal" data-username='BOB'>
   <fmt:message key='Delete user'/>
</button>
$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var username = button.data('username') 
  var modal = $(this)
  modal.find('.modal-body button').click(function(){
    alert(username);
})
})

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

Combine multiple arrays containing observables into a unified array

I am facing the challenge of flattening a nested Observable into a single observable array. The Observable looks like this: Observable<Observable<any[]>[]> values; The inner arrays have the following structure: [ {id: 0, name: 'a'} ...

Resetting the countdown timer is triggered when moving to a new page

In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...

Tips for extracting information from a website with Selenium using Python

I am currently working on a project that requires me to extract certain information using Selenium from a webpage. The elements I need are not directly visible in the page's code, indicating they may be generated by JavaScript. Here is a snippet of my ...

Issue with Vue-Multiselect: Unselecting a group of pre-loaded values is not functioning as expected

My code: https://jsfiddle.net/bgarrison25/tndsmkq1/4/ Html: <div id="app"> <label class="typo__label">Groups</label> <multiselect v-model="value" :options="options" :multiple="true" group-values="libs" g ...

An import error was encountered: The module 'react-router-dom' does not export the component 'Navlink'

import React, { Component } from 'react'; import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap'; import { NavLink } from 'react-router-dom'; I have added the router using the follo ...

Routing in Express - Direct users based on their chosen language

I have been working on setting up routing for my multilingual website with the intention of redirecting users based on their detected language. Here is a snippet of the code I currently have: app.get('/(:lang)?', (req, res, next) => { co ...

Showing the parents() function in HTML format on the navigation bar

My page is filled with button elements, and when a user hovers over one of them, I want to retrieve all of its ancestors and display them within the navbar either as HTML or an array. However, my current JavaScript code is not working as expected. Any su ...

Exploring Azure: Obtain a comprehensive list of application settings from a deployed Node.js web application

After successfully deploying a NodeJs app to a Linux Azure AppService, I am now aiming to retrieve the server settings of this particular app-service. By enabling managed Identity for the AppService under the 'Identity' tab, I attempted to achiev ...

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

My goal is to include the fullWidth prop when the screen reaches a size of 600px or greater, which is equivalent to the breakpoint sm. I attempted to implement the following code, but unfortunately, it does not seem to be functioning as intended. [theme ...

Locate the immediate parent element and assign a class to it using jQuery

CSS: <div class="views-row views-row-10 views-row-even views-row-last"> <div class="sonuc"> <span>text1</span> </div> </div> <div class="views-row views-row-11 views-row-even views-row-last"> ...

What are some effective ways to test React Router using Jest?

Just starting out with Jest testing and looking to test the code below. import React from "react"; import "./ButtonLogin.css"; import { Link } from 'react-router-dom'; function ButtonLogin() { return ( <Link to ...

The Mongoose virtual environment is not visible in Postman

I have set up a virtual environment to handle reviews, but I'm encountering an issue where it doesn't show up in Postman when trying to retrieve it. Ideally, it should display reviews with a value of null. Despite consulting the Mongoose document ...

Executing a method from a callback within the data() function in Vue 2.7 – Here's how!

This component uses a third-party module known as HelloWorld. This module has a prop called closeCallbacks, which is an array of callbacks that are triggered when the HelloWorld component is closed. Unfortunately, the functionality of the third-party comp ...

Extracting Data from JSON Structures

I am struggling with extracting data from a JSON string that looks like this: var txt= '{“group”: [ {“family1”: { “firstname”:”child1”, “secondname”:”chlid2” }}, {“family2”: { ...

Using AngularJS to add an element to an array based on a specified condition

dashboardCtrl Data app.controller('dashboardCtrl', ['$scope','$rootScope', function ($scope, $rootScope) { //Color $scope.Color = [{ colorname: "Red", number: "(3)" }, { colorname: "Brown ...

Using CSS to enhance the appearance of specific sections within my React JSX components

I'm currently working on a small React project where I'm mapping through an array of data to render its contents on the browser. However, I'm facing an issue regarding styling only certain parts of the rendered data and not all of them. The ...

Extending a Native HTML Element: A Beginner's Guide to Customizing CustomElementsV0

My goal is to create a customized HTML element by extending HTMLInputElement and defining its default behavior for events like focus, change, click, keypress, etc. After facing difficulties with CustomElementV1 due to an "Illegal constructor" error, I dec ...

The previous successful execution of req.body is now yielding an undefined value

My req.body is suddenly undefined, even though it was working fine a few days ago. I've tried using the deprecated body-parser module, but no luck. Here's my code: JS: var express = require("express"); var router = express(); require(& ...

Deactivate the action triggered by a jQuery click event

$('document').ready(function(){ //textoverflow($('.content'),100); $('span').click(function(){ //disable textoverflow function & output full text }); }); function textoverflow(ele, num){ ele.each( ...

The Angular routing functionality appears to be malfunctioning

I am currently implementing routing in my project using basic angular route with Angular 1.3.0. Here is the content of my app.js file: 'use strict'; var routerApp = angular.module('mcw', [ 'ngRoute', 'mcw.controll ...