how to change css of the image link when clicked? - java

i have a commandLink that has a graphicImage inside and i want to change some property
of the link to show that it is clicked.I could find no built-in property for that purpose.
Maybe some javascript or css code is required.Since i am not so good at those,i'd be glad if someone could guide me a way.Thanks
Here is the code of the link.
<p:commandLink title="Forward" update="growl"
actionListener="#{roombaBean.forward}">
<p:graphicImage value="images/but_forward.png" />
</p:commandLink>

Use onclick event of the commandLink to execute javascript.
Something like
<p:commandLink onclick="changeCSSInJavascript()" ...>
....
</p:commandLink>

You could add a style attribute to primefaces graphicImage and give it a string value from a bean. After the link it's clicked you could update that string value with: opacity:0.4:
<p:commandLink title="Forward" update="growl"
actionListener="#{roombaBean.forward}">
<p:graphicImage value="images/but_forward.png" style="#{myBean.myStringStyleValue}" />
</p:commandLink>
For IE8 and earlier use filter:alpha(opacity=40);
Anyway I don't really understand why do you want something like this? Don't you navigate away from the page? Why is it really matter that the image was clicked? Please, if you could give some more info, we could see if there is a better solution...

Related

How to call managed bean in h:outputLink when opening new page

I have a h:outputLink which opens new JSF page and sends h:param.
<h:outputLink id="lnkHidden" action="#{HistoryLinkController.linkValue("test")}" value="HistoryLink.xhtml" style="display:none">
<f:param name="id" value="#{item.aSessionID}" />
</h:outputLink>
I want when I click it to send a value to a second managed bean. I tried to implement it with action="#{HistoryLinkController.linkValue("test")}" but I get error. Is there any attribute that I can use for this purpose?
Try using a <h:commandLink> in the following way and it should work fine
<h:commandLink id="hLink" value="History" action="#{HistoryLinkController.linkValue}" >
<f:param name="sessID" value="#{item.aSessionID}" />
</h:commandLink>
and the bean "HistoryLinkController" should have a method like
public String linkValue(){
// get "sessID" from FacesContext
...
return "/HistoryLink.xhtml";
}
Replace h:outputLink into h:commandLink.
I have also tried to navigate to some view along with passing a value to another bean already but I didn't get it. But what I got is---
U can remain in the same bean class if possible, and use navigation rules in faces-config.xml for navigating to another page.
And In ajax, action will be called earlier than its actionListener.
Hope it helps you finding a way...

#all in JSF Ajax does not work

This line is inside a form tag:
<p:commandLink actionListener="#{questionBean.removeQuestion(question)}"
value="Delete" styleClass="delete" update="#all"/>
However, it only works with #form. Nothing happens when I have #all. I want to be able to update not only the form but also other parts of the page.
Seems that update="#all" not supported by primefaces
although its a bit diff question update="#all" is not working with "ui:include ..."
but still its being said several time that
update="#all" does not work with PimeFaces.
another ref : Issue 2026: update="#all" is not working PrimeFaces ajax.
Try with process="#all" as explained here.
<p:commandLink actionListener="#{questionBean.removeQuestion(question)}"
value="Delete" styleClass="delete" process="#all"/>
I think it may be a bug. Even if you use JSF's <f:ajax render="#all">, it may also does not work. To solve this, I think you can simply set the id attribute of the body tag to, for example, mySexyBody. Then you can do update="mySexyBody".

Richfaces modalPanel load with Ajax

