I have commandLink with an actionListener that calls a method to change the value of text. The same commandLink has an action that reloads the page. When I click the commandLink, the actionListener is called. But the action only is completed --showing the updated value of text-- when I refresh the browser. Why isn't the outputText being automatically updated?
Some code:
home.jspx
(...)
<f:view>
<table id="main_table">
<tr><td width="160px"><jsp:directive.include file="./logo.jspx" /></td>
<td><jsp:directive.include file="./header.jspx" /></td></tr>
<tr><td width="160px"><jsp:directive.include file="./vertical_navigation.jspx" /></td>
<td align="center"><ice:outputText value="main" /></ice:outputText></td></tr>
</table>
</f:view>
(...)
customer.jspx is the same, but the value of the outputText is #{customer.text}
vertical_navigation.jspx: many command links like the following:
(...)
<ice:form id="nav_form"><ice:panelGrid columns="1">
<ice:panelCollapsible expanded="true">
<f:facet name="header"><ice:panelGroup>
<ice:outputText value="Customer" />
</ice:panelGroup></f:facet>
<ice:panelGrid columns="1">
<ice:commandLink actionListener="#{client.defineText}"
immediate="true" action="customer" id="list">
<ice:outputText value="List" />
</ice:commandLink>
(...)
the bean:
(...)
public String text;
public void defineText(ActionEvent evt) {
text = ... some text related to the link
}
public String getText() {
return text;
}
Well, everything works fine, except that I have to refresh the page when I click a link so that the value of text is updated. I put some System.out.println() satatements inside the bean methods and noticed that the defineText method is called whenever I click a link. But the getText is called only after a refresh. The output is like this:
// click the link "list"
called defineText for link list
// click the link "new"
called defineText for link new
// click the link "external"
called defineText for link external
// refresh the broswer
called getText // this will show the updated value of "text" for the link "external"
// click the link "new"
// refresh the broswer
called defineText for link new
called getText // this will show the updated value of "text" for the link "new"
I'm working with JSF 1.2 and IceFaces 1.8.2.
I have finally found a sollution. I removed the JSF 1.2 Apache Myfaces and substituted by the Sun RI jars. If anyone can explain why it worked, I'll appreciate.
I don't work with IceFaces, but try to remove immediate="true" from your command link - with standard h:commandLink it could cause the problem.
Its about the cycle and how the events are handled.
from my experience, two ways to fix it:
1) queue the event (check the different type of events) until its time to update the values.
2) work around by trapping with another tag
Related
I use Liferay 6.2 on JBoss 7.1.1.
Also I am using a JSP as view with AlloyUI.
I want a button as a link and as a submitter of a value to a method in the MVCPortlet class.
The link is inside a java array.
The attribute that is passed to the java method is inside a input field.
It works if I use just one of this two.
I tried to combine them but it doesn't work.
I tried this:
<a href="<%=unread[i][k]%>" target="_blank" >
<aui:button type="submit" />
</a>
It calls the method but it doesnt opens a new tab in my browser. In my browser I can see that it is a link, if I click right on it -> new tab, it opens it correctly in a new tab. But not if I just click on the button.
Second way:
<aui:button type="submit" onclick="window.open('http://www.google.de', '_blank', ''); return false;"/>
It just opens google but doesn't calls the method. Also it is not possible to get an Java attribute inside of a Javascript, but I could get the value out of a hidden input field. But still there would be the problem that it doesn't call the method.
I decided to get on with the second solution.
The first mistake was return false; in my onclick param, so I deleted it.
Then the submit function works as usual.
The next problem was to access a Java variable inside the javascript onclick method, so I used EL and JSTL to get it work:
<c:set var="url" scope="session" value="<%=unread[i][k]%>"/>
<aui:button type="submit" onclick="window.open('${url}', '_blank', '');" />
I am using primefaces autocomplete in my application to suggest userIds to the User.Once user enters three characters into the Autocomplete textbox my UserIds list will be suggested to the user to Autocomplete. As soon as user selects userId from List, I am updating the User First and Last name in the Output Text in the following format John Doe(jd123) with a Delete button beside to this name. As shown in comments in the code first ajax request is perfectly working fine.But When I am trying to delete name that I am printing using <h:outputText/> I am getting an error which is
javax.faces.FacesException: Cannot find component with identifier
"items" referenced from "j_idt34:0:imgid".
My Code :
<h:outputLabel value="Select user" for="acMinLength" />
<p:autoComplete id="acMinLength"
minQueryLength="3"
value="#{autoCompleteBean.txt2}"
completeMethod="#{autoCompleteBean.complete}">
<p:ajax event="itemSelect"
listener="#{autoCompleteBean.handleSelect}"
update="items"/> // First Ajax request perfectly working fine
</p:autoComplete>
<h:outputLabel value="selectedUsers" for="acMinLength" />
<h:panelGroup id="items">
<ui:repeat value="#{autoCompleteBean.printId}" var="item">
<h:outputText value="#{item}"/>
<h:graphicImage name="delete.png" library="images" id="imgid">
<p:ajax event="click"
listener="#{autoCompleteBean.updateList}"
update="items"/> // This is where i am getting exception
</ui:repeat>
<h:panelGroup>
I know I can update the parent component with child Ajax request. But I don't know what I am doing wrong.
it should be safer to update the h:form component. I'm not sure you can update every h: component by id. If you open the resulting xhtml and try checking the actual id path of the children components, you will see that the don't include the ids of all of their parent's component. Some id's are skipped
However, you can try this
update=":#{p:component('items')}"
Hope it helps
After a rigorous search I tried the answer posted by andre here(Primefaces - Cannot find component with identifier outside the datatable) and hurray it's working.
like this
update="#([id$=items])"
I am using Primefaces 3.5. I have the following code:
<p:panel id="containerSelectionPanel" header="Container Selection">
<h:form id="containerSelectionForm">
<p:selectOneMenu value="#{manageContainersBean.selectedContainer}">
<f:selectItems value="#{manageContainersBean.containerList}" var="container" itemLabel="#{container.name}" />
<p:ajax update=":componentSelectionPanel" />
</p:selectOneMenu>
</h:form>
</p:panel>
<p:panel id="componentSelectionPanel" header="Component Selection">
<h:form id="componentSelectionForm">
<p:galleria id="componentGallery" var="component"
value="#{manageContainersBean.selectedContainer.components}">
<p:graphicImage value="#{component.preview}" title="#{component.name}" alt="#{component.name}"></p:graphicImage>
</p:galleria>
</h:form>
</p:panel>
On startup of the website the gallery gets shown correctly. However, if I change the selection
in the SelectOneMenu the gallery is just empty (nothing gets shown, the panel for "Component Selection" itself is empty).
The updating through the AJAX request works. The list of components is retrieved upon update , the preview as well as name are requested as desired. However, the HTML code generated for the updated gallery contains very few lines, way less than when loading the gallery initially, see here:
<ul class="ui-galleria-panel-wrapper">
<li class="ui-galleria-panel ui-helper-hidden">
<img id="j_idt28" alt="Have lunch" title="Have lunch">
</li>
<li class="ui-galleria-panel ui-helper-hidden">
<img id="j_idt28" alt="Have brunch" title="Have brunch">
</li>
</ul>
As can be seen, the newly selected container is fetched, though and the images are somewhat updated (but the inital gallery contains way more code).
I already tried updating the complete form instead of only the gallery: same result. I tried moving the gallery out of the form itself: same result. I tried using a Javascript update from the Browser console as tried here, nothing happens.
Does someone have a solution to this problem?
Update: I checked the server response, that gets send when the gallery should be updated. It contains exactly the same code as the initial response (when the gallery works), so there must be something wrong with JSF during rendering the response. But still no clue on how to handle this.
Edit: general thing: the form should not be updated, but the complete panel.
Regards,
bobbel
I found the issue being reported here.
The temporary solution then is to modify the ajax request in the containerSelectionForm as follows:
<p:ajax
update=":componentSelectionPanel"
oncomplete="PrimeFaces.cw('Galleria','widget_componentSelectionForm_componentGallery',{id:'componentSelectionForm:componentGallery'}" />
In the call of PrimeFaces.cw() be sure to include galleria parameters like panelWidth in the object, that already contains the id.
In my JSF 1.2 webapp I have a page with a <h:commandButton> that invokes an action method on a backing bean. This action will cause data to be removed/replaced in the database, so I want to avoid any situations where the user accidentally clicks on the command button.
I would like to implement a simple "Are you sure?" prompt with "Yes/No" or "OK/Cancel" options using JavaScript. I'm not great with JavaScript and I have never mixed JavaScript with JSF before. Can anyone provide a code snippet to show me how to implement this?
Here is the piece of my JSP page where I declare the command button:
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif">
</h:commandButton>
SOLUTION:
The solution provided by BalusC worked just fine. I wanted to also mention that it is easy to use text from a resource bundle as the prompt text. On my page, I load the resource bundle with an element like this:
<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" />
The <f:loadBundle> must be inside your <f:view>. Then I add the code provided by BalusC to my command button element but substitute a string from my resource bundle for the 'Are you sure?' text, like this:
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif"
onclick="return confirm('#{bundle.confirmationTextAcceptDraft}')">
</h:commandButton>
The line in my English resource file (just a plain text file with key/value pairs) looks like this:
# text displayed in user prompt when calling confirm()
confirmationTextAcceptDraft=This will overwrite the current report and cannot be undone. Are you sure?
Use the JavaScript confirm() function. It returns a boolean value. If it returns false, then the button's default action will be blocked, else it will be continued.
<h:commandButton onclick="return confirm('Are you sure?')" />
Since it already returns boolean, there's absolutely no need to wrap it around in an if a suggested by other answers.
You could add the javascript to the onclick of the button.
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
onclick="return confirm('Are you sure?')"
image="/images/checkmark.gif">
</h:commandButton>
This should work. Ideally it should be in a java script file.
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif"
onclick="if (!confirm('Are you sure?')) return false">
</h:commandButton>
I'm not sure what event you'll have to listen for (onclick i would assume) as I've never used JSF. Generically speaking, this should work.
var element = document.getElementById('commandButtonAcceptDraft');
element.onclick = function(e){
return confirm('Are you sure etc...');
};
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>