popup in JSF to set it value in parent Window - jsf-2

I have written a button onClick to open popup window. The window has a table with a commandLink in each row. How to populate the parent page textbox on click of commandLink in child page?

You can give the commandLink an ajax tag, with whom you render your parent textbox.
Use something like this:
<h:inputText id="parentTextboxId" value="#{bean.text}" />
<rich:popupPanel domElementAttachment="form" show="#{bean.showPopup}" modal="true">
<h:commandLink value="My Link">
<f:ajax render=":mainForm:parentTextboxId" listener="#{bean.changeText}" />
</h:commandLink>
</rich:popupPanel>
In the bean method bean#changeText the value of the textbox will be changed, but you can also do it elsewhere, like in the action method of your commandLink

Related

a4j: ajax event="change" doesn't work on the first click, but on the second click

I have a form using JSF with rich faces. In the form there are two radio buttons: "Yes" and "No". The default selection is "Yes". When clicked "No" a text area should appear below. But it doesn't. Instead It appears in the second click; I first click "No" (Default was "Yes") nothing happens and then I click "Yes", now it works, the text area below appears but it automatically chooses "No".
Here is the code:
<h:outputLabel for="cheapest">Cheapest Flight?</h:outputLabel>
<h:selectOneRadio id="cheapest" value="#{myController.selectedItem.cheapest}" disabled="#{myController.showMode}">
<f:selectItems value="#{yesNoTypeItems.items}" />
<a4j:ajax event="change" render="#form" execute="#form" />
</h:selectOneRadio>
<h:outputLabel for="newArea" rendered="#{myController.selectedItem.cheapest == false}">New Text Area</h:outputLabel>
<h:inputTextarea id="newArea" rendered="#{myController.selectedItem.cheapest == false}" disabled="#{myController.showMode}"
value="#{myController.selectedItem.newArea}" style="width:300px;height:100px;">
</h:inputTextarea>
onchange - Javascript code executed when this element loses focus and its value has been modified since gaining focus. (docs)
Perhaps unfortunately named the change event doesn't fire when you expect it to. Use the click event and check if the value is actually being changed if you need to.

Reset Button does not work after form submit

In my application I placed a <p:panel> in a <h:form>. Now in this panel I have some <p:inputText> and at the end of panel I have two button one is Submit another is
Reset. Reset button works properly if it is pressed before submit the form. But if Once I submit the form and some text fields fails to validate
then that fields are containing the previous entered data. Now if I press Reset button to clear all the fields then it is not working.
My Reset button's code :
<p:commandButton value="#{Bundle['resetButton']}" process="#this" update="addCustomerPanel" immediate="true" />
The form is like :
<h:form id="customerForm">
<p:panel id="addCustomerPanel">
.......text fields and two buttons placed here
</p:panel>
<h:form>
Update
I have solved this problem by navigate to the same page on reset button click.

Target specific tabs of a p:tabView in p:printer

I am trying to print multiple tabs but want to exclude some.
I tried the following:
<p:printer target="tabs:tab0,tabs:tab2" />
and
<p:printer target="tabs:tab0" />
<p:printer target="tabs:tab2" />
Neither worked.
I played somewhat around it and it works only for a specific tab if the tab is visible. You can thus definitely not specify multiple tabs. You might want to post an issue report about that to PrimeFaces, although solving that would be relatively hard.
As of now, to get it to work for a specific tab, you'd need to toggle the desired tab visible in the button's onclick handler before print action is performed. You can use the select() function of the <p:tabView> widget for this wherein you pass the zero-based tab index.
Here's a kickoff example.
<h:form id="form">
<p:tabView id="tabs" widgetVar="tabs">
<p:tab id="tab1" title="tab1">tab1</p:tab>
<p:tab id="tab2" title="tab2">tab2</p:tab>
<p:tab id="tab3" title="tab3">tab3</p:tab>
</p:tabView>
<p:commandButton type="button" icon="ui-icon-print" value="Print tab2" onclick="tabs.select(1)">
<p:printer target="tabs:tab2" />
</p:commandButton>
</h:form>

Update component from iframe

There are a <p:inputText> and a <p:commandButton>. I want to click the button to open a dialog with a table. When I select one row and press OK, I would like set the value of the selected row in the <p:inputText>.
In the dialog, I use an <iframe> and call a JS function to set the src of <iframe> and show the dialog. But I have no idea to update the <p:inputText> from an <iframe>.
Main page:
<h:form id="dialogForm">
<p:inputText id="tarText" value="" />
<p:commandButton value="master file" oncomplete="showDialog('#{request.contextPath}')" />
<p:dialog widgetVar="lookupDialog" header="Lookup">
<iframe id="myiframe"></iframe>
</h:form>
JS:
function showDialog(contextPath) {
var myiframe = document.getElementById("myiframe");
myiframe.src = contextPath + "/pages/lookup.xhtml";
lookupDialog.show();
}
Edit----
#BalusC but how can I refresh a special area of this page by pressing a button? The more important thing is, the different button pressed, the different content shown out. And I don't wanna refresh the page sync.

Render h:panelGrid on dataTable row select?

I have a dataTable that when a user selects a row a number of fields are populated so they can see more detail. of that particular item. However, at the moment the page loads with the unpopulated panelgrid and populates on selecting of a row. How can I hide this panelgrid and get it to show once the row has been selected??
Thanks
Use the rendered attribute and let it evaluate true if anything has been selected.
E.g.
<h:panelGrid rendered="#{not empty bean.selectedRow}">
<h:outputText value="#{bean.selectedRow.foo}" />
<h:outputText value="#{bean.selectedRow.bar}" />
...
</h:panelGrid>

Resources