Updating a bounded JSF attribute dynamically - html

i wanted to know if there is a way to update a jsf commandlink bounded attribute after the user clicks on it.
<p:commandLink resetValues="true" value= "#{NotificationManagedBean.countUnreadNotification}" actionListener="#{NotificationManagedBean.showUnreadNotification()}" />
In this case, countUnreadNotification is a number, i would like to reset the value after the user clicks on showunreadnotification...
I've tried resetting countUnreadNotification to 0 at the backing bean and refreshing the page, but to no avail. Scope for the backing bean is requestscoped.
Is there a way to do this?

The resetValues attribute is used to reset all input html element on the client before the ajax request is sent, which isn't what you want here.
And since your backing bean is requestscoped, the countUnreadNotification attribute will always be 0 since this bean will allocated from scratch for each request.
But what you aren't doing is marking the commandLink component to be updated when the ajax request returns:
<p:commandLink value="#{NotificationManagedBean.countUnreadNotification}"
actionListener="#{NotificationManagedBean.showUnreadNotification()}"
update="#this" />

Related

Is there any way to stop ajax call when user value is null in input

I am using keyup event for ajax call on input tag and f:validaterequired tag. On every ajax event(Keyup) f:validaterequired is validated. I dont want to validate when value is null. Is there way to do that. I definitely need to use keyup event. I know i can use blur event but requirement need keyup event. Thanks`
<h:inputtext id="id" value="#{bean.somevalue}">
<f:ajax event="keyup" listener="#{bean.listenermethod}" execute="#this
messages" render="#all"
<f:validaterequired/>
</h:inputtext>
` I know we can use delay attribute in ajax to give some time. I dont want to use delay attribute. Currently i am using custom validator in bean to check.
If I understand the problem it works for me to add
onkeyup="if(!$(this).val()) return false;"
to the h:inputText.

Primefaces selectOneMenu changes value after page refresh in firefox

