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>
Related
I am trying to hide my content by clicking the button. But when the page is loading, content is hiding but after finishing page load content is showed. This content doesn't hide. I am using Visual Studio 2017 community and asp.net/vb.net framework. But the same JQuery code is working on my text editor and my browser.
Here is my sample code:
<p id="justp" class="testcls">Hi Hide me!</p>
<asp:Button ID="testbtn" runat="server" Text="hide me" />
<script>
$(function () {
$('#testbtn').click(function () {
$('.testcls').hide();
});
});
</script>
I am try to passing alert inside hide() and it is run successfully :
$('.testcls').hide(alert("Hello"));
What is the problem?
How can I solve this?
In case your are just using this button to hide/show your content on the client side (no server side calculation or something like that) use a normal input / button tag:
Replace this:
<asp:Button ID="testbtn" runat="server" Text="hide me" />
With this line:
<button type="button" id="testbtn">Hide me!</button>
As mentioned above this solution will only work if you don't need to submit any data.
What is the problem?
The button submits your form after the click so the page will be refreshed and the view will return to the default status.
How can I solve this?
You've several ways to change this behavior :
if you have got a control on the asp code you could remove the runat="server" to prevent the button from submitting :
<asp:Button ID="testbtn" Text="hide me" />
You could simply add the return false; statement at the end of the event.
Another way is preventing the default behavior using preventDefault() like :
$('#testbtn').click(function (e) {
e.preventDefault();
$('.testcls').hide();
});
The one that I recommend to you is using UseSubmitBehavior:
<asp:Button ID="testbtn" runat="server" UseSubmitBehavior="false" Text="hide me" />
Last choice is using the plain HTML code like :
<button type="button" id="testbtn">Hide me!</button>
I got this code here:
It works fine as far as disabling and replacing the Submit button goes, but it will not submit the form. My form uses the 'get' method and submits data to another page.
<script type="text/JavaScript">
$('.button').click(function() {
$('.button').remove();
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('.form').submit();
});
</script>
I have tried most things, including changing .form to the id of my form, still no joy, any ideas would be helpful.
HTML code
<form action="liftingConfirm.asp" method="get" id="frmArchiveConfirm">
<input name="con_id" type="hidden" id="con_id" value="<%=request.querystring("con_id")%>" />
<input name="sub_id" type="hidden" id="sub_id" value="1" />
<input name="liftingDate" type="hidden" id="liftingDate" value="<%=Session("currentUSDate")%>" />
<div class="holder"><input name="btnConfirm" type="submit" class="button" id="btnConfirm" value="Start New Lifting Gear Examination" /></div>
You're using the wrong selector, the .form is looking for a <form> with a class of form. Furthermore you should be using the on() syntax:
$('form').on('click', '.button', function() {
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('#frmArchiveConfirm').submit();
$('.button').remove();
});
For your jQuery code to work you should include the frmArchiveConfirm to your jQuery code as below.
Replace $('.form').submit(); with $('#frmArchiveConfirm').submit();
else if you only having one form in the page just use $('form').submit();
When you come across bug like this don't forget to make use of the firebug or the browser development tools. You can easily figure out the bug and what's wrong in your code.
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 :-)
Is it possible to execute a JavaScript action like bar.show() of PrimeFaces notification bar and a managed bean action like #{managedBean.foo} with one button click of a JSF component?
check vdl of primefaces commandButton: http://www.primefaces.org/docs/vdl/3.4/primefaces-p/commandButton.html
use action or actionListener for bean and for example onclick for clientside javascript callback
edit (added example):
<h:form id="formId">
<p:commandButton value="Button" update="formId" id="ajax"
actionListener="#{myBean.serverSideBeanMethod}" onclick="clientSideJavaScriptFunction()" />
</h:form>
I have written a js method which runs perfectly on FF.
This js method is called on the click of a radio button.
In IE, when I click the radio button, the js method is called only when I click somewhere on the form. I have no idea about this strange behavious in IE.
Any ideas?
Thx
Here is my code.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
HTML CODE:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onchange="javascript:checkPid();">
<f:selectItem itemLabel="label1" itemValue="value1"/>
<f:selectItem itemLabel="label2" itemValue="value2" />
<f:selectItem itemLabel="label3" itemValue="value3" />
</h:selectOneRadio>
JAVASCRIPT:
<script language="javascript" type="text/javascript">
function checkPid() {
//some basic js here
//even if I just give an one-liner alert stmt here, In IE it
//shows up only when I click somewhere on the form after I click
//on the radio button
}
Thanks in advance!
Try the onclick event rather than the onchange event.
You'll need to modify your code though:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onclick="checkPid(this);">
And your javascript function:
function checkPid(e) {
//do stuff with e.value
}
You should be able to validate what the user clicked on by e.value. This should work for both browsers.