I use richfaces in my project and particularly the tag rich:modalPanel which allows to display popups in pages.
So to do this, I include my popup like this:
<ui:include src="popup.xhtml" />
This popup contains this code:
<rich:modalPanel id="sra" width="400" autosized="true" left="100" >
...
</rich:modalPanel>
Finally to display the popup, I do this in the main page:
<a4j:commandLink id="linkSRA" value="#{msg['SRA']}" action="#{controller.checkSRA}" oncomplete="#{rich:component('sra')}.show()" />
All work fine but my problem is the next:
In a page, I have many popup and each popup is included in the main page. The weight of this one is very big for nothing. So, how can I do to load the popup's content in ajax when I want to load a popup ?
Thanks
Re-render the panel content via some action and then open the modal in oncomplete=".."
I have write a little article : "How to create a stateful Richfaces popup" where I show how to create a popup controller. This popup controller allows to replace all the modal tags with a few lines :
<a4j:outputPanel binding="#{popupController.popupContainer}" id="popupContainer">
<c:forEach items="#{popupController.popups}" var="popup">
<f:subview id="popupView#{popup.id}">
<ui:include src="#{popup.uri}">
<ui:param name="popupBean" value="#{popup.popupBean}"/>
</ui:include>
</f:subview>
</c:forEach>
</a4j:outputPanel>
The article is available here. Sorry, it is too long to be paste directly here.

JSF - 2 a4j:actionParam in one commandlink bug

I have such structure in my jsp:
<h:commandLink action=#{docbean.save}>
<a4j:actionParam name="somename" value="bill_all" assignTo="#{billdoc.billType}"/>
<a4j:actionParam name="somename" value="bill_document" assignTo="#{docbean.doctype}"/>
</h:commandLink>
While debugging i saw, that billdoc.billtype and docbean.doctype have the same values: "bill_document".
Is it bug? If not, then how can i put value to my managed-bean?
UPDATED:
Found the answer:
I had two actionParams with one name. ActionParam is f:actionListener + f:param. So, if you have several actionparams with one name, you will have the problem i had. RichFaces and JSF doesn't warn you about it.
First, you need a space here <a4j:actionParamvalue - before value
Second, You may try this instead of <a4j:actionParam>:
<f:setPropertyActionListener value="bill_all" target="#{billdoc.billType}" />
You may need to put immediate="true" on your commandLink if there are validation errors in your form. You can view these errors by adding <rich:messages /> ontop of the page.
Try using an a4j:commandLink. Or - if you stick to h:commandLink - try embedding your a4j:actionParams in an a4j:support tag.

How to use RichFaces a4j:commandButton not using submit

I have an a4j:commandButton which looks like this
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp"
action="#{MyBacking.stop}" value="Stop" />
</a4j:commandButton>
When the app is deployed, and the button clicked, the stop() method is not being called. All the a4j:commandButton examples refer to forms, but this button is not in a form - it's a button the user is going to use to cause the server to run some back-end logic. At the moment, the method is
public void stopNode() {
logger.info("STOPPING");
setLastOp("Stopped.");
}
Other methods which don't use this type of button are updating the lastOp field, but I'm not seeing anything on the console with this one. Am I right to cast this as a button? Should I put this in a h:form tag?
The firebug console says:
this._form is null
which I don't understand.
Any help well appreciated.
UICommand components ought to be placed inside an UIForm component. So, your guess
Should I put this in a h:form tag?
is entirely correct :) This because they fire a POST request and the only (normal) way for that is using a HTML <form> element whose method attribute is set to "post". Firebug also says that a parent form element is been expected, but it resolved to null and thus no actions can be taken place.
Only "plain vanilla" links like h:outputLink and consorts doesn't need a form, because they just fires a GET request.
Yes, wrap it in a form. I'm sure BalusC will post a detailed explanation while I'm typing my answer. (yup, there it is)
I have to ask why you didn't just try a form first, before posting here.
Look at your code:
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp" action="#{MyBacking.stop}" value="Stop" />
You finished <a4j:commandButton with />, why need that orphan </a4j:commandButton> ?
If for some reason you don't want to place the button inside a form, you can do something like this:
<a4j:commandButton onclick="fireAjax()"/>
<h:form>
<a4j:jsFunction name="fireAjax" action=".."/>
</h:form>

Categories

Resources