I have below code, There can be a case when user types something there is no auto suggestion available, but still i want the text entered by the user.
My onClick function does gets called, but i want to get the value the user has types.
I have tried below approaches, but none seems to be working.
AutoComplete tag
<p:autoComplete id="cityInput"
value="#{myBean.text}"
style="margin-right:15px;"
completeMethod="#{myBean.fetchData}"
global="false"
forceSelection="true"
maxResults="5">
</p:autoComplete>
Button
<p:commandButton id="searchCity"
value="Search"
icon="ui-icon-search"
onclick="captureSearchText();"
action="#{myBean.search}"/>
Script
<script type="text/javascript">
function captureSearchText(){
alert("88");
//var searchVal = myAutoComplete.input.val();
//var searchVal = document.getElementById("cityInput");
//alert(searchVal.value);
//return true;
}
</script>
Edit Section
When I press ENTER key, I get the searched string in my fetchData, maybe because it is p:commandButton. But on click of button also I want to get the searched text. I hope it is clear now. What can I do to get search text on mouse click of search button. tried invoking JavaScript function.
In the completeMethod #{myBean.fetchData} just return the search string as entered by the user if the real 'searching' does not yield any results.
public List<String> fetchData(String query) {
List<String> results = searchService.search(query);
if (results.isEmpty() {
results.add(query);
}
return results;
}
There is in fact nothing 'jsf' to this, plain java creativity.
But the user still has to select it then unless the autocomplete has an autoselect option. Not sure about this. But you can also store the query string in a variable server side and use that if the user does not select anything (setting the field to required is better then imo)
public List<String> fetchData(String query) {
List<String> results = searchService.search(query);
this.queryString = "";
if (results.isEmpty() {
results.add(query);
this.queryString = query
}
return results;
}
Or move it outside the ifEmpty if you always want to store it
forceSelection="true" was an issue actually, it was forcing a selection.
I have removed it and it ran smoothly.
Answer by #Kukeltje is also good, but that is something a workaround, and forceSelection="true" was actually the root cause.
Related
We are using primefaces 5.1 in the project, in a p:calender after I select a date in the pop up calendar window, the text field will lose focus. The issue caused by this is you can not use tab to focus on next field in the form, it will go to the first element in the form instead. Even the primefaces showcase has this issue:
http://www.primefaces.org/showcase/ui/input/calendar.xhtml
Any suggestion on how to solve it ?
After some search and local testing while waiting for the answer. I comes out a way to fix this.
It is actually a JQuery UI bug (or may be not as it been there since the first version and still got no official fix!). We need to override the jQueryUI datepicker used by primefaces. Make sure to put the import for that custom script in the last facet so it will be pick up as a resource in the last order.
<f:facet name="last">
<h:outputScript name="default/js/customDatePicker.js" />
</f:facet>
Inside the JavaScript code I do the following to merge the _selectDate into datepicker(the change is in the last else) which will over ride the orginal _selectDate without changing the others. It will do the trick for me on Chrome and IE11.
$(document).ready(function () {
$.extend(jQuery.datepicker, {
_selectDate: function (id, dateStr) {
var onSelect,
target = $(id),
inst = this._getInst(target[0]);
dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
if (inst.input) {
inst.input.val(dateStr);
}
this._updateAlternate(inst);
onSelect = this._get(inst, "onSelect");
if (onSelect) {
onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback
} else if (inst.input) {
inst.input.trigger("change"); // fire the change event
}
if (inst.inline) {
this._updateDatepicker(inst);
} else {
this._hideDatepicker();
inst.input.focus();
}
}
});
});
i have drag panel and drop panel, and when component is dropped in the drop panel i show a new panel and hide the old panel based on render boolean attribute as follows:
1- xhtml:
<p:outputPanel id="oldPanel" rendered=#{myBean.old_panel_rendered}> .... </p:outputPanel>
<p:outputPanel id="newPanel" rendered=#{myBean.new_panel_rendered}> .... </p:outputPanel>
2- bean:
old_panel_rendered=true;
new_panel_rendered=false;
public void onComponentDrop(DragDropEvent ddEvent) {
old_panel_rendered=false;
new_panel_rendered=true;
}
how to execute an effect for newPanel when it gets rendered and execute an effect for oldPanel when it gets unrendered.
please advise, thanks.
Call js function which will apply the effects when a new item droppped:
<p:ajax listener="#{bean.onDrop}" onstart="applyEffects();" update="newPanel" />
Function is:
function applyEffects() {
var oldPanel = $(document.getElementById('oldPanel'));
var newPanel = $(document.getElementById('newPanel'));
oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
newPanel.css({"display":"inline"});
newPanel.effect("highlight",
{color:"#87FF7A"}, 1500);
}
Don't forget to give exact client id of components when calling document.getElementById. You can detect it via your browser's developer settings. If there will be a problem, you can drop update="newPanel" or maybe you can try update="oldpanel newpanel".
To be able to apply it for specific panel:
public void onComponentDrop(DragDropEvent ddEvent) {
int id = event.getData();//or sth.similar to getId
RequestContext.getCurrentInstance().addCallbackParam("index", id);
}
Upper code adds a parameter to ajax response it can be retrieved by:
function applyEffects(xhr,status,args) {
var oldPanel = $(document.getElementById('oldPanel'));
var newPanel = $(document.getElementById('newPanel'));
if(args.id=='oldPanel') {//oldPanel or whatever which equals to eventID
oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
}
newPanel.css({"display":"inline"});
newPanel.effect("highlight",
{color:"#87FF7A"}, 1500);
}
You should call this from p:ajax oncomplete="applyEffects(xhr,status,args);". I am coding directly here, therefore can be few mistakes which can be seen on IDE easily.
I call a javascript function that makes a click on a hidden commandButton but the click run when the page loads, not when I call the function.
this is the html code :
<p:inputText id="aa" value="#{bonBonneManagedBean.sel}" onkeyup="fnc()" />
<h:commandButton id="hh" onclick="#{bonBonneManagedBean.kk()}" style="display:none"/>
and the javaScript function :
function fnc()
{
length = document.getElementById('form:aa').value.length;
if(length == 10)
{
$("#hh").click();
document.getElementById('form:aa').value = "";
}
}
You should use the action attribute instead of onclick like this
<h:commandButton id="hh" action="#{bonBonneManagedBean.kk()}" style="display:none"/>
Note that you might have to add form prefix to the selector, like this
$("#myFormId\\:hh").click();
The same would work for a commandLink or any other 'clickable' component.
Must there be a button on this page(which I doubt, seeing as you're hiding it anyways)? You're better served using something like <p:remoteCommand/> here
Ditch the hidden button and replace with
<p:remoteCommand name="fnc" actionListener="#{bonBonneManagedBean.kk}"/>
But, if it's an absolute requirement, you can very easily emulate a button click in js with the click() method from your function you need to
Change the <h:commandButton/> to a <p:commandButton/> so you can assign the button a widgetVar attribute(to guarantee the name of the element in the DOM). The widgtetVar attribute can be set on almost all primefaces components to make your life easier
Using the widgetVar, just call the click() method in your function
<p:commandButton ajax="false" widgetVar="theButton" id="hh" action="#{bonBonneManagedBean.kk()}" style="display:none"/>
<p:inputText id="aa" widgetVar="theTextBox" value="#{bonBonneManagedBean.sel}" onkeyup="fnc()" />
and in the function:
function fnc(){
length = theTextBox.value.length;
if(length == 10){
theButton.click()
theTextBox.value = "";
}
}
If the top answers from Daniel and Kolossus doesn't help out someone: I found that characters got put in front of the id I set in my case, therefore this helped me:
$('[id$=hh]').click();
Basically the selector is saying the id ends with 'hh' but may not be the full id.
This is also helpful in SF development as the same thing happens with comandButtons, etc.
I have an autocomplete event that fires correctly once a value is selected. I want another event to fire once I erase the value in the textbox and reset the value to null. I was thinking of using the onChange attribute but I was having issues so I reverted back to my original code.
<p:autoComplete id="deviceAuto" dropdown="true" scrollHeight="250"
value="#{summaryReportController.device.nickname}"
forceSelection="true"
completeMethod="#{summaryReportController.deviceComplete}">
<p:ajax event="itemSelect"
listener="#{summaryReportController.handleDeviceSelect}"
update="printThis" />
</p:autoComplete>
public void handleDeviceSelect(SelectEvent event) {
String deviceSelect = event.getComponent().getId();
if (deviceSelect.equalsIgnoreCase("deviceAuto")) {
Device selectedDevice = deviceMgr.getDevicebyNickname(device.getNickname());
setDevice(selectedDevice);
}
updateInterface();
}
When you modify the text content of the AutoComplete textfield, the search method (aka. completeMethod) will be called on the backing bean. You can reset the value to null there if you get an empty string.
Backing Bean
// insert getter and setter for the device property ...
/** Search for devices by name */
public List<String> deviceComplete(String search) {
if (StringUtils.isBlank(search)) {
setDevice(null); // textfield was cleared, reset device value!
return Collections.emptyList();
} else {
// search for devices ...
return deviceNames;
}
}
Note that I used Apache Commons StringUtils.isBlank(String) to check if the string was null or did only contain whitespace characters.
JSF View
In your XHTML file you probably want to listen to any Ajax event to update your view -- or you figure out the event you need (blur, change, whatever) yourself:
<p:autoComplete ...>
<p:ajax event="itemSelect" listener="..." update="..." />
<p:ajax process="#this" update="..." />
</p:autocomplete>
I hope this helps.
An alternative could be something like a "clear" or "reset" button next to the search textfield to make it clear to the user that the value will be cleared.
The default autoComplete minQueryLength attribute equals 1 and your search string will be updated when you deleting it until it has lenght of 1 character.
E.g.:
You entering 'foo' - and this string is provided to search method (updating after entering first character - minQueryLength = 1)
But when you delete search string - it is also updated until it will have length of 1.
Solution:
set attribute minQueryLength="0"
Or:
if you need bigger value add to your autoCompleteMethod(String search) condition:
if (search.length()<={your minQueryLength attribute} ) field = null;
Old question, but I think it worths another view.
The problem with minQueryLenth = 0 or minQueryLenth = 1 is that it can return hundreds of options (and for sure the user won't read all of them to choose one). My solution was as follows.
First of all I need the input to be sent to the server as soon as the user select one of its values (in my use case the user is not allowed to go to next step in a wizard if this value is null or empty). So I put an ajax function triggered in the event of a selected value.
xhtml:
<p:autoComplete
id="someId"
value="#{myViewScopedBean.selectedValue}"
...
...
minQueryLenth="5"
onblur="autoCompleteLostFocus('someId', 'someCommand()')">
<p:ajax
event="itemSelect"
listener="#{myViewScopedBean.newValueSelected}"
process="#this"
update="commandButtonGoToNextStep" />
</p:autoComplete>
<p:remoteCommand
name="someCommand"
actionListener="#{myViewScopedBean.setValueNull}"
update="commandButtonGoToNextStep" />
<p:commandButton
id="commandButtonGoToNextStep"
...
...
disabled="#{myViewScopedBean.selectedValue == null}" />
If the user clean the text, I need to send that value to "myViewScopedBean" and update the component that allows the user to go to the next step. I solved that putting a javascript function that is called when the autocomplete lose focus.
javascript:
function autoCompleteLostFocus(autocompleteId, comand) {
if ($("[id='" + autocompleteId + "_input']").val().trim() == "") {
eval(comando);
}
}
in myViewScopedBean:
public void setValueNull() {
selectedValue = null;
}
I hope it helps. A lot of work, but the behaviour is exactly what I wanted. The reason for the javascript function is that it just send information to the servlet if the value is equals to "", otherwise it does nothing.
From a completely different angle...
Why do you have summaryReportController.device.nickname as a value in autoComplete?
I'd suggest you to use device as a value and specify
var
itemLabel
itemValue
converter
in your autocomplete, while your completeMethod will return list of devices filtered by nickname. Converter is implementation of javax.faces.convert.Converter.
See the POJO case in PF Showcase.
I've seen a lot of questions about this already, but I'm stumped! Please help!
I have a customvalidator. It's firing but it's not preventing postback. Please help me in doing so! I can see that console.log registers before the post. But, it posts back anyway. How do I prevent the postback?
I've tried adding a control to validate, and validate empty text equal to true. I also tried adding e.preventdefault, which did not work :(
How can I prevent the postback?
<script type="text/javascript">
//<![CDATA[
function validateWhyUnlikely(source, args) {
console.log(1);
args.isValid = false;
}
//]]>
<asp:TextBox ID="txtWhyUnlikely" runat="server" Rows="4" cols="20"
CssClass="surveyTextArea" />
<asp:CustomValidator runat="server" ID="cfvWhyUnlikley" ErrorMessage="Please provide a reason since you rated an item as unlikely to provide."
CssClass="surveyError surveySmallIndent" Display="Dynamic"
ClientValidationFunction="validateWhyUnlikely" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="smallSpecial" OnClick="btnSubmit_Click" />
jQuery(document).ready(function () {
jQuery('#<%= btnSubmit.ClientID %>').click(function (e) {
if (Page.IsValid == false) {
console.log(false);
e.preventDefault();
return false;
}
});
});
Everything looks ok althought I am not sure why you are attaching the Click function to your submit button. I would remove that and test it as it maybe be overriding the default behavior.
Also I think you need to capitalize the IsValid property:
args.IsValid = false;
I too faced this issue, I was trying to add a custom validator to a dropdownlist which had a selectedIndexChange event attached to it. After i gave incorrect value for dropdown, i was able to se ethe error message i gave in Custom Validator but immediately after it Postback was happening.
However on adding this property CausesValidation="true" to the dropdownlist control resolved my issue.
Postback wasn't happening on incorrect value after adding this property to my dropdown.
If it helps other people, I had a Validation group that I forgot to add the button to.
Make sure to add the button, the textbox and the validator to the same validation group for the postback to be prevented.
I experienced this problem as well.
What I did was, in the C# procedure that was called by the button, at the top I added
if (IsValid == false)
return;
I could not stop it performing the postback so this seemed to me like the only solution.
You are misssing ControlToValidate="txtWhyUnlikely"
Posting this as it might help someone that is getting the same weird behavior.
Initially I had the same issue as this post title. I checked all the suggestions here but my code seemed to be fine.
To fix this I replaced my cause validation control <asp:Button.. with a <button.. . Not sure why this is happening but happy it's working now.
hth
<button tags are missing the correct javascript code to validate.
<asp:Button does have the correct javascript rendered.
I've added this to any button tags:
btn.Attributes("onclick") = StringFmt("if(!Page_ClientValidate(''))return false;")
and that solved the post-back issue. No post-back occurs if the client-side detects an issue.
I solved this problem by creating a variable:
Boolean fieldIsValid = true;
and at the custom validating expression I would change the value if arguments weren't true:
if(args.IsValid == false)
{
fieldIsValid = false;
}
else
{
fieldIsValid = true;
}
Then, I also put that in the submit click method:
protected void submit_Click(object sender, EventArgs e)
{
if (fieldIsValid)
{
//submit my things
}
}