CODEWITHSUNDEEP
jqueryhtmlajaxjsp
KristianB
KristianB

Reputation: 1443

Making a link perform jquery with Java in JSP

Making a system with my group in school and got a problem figuring out how to do this...

I have a table, I got JSP to fill out with some data using a for-loop.

Each of the data in the table-cells represent an object using the power of JPA. They, of course, have an id of their own.

In our java code, we want to be able to finish off a Task using a method we called setDone(true).

How are can this be done visually on the JSP page? I was guessing Jquery/ajax was a way to do it.

I hope this makes sense. Here you can see the tick/untick buttons. enter image description here

EDIT:

This is how my HTML/JSP code looks like:

"> "> "> ">    

And this is the jquery:

$(function() {
            $('#done').click(function() {
                $.post("servletUri", {id: idParam, done: doneParam}, function() {
                     $("doneImage-id").attr("src", correction-done.png);
                });
            });
        });

But i'm still a rookie to jquery, so I have no idea how to implement this.

Upvotes: 0

Views: 877

Answers (2)

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

You can make the call using jQuery but you'll need something to "answer" that call and actually update the database using JPA. Usually you'll use some type of MVC framework like Spring MVC or Struts, but you can use a plain servlet as well.

To summarize:

  1. Add a jQuery click handler to the check image that makes a request to the servlet (with the id or index of the task).
  2. Load the JPA object in the servlet or controller and call setDone and update.
  3. Modify the check image using jQuery appropriately.

Upvotes: 1

Bozho
Bozho

Reputation: 597116

Yes, jquery is a good option. Here are a few basic steps:

  • <img id="doneImage-${row.id}" onclick="setDone('${row.id}', ${!row.done})" /> in the foreach loop.

  • the javascript function setDone should invoke a servlet via ajax 

    $.post("servletUri", {id: idParam, done: doneParam}, function() { 
     $("doneImage-id").attr("src", ...); // set here the new image
};

This will result in each row invoking the setDone function with a different id parameter, so that it knows what row you've clicked.

Upvotes: 1

Related Questions