I am using JSF 2.0 and primefaces 3.0. I have a rowtoggler and rowexpansion. Since I am using primefaces old version so I dont have rowToggle event. And I need to call a method on server side through ajax at the time of row expansion. So I have put div tag around rowtoggler and calling a javascript function. Now I want to initiate ajax call through click event of panelgrid which is inside rowexpansion. If this happen then it would look like 3.4 rowToggle event.
You can use jQuery's event binding to execute Javascript when clicking on the row toggler.
<h:form id="form">
<p:dataTable id="dt" value="[1,2]">
<p:column>
<p:rowToggler />
</p:column>
</p:dataTable>
<p:remoteCommand name="remotecommand"
oncomplete="alert('remote command fired')" />
</h:form>
<script type="text/javascript">
$("[id='form:dt'] .ui-row-toggler").on("click", function() { remotecommand(); });
</script>
Explanation of Javascript:
The $("[id='form:dt'] .ui-row-toggler") selects the datatable by id (form:dt) and then selects all descendants that have the style class ui-row-toggler.
The .on("click", function() { remotecommand(); }) binds an anonymous function to a click event which fires a Javascript function declared by p:remoteCommand.
You can use the p:remoteCommand to execute bean methods with it's action or actionListener. ;-)
Note that this I don't find this to be a long term solution. Upgrading to PrimeFaces 3.4 would be a better solution.
I have put commandLink arround rowtoggler and I make ajax call through commandlink and I can also pass value through it using EL2.2
<p:commandLink action="#{myBean.doSomething(foo)}" >
<p:rowToggler/>
</p:commandLink>
I guess you'd something like
<p:panelGrid>
<p:ajax event="click" listener="#{bean.onclick}" />
...
the rest of the grid here
...
<p:panelGrid>
I haven't tested it but it works for other components
Except solution of siebz0r I found one more solution.
<p:commandLink action="#{bean.abcFunction}"> <p:rowToggler/> </p:commandLink>
it also works and simple too :-)
Related
I have in my .xhtml form an element into which I am appending html elements through javascript.
When I trigger an ajax commandButton, these appended elements are lost.
I have tried to exclude this element from my ajax update and make my submit partial (following this practice How to exclude child component in ajax update of a parent component?) , but in vain, the newly added elements are lost after the update takes place.
Is there any way to avoid this? Thanks in advance :)
Code sample:
<h:form id="formID">
<p:commandButton
value="ajax_button" partialSubmit="true"
update="#(#divOfElement :not(.notupdate))"
ajax="true">
<f:actionListener binding="#{myBean.myAction()}"/>
</p:commandButton>
</h:form>
<p:outputPanel id="divOfElement">
<!-- other things i want to be updated-->
<p:outputPanel id="panel_not_to_update"styleClass="notupdate">
<!-- this div is filled with other elements from javascript code which will be destroyed when the ajax update takes place -->
</p:outputPanel>
</p:outputPanel>
Here, I want divOfElement to be updated through the command button in the ajax call, but exclude the div with id panel_not_to_update so it's child elements added through javascript code will not be lost.
I am using JSF 2.2 and Primefaces 7.0.
I'm using PF 5.3, with JSF 2.2 and jQuery of PrimeFaces 5.3 (v1.11.3)
In client side script, I want to trigger click event of p:selectOneButton, so it is same if a human select a choice in the browser.
xhtml:
<h:form id="register_new_student" enctype="multipart/form-data" >
<p:selectOneButton id="newStudentGender" value="#{newStudentPresentation.newPerson.gender}">
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
</p:selectOneButton>
</h:form>
jQuery code:
$(PrimeFaces.escapeClientId('register_new_student:newStudentGender:0')).trigger('click.selectOneButton');
But this jQuery code didn't work, any help?
Try this :
$('#register_new_student\\:newStudentGender\\:0').click();
With PrimeFaces escaping function would be like this:
$(PrimeFaces.escapeClientId('register_new_student:newStudentGender:0')).click();
// the (\\:) on the selector id is to escape the special character :
as jQuery states see http://api.jquery.com/category/selectors/
go for the ID
function Logme(){
$("#logSpan").html('clicked');
}
$("#newStudentGender").trigger("click");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="Logme()" id="newStudentGender">Click</button>
<span id="logSpan">Not clicked</span>
The problem is, I have next to no knowledge of javascript, and just a passing knowledge of PrimeFaces, and I couldn't find how-to in the documentation :(
So I have a primefaces text box on my page:
<p:inputText styleClass="step1-input" value="#{PageBean.documentToDownload}">
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener="#{PageBean.validateUrl}"/>
</p:inputText>
In the text box, when I write something, an action takes place, which takes a few seconds to complete. On result, a panel appears on the page that either displays something, or says what I've written is wrong:
<p:panel id="infopanel" visible="#{PageBean.validLink and PageBean.info != null}" header="Information" style="margin-bottom:10px;">
<h:outputText value="Everything is okay"/>
</p:panel>
<p:panel id="infopanel2" visible="#{PageBean.validLink and PageBean.info == null}" header="Error" style="margin-bottom:10px;">
<h:outputText value="An undefined error occured."/>
</p:panel>
There's already a primefaces statusDialog on the page that I can use:
<script type="text/javascript">
function start(){ statusDialog.show(); }
function stop(){ statusDialog.hide(); }
</script>
So, what I want to do is: on keyup event in the input text I want to launch start() function, to display a dialog, only if PageBean.validLink is true (validLink is set in PageBean.validateUrl listener, and it's instantaneous)
And when infopanel or infopanel2 is shown as an ajax action, I want to call the stop() function.
So, how can I do that?
If i understand your question correctly you want to execute javascript function when the ajax action completes? For this you can use the oncomplete attribute on the ajax component:
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener {PageBean.validateUrl}" oncomplete="stop()"/>
If you want to make a callback to execute before an ajax reques begins, you can use the onstart attribute
im trying to call a bean from a javascript, using a h:commandLink.
i have a commandLink
<h:commandLink action="#{bean.go()}"
styleClass="simple-submit-button" id="uLink">
<f:param name="userId" value="#{param['userId']}" />
</h:commandLink>
which calls my bean.
and want to call this commandLink from javascript, like this:
document.getElementById('uLink').click();
but i m always getting the error: document.getElementById('uLink') is null.
I tried this:
setting h:commandLink immediate="false" and instead of document.getElementById('uLink').click() i used document.getElementById('uLink').immediate=true;
usinng h:commandButton instead.
using document.getElementById('formId:uLink').click();
Has anyone an idea how i get this work?
do view source in you browser and look on the exact the id of the button , it might look like someContainerID:uLink or someFormID:uLink and not just uLink so you might need to use
document.getElementById('someFormID:uLink').click();
OR
document.getElementById('someContainerID:uLink').click();
I am reading an xml file using javascript and then I need to submit my form so that it calls a particular method in my JSF handler. Usually this can be done on a jsp when user clicks a button by having an actionlistener like so:
<h:commandLink styleClass="button" action="#{myHandler.outcome}" actionListener="#{myHandler.doNext}">
<span><h:outputText value="#{text.button_submit}" /></span> </h:commandLink>
I am not sure how to call a method like 'doNext' above in the handler from javascript. I cannot do a simple:
document.form.submit();
as it then repeats the processing i have already done. I want to read values from an xml file and then call a particular method in handler. Any ideas much appreciated.
I found a solution to this. I added a hidden button to my jsp like:
<p id="hiddenButton" style="display:none;" >
<h:commandLink id="hiddenRegButton" styleClass="button" action="#{myHandler.doNext}" />
</p>
and in my javascript I used jQuery to execute the click which leads t the "doNext" method in my Handler to get executed.
jQuery('#hiddenRegButton').click();
this was easier than I thought.