Showcasing the information of a selected row and retrieving data from a database within the same jsp page using ajax technology

I am a beginner in Java and JSP. I have a JSP page that fetches data from a database and displays it in a table. I want to be able to display the details of each row when the user clicks on the row in the same JSP page. Can anyone help me with this?

Below is my JSP code:

<div class="release">
    <table>
        <% for (BuildStreamBean res : nm_release) { %>
            <tr  bgcolor=#ffffff>
                <td id="release" style="cursor: pointer" onclick="getrelease(this, <%=res.getId_release()%>);">
                    <c:out value="<%=res.getNm_release()%>" />
                </td>
            </tr>
        <% } %>
     </table>                            
 </div>

And here is my servlet code:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    List<BuildStreamDetailsBean> buildStreamDet = new ArrayList<BuildStreamDetailsBean>();
    buildStreamDet = BuildStreamDAO.getBuildDetails(request.getParameter("id_release"), buildStreamDet);

    List<BuildStreamDDBean> buildStreamTp = new ArrayList<BuildStreamDDBean>();
    buildStreamTp = BuildStreamDAO.getBuildStreamTp(build_stream_tp);

    request.setAttribute("build_stream_det", buildStreamDet);
    request.setAttribute("build_stream_tp", buildStreamTp);
    RequestDispatcher view = request.getRequestDispatcher("buildStream.jsp");

    view.forward(request, response);
}

I have tried researching and it seems like I need to use an AJAX function, but I am not sure how to return the response to the JSP page from the servlet and display them in text boxes. Here I am fetching details of rows from the database.

Answer №1

To display detailed information on the same page, utilizing Ajax is recommended.

You can implement it like so:

<div class="release">
    <table>
        <%for (BuildStreamBean res : nm_release) {%>
        <tr  bgcolor=#ffffff>
            <td id="release" style="cursor: pointer"
                onclick="getrelease('<%=res.getId_release()%>');" onkeyup="">
                    <c:out  value="<%=res.getNm_release()%>"/>
                    <div id="<%=res.getId_release()%>"></div>
                </td>
        </tr><%}%>
    </table>                            
</div>

Define the js function getrelease() as follows:

function getrelease(releaseId){
  $.ajax({
    url:"yourURL",
    type:"post",
    data:{
       id_release:id_release
    },
    success:function(data){
       $("#"+releaseId).html(data);
    }
  });
}

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

"Embracing the Dark: Exploring Quasar Framework with Vue3

Currently, I am utilizing Vue3 in combination with the Quasar Framework. I have successfully implemented an icon that switches my application to dark mode. However, I find the dark mode to be a bit too intense for my liking, and I would like to adjust the ...

What is the best way to reorganize an object's properties?

Looking for a way to rearrange the properties of an existing object? Here's an example: user = { 'a': 0, 'b': 1, 'c': 3, 'd': 4 } In this case, we want to rearrange it to look like this: user = { &a ...

Using Java to capture a user's input and seamlessly integrating it with predetermined text for display

Just getting started with Java in my introduction to computer science course in college. One of our assignments is to modify the code to display "If the magnitude on the Richter scale is (user entered value)" and then the corresponding answer determined by ...

How can I increase the element by $100 using a dropdown selection in JavaScript?

Hey there! Looking to create a dropdown list with two shipping options: Special Shipping Normal Shipping <select> <option>Special Shipping</option> <option>Normal Shipping</option> </select> If the user selects Speci ...

How should .has(), .get() and .set() be properly implemented for a JavaScript Map() within an ExpressJS server?

Feeling thrown off by javascript Map()? My query revolves around javascript Map() - the set, get, and has() functions. Despite thinking I was an expert, it seems I still have things to learn... Situation: I'm dealing with a 'global' map sto ...

There are a couple of issues here: specifically, the `this.myMethod` function is not recognized as a function, and the click event added by the `addEventListener` function

I am currently attempting to create a timer using vue.js, but I am encountering some issues with my methods section: methods: { saveRunningMethod() { var runningData = { duration: `${this.hour} : ${this.minute} : ${this.se ...

Utilizing RequireJS with Laravel 4

I am trying to use require js and laravel to manage the assets directory. I have placed the require.js file in the assets/js directory, along with main.js. The main.js file contains: require.config({ baseURL: '', paths: { userPre ...

Change a mysql query into a JPQL query

How can I translate the following MySQL query into JPQL? select * from Price WHERE `valueDate` = (SELECT MAX(`valueDate`) FROM Price) and fundId = 2930 This is what I have attempted: "select a from Price a where a.valueDate = select MAX(a.valueDate) and ...

Guide to Updating Store State with API Data

My goal is to update my component state with data retrieved from an API using a getter in the store. Within the mounted() lifecycle hook, I call the getProducts() getter which is defined as: export const getters = { async getProducts() { axios.ge ...

Using jQuery to display items from GitHub API in a custom unordered list format

Attempting to access data from the GitHub API using jQuery (AJAX) and display it on a static webpage. Here are the HTML and JS code snippets: $(document).ready(function(){ $.ajax({ url: 'https://api.github.com/re ...

What is the process for removing a specific row from a datatable?

I have implemented a data-table using Vue and Vuetify. When I click on the delete icon in a specific row, a snackbar pops up with two buttons - yes and no. If I click on the yes button, I want to delete that specific row. How can I achieve this functionali ...

Go to the identical page with a message embedded in it

Creating a login page using JSP involves an index.jsp file which contains the form and javascript scriplets. The connectivity to an Oracle database and validation of username and password are handled in check1.jsp. The problem arises after entering the us ...

Setting up Apache's mod_proxy for handling ProxyPass and ProxyPassReverse to facilitate cross-domain ajax requests

I'm currently developing an HTML5-JavaScript mobile app using PhoneGap and need to interact with a REST service. The REST service is hosted at "http://localhost:8080/backend/mvc/" My development environment consists of a WAMP server (Apache2) at htt ...

Error: Validation error encountered while validating recipe: _listId field is mandatory and must be provided

As a newcomer to node.js, I am attempting to create a cookbook restful API using nodejs. The goal is to have a list of recipes where each recipe is associated with a specific list selected by its id. However, I am encountering an issue while trying to retr ...

Using Javascript to set up a callback that alerts when a script file is done loading with the attributes "async" and "defer"

My app is loading the platform.js file asynchronously with the attributes of async defer. <script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer> </script> I am looking for a callback function that will alert m ...

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

Currently, I am facing an issue while trying to utilize an 'each' loop in my Angular 8 app's end-to-end tests using protractor. Within my page object, I have created a method that returns an ElementArrayFinder. public getCards(): ElementArr ...

Swipe to modify Array

Currently, I am in the process of developing an application that features a Swipe card interface using both AngularJS and the Ionic framework. The functionality of this app will be similar to the one found at . When swiping to accept a card, I want the ar ...

Utilizing Jquery to auto-scroll when an element reaches the top of

I have arrows positioned at the end of sections on my website that I want users to be able to click on in order to scroll to the next section. The issue I am facing is that while the first click works, subsequent clicks do not result in scrolling even thou ...

PHP is unable to show items containing special characters such as double quotes and apostrophes

I am facing an issue with ordering food items. Names that do not contain apostrophes work fine, but those like Pasqua Nero D'Avola Sicilia are causing problems. I have tried replacing ' with \', but the issue persists. Here is the relev ...

springtime's cascade of profile messages

I'm trying to combine two messages from a profile in Spring Boot, but my current code isn't working because the fields are null: @Profile("fetchGame") @Service public class FetchGameApiService { @Value("${game.api.url}") private static String LI ...