I am using PrimeFaces SelectOneMenu with change event call.
When I change it's value, the change method calls and sets some parameters. when I refresh the page, in the bean side, selected value changes to default but in the UI, changed value showed. So, when user clicks on the submit, the setter method changes the value but change method don't calls.
Here is UI code:
<p:selectOneMenu value="#{bean.selectedType}">
<f:selectItems value="#{bean.types}"/>
<p:ajax event="change" listener="#{bean.changeType}" update=":form"/>
</p:selectOneMenu>
<p:commandButton actionListener="#{bean.changeType}" update=":form"/>
I Solve this problem with remoteCommand component, to update selectOneMenu after page is refreshed. Don't forget to set selected variable to null in #PostConstruct method.
The problem occurs only on Firefox browser.
code:
<p:remoteCommand name="rcName"
update="#form"
autoRun="true"
ignoreAutoUpdate="true" />code
I recently had the same problem and was able to solve it by adding explicit no-cache instructions to the HTTP-Header.
e.g. implement the javax.servlet.Filter class and do something like
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.setHeader("Cache-Control", "no-cache, no-store,
must-revalidate"); // HTTP 1.1.
httpServletResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0.
httpServletResponse.setDateHeader("Expires", 0); // Proxies.
in the doFilter() method.
Then just apply your filter-class to the pages you want to filter in your web.xml
Check if your bean is #RequestScoped. If so change it to #ViewScoped.
Are you tried to put process="#this" in the ajax component?
For me, this was solved via the example in https://www.logicbig.com/tutorials/misc/primefaces/select-one-menu-with-ajax.html
The key is that the ajax change event isn't well supported (it does not appear to fire the update). Using itemSelect instead completely fixed this problem for me.
<p:ajax event="itemSelect" update="#all"/>

Toggle inputTextarea editable with ajax but can not submit its value

I have encounter a problem on First toggle inputTextarea editable with Ajax, how to submit typed in value after toggle The UI build on JSF 2 and RichFaces, the backing bean is #ManagedBean /#RequestScoped for now, contain all necessary properties(indicator/reason) and corresponding get/set methods. The app is running on IBM websphere. I was first taken example from here and here.
The myPage.xhtml related section is
<h:form id="myPage">
<td>
<h:selectOneMenu value="#{myPage.indicator}">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
<f:ajax render="reason" />
</h:selectOneMenu>
</td>
<td><h:inputTextarea id="reason" value="#{myPage.reason}" disabled="#{fn:toLowerCase(myPage.indicator) != 'y'}">
</h:inputTextarea>
</td>
<td>
<h:commandButton value="Update" id="update"
action="#{myPage.update}">
</h:commandButton>
</td>
</h:form>
The function here is using selectItem "indicator" to toggle whether inputTextarea "reason" is editable or not. I use <f:ajax> to render, the effect can be seen directly when I toggle on GUI.
When I set "indicator" as Yes, "reason" becomes editable, then I type in some words and click "upload" button(which is a normal post method contain logic to commit form value to database), but the words in "reason" not commit to database.
What I suppose is <f:ajax> set render attribute point to inputTextarea "reason", which means a request already generated when I toggle the selectItem "indicator", but this request hold nothing, because the sequence here is first toggle then available to type in words, the "reason" contain no words at toggle time. And as this inputTextarea "reason" set as ajax render, the normal submit form way trigger by "upload" button also cannot commit its value even I click after type in words. Is this a right guess ?
If this is the right guess, how to solve this issue(e.g how to collect this inputTextarea "reason" value after its become available by ajax toggle) ? Create backing bean listener method with <f:ajax render="reason" listener="...">(and if yes, please show some detail actions I should add for this listener) ? OR any other way(e.g should I go with JavaScript or JQuery to solve) ? If what I did wrong way, please help me to figure out(initial goal is to toggle inputTextarea to editable like ajax effect and then submit the value later typed in).
Maybe this question is a little fuzzy, I want to re-declare it here as: There is an indicator control a related inputTextarea editable or not, but if I just use Ajax render attribute to control this, I cannot use Ajax to retrieve the later typed in words in this inputTextarea, as ajax is acutally a request send from client to server side, when i toggle the indicator to make inputTextarea editable, the request already send out, but no words contained in request at this time, so I stuck here, can not find way to use Ajax to toggle and send later typed in words.
Still welcome if anyone come to an idea with JSF Ajax way.
I fix the issue with using javascript instead of Ajax, the fixed way is a little interesting, as to simulate Ajax effect, need to trigger javascript function in different cases(a combination usage of same javascript function):
1. First, the javascript to toggle "reason" inputTextarea based on indicator, retrieve these DOM elements based on 'formname:element_id', in my question, already show "indicator" as h:selectOneMenu, and "reason" as h:inputTextarea.
<script type="text/javascript">
function handleDisabledOrNot() {
var currVal = document.getElementById('myPage:indicator').value;
if(currVal == "N") {
document.getElementById('myPage:reason').disabled = true;
} else {
document.getElementById('myPage:reason').disabled = false;
}
}</script>
2. Then call this function on indicator with onclick event
<td align="left"><!-- Use onclick event to control whether reason disabled or not -->
<h:selectOneMenu id="indicator" value="#{myPage.indicator}" onclick="handleDisabledOrNot()">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu></td>
3. Finally check the status when load page or work in the page on reason with onblur / onfocus event, to make sure full-scale detect indicator status in the view, otherwise, it will miss status checking in either way. E.g, when first time load the page, if missing check status with onfocus event, if you move mouse into reason inputTextarea, no matter what indicator is Y or N, it is editable initially, to avoid such case, should use onfocus event to check, and vice versa to use onblur event.
<!-- Use both onblur and onfocus event to detect indicator status full-scale on view -->
<h:inputTextarea id="reason" value="#{myPage.reason}" onblur="handleDisabledOrNot()" onfocus="handleDisabledOrNot()">
</h:inputTextarea></td>
Finally, it shows the same effect as Ajax render way. As the link i quote in my question, I know in JSF, the best solution is using Ajax to work with backing bean, but as I don't know how to implement after Ajax toggle, how to collect data in inputTextArea later typed in, I can not come with solution on Ajax way now. So, still welcome some idea based on Ajax, if not, just show purely javascript way here.

primefaces outputText html

I have a String in my Bean which actually holds a post form. I display this page using outputText:
<h:outputText escape="false" value="#{myBean.stringHtml}" />
The html is being displayed correctly. This page contains a post form, where I want to save some data in by bean where the submit button is pressed.
I want somehow a listener to this button that is contained within the String. Is this possible?
Thank you!

JSF reading dynamic input element in a managed bean

I have a pretty complex JSF page (we use JSF2 with facelet) in which I have to "plug-in" a pure html form section (it represents a WYSIWYG template for an document that will be created as Pdf later).
Very simplified the page looks like
<h:form id="formEditDoc">
<p:commandButton styleClass="commandButton" value="Save"
actionListener="#{myBean.myAction}" update="masterForm:msg">
</p:commandButton>
<!-- some jsf controls here -->
....
<!-- this is my dynamic section -->
<input id="ft2" type="text" value="foo"/>
</h:form>
In the managed bean myBean (request scoped) I have the action listener in which I try to get the "foo" string in this way:
String text1 = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("ft2");
But I can't get the value. Text1 is always null. I even tried to set ajax=false to the commandButton, but nothing changed.
Any idea about what I am doing wrong?
It's the input's name=value pair which get sent as request parameter name=value, not the id=value. You need to set the name attribute instead.
<input id="ft2" name="ft2" type="text" value="foo"/>
Unrelated to the concrete problem, I suggest to use #ManagedProperty instead to set the value:
#ManagedProperty("#{param.ft2}")
private String ft2;