primefaces select tab when button is clicked - html

I assume this is a rather simple issue, but I'm very new to Primefaces. I have a form that's including a few Primefaces tabs. Naturally I can view each tab when I click on it, but I'm looking for a way to go to a certain tab when a commandButton is clicked. Is there any way to do this?
Basically I'm looking for something like:
<h:commandButton value="Submit"
onclick="<open a certain tab>"
action="#{doSomeJavaWork}"
update=":main_tabs:some_form" />
Thanks!

<h:commandButton ... onclick="tabViewWidgetVar.selectTab(2);" .../>

Related

p:autocomplete stops working after updating parent via ajax

I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");

Submit form with primefaces widgets on enter

I need to have my primefaces p:commandLink submit a h:form when the user presses the enter key.
I tried the solutions suggested here and in a couple of other places. I also tried the primefaces defaultCommand. No matter what I try, the browser seems to notice the button press, but the action is not performed.
These are my form's widgets:
<p:autoComplete id="acSimple" value="#{home.searchKeywords}" completeMethod="#{home.completeText}" style="" />
<p:commandLink id="srchbutton" action="#{home.goToSearchResults}" onclick=" $('.prgrs').show();">
<h:graphicImage id="srch" name="images/searchbutton.jpg" class="img-responsive" style="display: inline-block; margin-left:0px; margin-bottom:-0px;" />
</p:commandLink>
<p:defaultCommand target="srchbutton" />
<h:form onkeypress="if (event.keyCode == 13) { document.getElementById('form:srchbutton').click(); return false; }">
Make sure your real id of link is "form:srchbutton" or put whatever it is.
You can use developer tools or firebug to find it out.
Dijana's solution is right, but the action onkeyup should be used and not onkeypress.
ENTER is an action event so it will not be caught by onkeypress which captures basic and meta characters.
So you need onkeydown (which can cause problems if ENTER is down even after the next page loads) or onkeyup.

primefaces show panel when a task completed

I have a button in primefaces, that when is pressed I make some calculations and a new panel should appear showing the results.
I have the code
<p:commandButton value="Submit"
ajax="false" actionListener="#{myBean.search}" oncomplete="panelwv.show();">
</p:commandButton>
<p:panel widgetVar="panelwv" visible="false" closable="true"
toggleable="true">
So, when the button is clicked, the MyBean.search method is called, and when is finished I want the panel "panelwv" to appear, but it does not.
What am I doing wrong?
Thank you!
oncomplete can only be executed if ajax is true. Otherwise the whole page is reloaded. You will probably also want to update the contents of your panel by giving it an id and setting the update property of the command button to this id.

Identifying main submit button for a form

I have a form which has a few text boxes, and two submit buttons. When a text box is selected, and I press Enter, the first submit button is triggered. However, this is not the button that should be pressed at that time. How can I make it so that when the Enter button is pressed, the second submit button (or at least, the last occurrence of the submit button) clicked?
I have an implementation of this currently using JavaScript, but I'm hoping there is a native option for it.
Its pretty tough to get more native than javascript. You're gonna need it here. By the way, the behavior you noticed is the expected behavior. The first submit button in your html is the one that will get sent with your header.
I guess if you really didn't want to use js, you could just put the other button first and then use css to position them correctly on the page itself.
If you are using asp .net then you can use "UseSubmitBehavior" property on the button. See below code.
<asp:TextBox runat="server" ID="txt1"></asp:TextBox> <br/>
<asp:Button runat="server" ID="btn1" UseSubmitBehavior="False" Text="1" OnClick="test1"/> <br/>
<asp:Button runat="server" ID="btn2" UseSubmitBehavior="True" Text="2" OnClick="test2"/>

in JSF - How to rerender a component on button press. (The smart way?)

I have a simple HTMLCommandButton that I want to cause a rerender to another component.
I know of a simple way to do that - add an ajax support object and have it run on "onclick" event and rerender.
<h:commandButton value="Submit" action="#{actions.submitToDB}">
<a4j:support event="onclick" reRender="Button0" />
</h:commandButton>
I figured there has to be a smarter way to do this with the on* attributes of the HTML CommandButton but I'm not sure what to write to cause the rerender (Using this alleged method)
Thanks!
No, there isn't a smarter way in the common case. This is the way to do it. You will have to do the following
set type="button" on the button.
set the action on the <a4j:support> rather than on the button istself.
In this particular case (a button) a shortcut will be:
<a4j:commandButton value="Submit"
action="#{actions.submitToDB}" reRender="Button0" />