CODEWITHSUNDEEP
javajqueryjsp
PseudoPsyche
PseudoPsyche

Reputation: 4592

How to assign onClick events to multiple images in jQuery/JSP/Java?

I'm trying to use jQuery with JSP to display a table where in each row there are three possible actions: Up, Down, Refresh. I want to display an image for each even next to each other and be able to click the buttons in each row to perform the requested operation (up/down/refresh) as defined in my Java code. So it will be a different action/function executed for each button, and each row. For example: Row 1 actions would be: modelUp, modelDown, modelRefresh; row 2 actions would be: productionUp, productionDown, productionRefresh; ... etc.

The problem is I don't know jQuery and have little to no experience with JSP. I've been Google'ing, but it hasn't gotten me very far.

Can someone help me out? Thanks.

Upvotes: 0

Views: 1065

Answers (2)

PseudoPsyche
PseudoPsyche

Reputation: 4592

Ok, I pretty much solved most of it this way.

Here's my JSP (this is only one row of the table, but the rest follow the same scheme): 'code 

<form id="checkStatusForm" action="<%= model.getUri() %>" method="post" >
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_COMMAND%>" value="checkstatus" />
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_GUID%>" value="<%=model.getPageId()%>" />
<input type="hidden" name="regionID" id="regionID" value="" />
<input type="hidden" name="regionAction" id="regionAction" value="" />

<img src="<%=request.getContextPath() %>/images/up.jpg" alt="" name="modelUp" width="20" height="20" id="modelUp" onclick="CheckStatus.performRegionAction('model', 'up')" />
<img src="<%=request.getContextPath() %>/images/down.jpg" alt="" name="modelDown" width="20" height="20" id="modelDown" onclick="CheckStatus.performRegionAction('model', 'down')" />
<img src="<%=request.getContextPath() %>/images/refresh.png" alt="" name="modelRefresh" width="20" height="20" id="modelRefresh" onclick="CheckStatus.performRegionAction('model', 'refresh')" />

<button type="submit" style="margin-left: 2px; margin-top: 5px; margin-bottom: 0px;" >Commit Changes</button>
</form>

'

Here's my jQuery/Javascript: 'code

 performRegionAction : function(regionID, regionAction){
        document.getElementById('regionID').value = regionID;
        document.getElementById('regionAction').value = regionAction;
    },'

And finally here's my Java: '

public void setRegionID(Field<String> regionID){
        this.regionID = regionID;
    }

    public Field<String> getRegionID(){
        return this.regionID;
    }

    public void setRegionAction(Field<String> regionAction){
        this.regionAction = regionAction;
    }

    public Field<String> getRegionAction(){
        return this.regionAction;
    }

'

Upvotes: 0

Jack
Jack

Reputation: 133587

Basically you attach an action to a CSS selector in jQuery by using

$('.classname').bind('click', function() {
  // do something
});

This will execute the code whenever something that has class .classname is clicked.

In your situation you will have 3 classes, one for each kind of button. How to specify the custom behavior is your choice. You could attach some custom attribute to every DOM element of every row so that inside the click function you are able to distinguish between them and do different actions accordingly.

Mind that this is a good design just if you can use this attribute without cluttering your click function with a long chain of if/else, otherwise you'd better have many different actions bound to every button. Since you are working with JSP you can generate JS code dynamically when the resulting HTML is generated for the client.

Upvotes: 1

Related Questions