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.
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 have a problem. I'm running a postback event onchange in web form control using postback.
<asp:DropDownList OnSelectedIndexChanged="UpdateCollection" AutoPostBack="true" ID="BookCategorySelection"/>
The asp generates something like
<select id="..." onchange="javascript(__DoPostBack(...)); ">
and I would like to add something after the postback
<select id="..." onchange="javascript(__DoPostBack(...)); MyFunction();">
I need to add a call in javascript to refresh some calculations that are done in js after this postback is done. Anyone has any idea? I tried adding it in backend in OnPrerender method of control, but still it's added before the javascript generated callback. I tried also in jQuery but no help.
The solution may be to use pageLoad
function pageLoad(){ }
it will be called on each postback
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 :-)
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 have a situation where I have a form with multiple submit buttons and I want to update a remote frame. I've tried using a g:formremote with 2 g:actionsubmit buttons (which support javascript) but the multiple submit buttons have a glitch (described here: http://www.grails.org/Ajax under "Multiple buttons with formRemote").
I took the workaround, using 2 g:submittoremote buttons, which work the way I expect, but doesn't accept the javascript parameters like onClick (the buttons in question are accept/reject and I want to put an AYS on the reject so it isn't used accidentally).
Is there a way for javascript and multiple submit buttons in a remote form to exist peacefully?
Thanks in advance for your help...
Did you try the before parameter? It takes a JavaScript function, which will be executed before the remote function call. Just use it like this:
<g:submitToRemote value="Reject" update="feedback"
controller="test" action="reject"
before="if (!confirm('sure?')) {return false;}" />
Whatever JavaScript you put in the before parameter will be inserted into the onclick attribute right before your Ajax updater call. This way you can easily do validation, get confirmations etc. and even break from onclick handling before submitting the Ajax call. There is a similar after parameter.
Okay, I'm not saying this is beautiful, but I just messed around with this for a few minutes and have something that might work for you. Like I said... not the prettiest solution, but workarounds rarely are...
<html>
<head>
<g:javascript library="prototype" />
</head>
<body>
<script type="text/JavaScript">
function setReject()
{
document.getElementById('reject').value='true'
}
</script>
<g:formRemote name="test" update="updater" url="[ controller: 'date', action: 'test']" >
<g:hiddenField name="reject" value="false" />
<g:submitButton name="submit" value="something" onclick="setReject();return confirm('Are you sure???')" />
<g:submitToRemote update="updater" action="otherTest" controller="date" value="Go Ahead"/>
</g:formRemote>
<div id="updater">
</div>
</body>
</html>