asked on

How do I make these two buttons look the same on my jsp page?

I have a jsp page using struts tag as below:

<html:form action="/actions/graphics/job/attachFile/confirm">
<html:cancel value="Cancel" styleClass="buttons"></html:cancel>
<html:submit value="Confirm"/>
</html:form>

Open in new window

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;

		if (isCancelled(request))
		{
                 //do something here
                }
               //......
     }//execute

Open in new window

it works very well in production for years, now I am trying to change the looking of the button by integrating with bootstrap.
When I only changed the looking of button confirm, it looks like this:

at this moment, both buttons are functioning.

however, when I tried to change the looking of both buttons, it looks like this:

             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="submit" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>

Open in new window

they both looks good, but the problem is both buttons are doing the same job, which means they both have the CONFIRM function , no more CANCEL function.

then I tried a little modification for experiment:

             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="button" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>

Open in new window

the problem for this code is the CANCEL button does NOT work at all regardless how many time I click on it.

can anybody help me on this? all I want is just make the CANCEL button looks as big as the CONFIRM button but keep the original functioning.
I think the real question would be : how to transfer the value of CANCEL button to the HttpServletRequest such that the function isCancelled(request) can return true?
by name="cancel" ? value="Cancel" ? or type="cancel"?

Kyle Santos

Hi,

I am following up on your question. Do you still need help?

If you solved the problem on your own, would you please post the solution here in case others have the same problem?

Regards,

Kyle Santos
Customer Relations

Arthur Wang

ASKER

not yet, nobody answered my question yet, I just leave the buttons in the ugly way on the page.

girionis

You have to change the button class (class="btn btn-default"). You have to use the same class for both buttons if you want the same l&f.

Arthur Wang

ASKER

girionis, I think there is no significant difference in terms of the functionality I want. I only want them to be the same size and do the job, either class="btn btn-default" or class="btn btn-default" does NOT matter as long as they are at the same size and each button is functional.

girionis

What does the cancel do? Does it take you to another screen? You could try this:

<button id="submit" name="submit" class="btn btn-primary" value="Confirm">Confirm</button>
<a href="you cancel page here" id="cancel" name="cancel" class="btn btn-primary" value="Cancel">Cancel</a>

Open in new window

Arthur Wang

ASKER

When the cancel button clicked, it will delete the file uploaded to the temporary folder on the server, more like a garbage cleaning function.
When confirm button clicked, the file in the temporary folder will be copied to the permanent folder and insert a record into the database.

As an experiment, I just did another test:

 <input type="submit" class ="btn btn-info" name="cancel" value="Cancel"/>
 <input type ="submit" class ="btn btn-primary" name="confirm" value="Confirm"/>

Open in new window

both Cancel button and Confirm button do the same job. I think it's something related to the action function:

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;
		
		if (isCancelled(request))       <=====critical

Open in new window

not sure how the HttpServletRequest request object capture the cancel value by function----isCancelled(request)
Seems like the only way by this request object to capture the cancel value is by this line below:

<html:cancel value="Cancel" styleClass="buttons"></html:cancel>

Open in new window

Maybe I should find another way to capture the "cancel" value when the jsp/html code for the button changed?

ASKER CERTIFIED SOLUTION

girionis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Arthur Wang

ASKER

styleClass is the attribute of struts <html> tag, "btn btn-primary" is bootstrap attribute. two different domains.

If you want to mix use of both like this below:

<html:cancel value="Cancel" styleClass="btn btn-primary"></html:cancel>

I assume it wouldn't work, but I would like to give it a try right now.

Arthur Wang

ASKER

girionis, I just tried, the button looks beautiful and function well. This is very creative thought, thank you very much for your help,

Arthur Wang

ASKER

Girionis, you had solved the problem in a genius way.

girionis

I am glad I helped, than you for accepting my comment as answer :)