I'm Using Primefaces 5.0.9 with Wildlfy 8.1 and JSF 2.1.2
I have an autocomplete defined as follows:
<p:autoComplete label="CAT" id="CATEGORY" dropdown="true" value="#{UserDownloadFileBean.editUserFileCategory}"
completeMethod="#{UserDownloadFileBean.categoryAutoComplete}" converter="#{UserDownloadFileCategoryConverter}" forceSelection="true"
var="item" itemLabel="#{item.name}" itemValue="#{item}" required="true" requiredMessage="Please choose a category!" >
<f:ajax event="itemSelect" update=":UploadFileCategoryDialogForm" />
</p:autoComplete>
This works perfectly fine with all browsers EXCEPT Firefox (tested with v32 and v34).
When I select an entry in the suggestions the panel doesn't hide. The only way to close it is to click outside. The firebug Console delivers this error:
ReferenceError: event is not defined
Examining the generated javaScript Code the Problem is obvious:
function(){PrimeFaces.cw("AutoComplete","CATEGORY",{id:"createUserDownloadFileForm:CATEGORY",widgetVar:"CATEGORY",delay:300,deletionDelay:600,forceSelection:true,behaviors:{
itemSelect:function(ext) {mojarra.ab('createUserDownloadFileForm:CATEGORY',event,'itemSelect',0,0,{'CLIENT_BEHAVIOR_RENDERING_MODE':'UNOBSTRUSIVE'})}}});});
The variable event is not existing (i guess other browsers provide it anyways?).
In the Showcase (Pf v5.1.7) the code uses Primefaces.ab and ext instead:
$(function(){PrimeFaces.cw("AutoComplete","widget_j_idt88_event",{id:"j_idt88:event",widgetVar:"widget_j_idt88_event",delay:300,behaviors:{
itemSelect:function(ext) {PrimeFaces.ab({s:'j_idt88:event',e:'itemSelect',p:'j_idt88:event',u:'j_idt88:msgs'},ext);}}});});
Was this fixed some time after 5.0.9 and if so is there a way to gain a working version in 5.0.9?
Otherwise what could i have done wrong that it does not use the same function?
This has been reported as a bug to primefaces, and I posted a patch to their code to fix it. In my case, I had to build a new jar in order to get this to work without converting the hundreds of f:ajax elements everything over to p:ajax.
Related
I am fairly new to Angular and I am developing an Angular web-app which needs to work across IE11, Chrome and mobile.
I have the following HTML:
<input ng-model="myDate" type="date"/>
Which has the desired behaviour on mobile and Chrome. To make it work on IE11 I have imported HTML5 forms via:
<script src="bower_components/html5Forms.js/shared/js/html5Forms.js" data-webforms2-support="date" data-webforms2-force-js-validation="true" data-lang="qq"></script>
For IE11 this at least brings up a calendar, however if I do
console.log($scope.myDate);
it does not pick up the value that the IE calendar had selected, leading me to believe it doesn't work the angular way. If I gave the input element an ID and use document.getElementById I can retrieve the value. For Chrome it does print out the scope value, and can only assume it does for mobile too.
My question is then how do I make the type="date" work across all 3 instances? Am I perhaps using the html5Forms.js module wrong, or is there an alternative?
I am aware of the type="text" solutions out there and then use https://material.angularjs.org/latest/demo/datepicker, but is that really the only solution I have available? I also need to sometimes use datetime inputs, which the angularjs does not have an example of, however type="datetime-local" works as I want it to, except in IE.
I am using version 1.6.6 of Angular.
I have come across a strange issue which seems to be browser related(IE9 and lower vs. IE11), but would like to know why the strange behavior.
Issue Description:I use a spring framework and use its related taglibs to retrieve data on my JSP. There is a variable called index which I retrieve from the form and it used to be retrieved in the following manner.
<html:hidden property="index" name="pdmAcctSuppressForm" />
Value for the above variable namely index was accessed in a javascript using the following code snippet.
var index = document.getElementById("index").value;
The javascript seems to work as expected and retrieves the actual value in all IE browsers until IE9, but seems to fail to work on IE11. document.getElementById("index") returns invalid on IE11.
Solution: The problem has been resolved by changing the above mentioned taglib implementation from
<html:hidden property="index" name="pdmAcctSuppressForm" />
to
<input type="hidden" name="pdmAcctSuppressForm" value="${pdmAcctSuppressForm.index}" id="index"/>
I would like to know what has been changed on IE11 which renders the implementation unusable and also if the solution I have quoted is the right and efficient one.
The javascript seems to work as expected and retrieves the actual value in all IE browsers until IE9, but seems to fail to work on IE11.
...
I would like to know what has been changed on IE11 which renders the implementation unusable and also if the solution I have quoted is the right and efficient one.
You should have had that problem with IE8 as well. Through IE7, IE had a bug: It found elements using getElementById that didn't have the id you asked for, but did have a name that matched. That is, in IE8 and earlier:
<input name="foo">
...would be found by document.getElementById("foo").
This was a bug (although for a while Microsoft called it a feature, and documented it), and it was fixed.
More (on my blog):
...by any other name, would smell as sweet
I am attempting to use the Select2 library in my site to leverage placecomplete (following it's rather simple configuration steps here), but when I run the code I get a strange error -
Error: No select2/compat/query`
I've tried googling it and it really seems like no one else has encountered this?
My code in a nutshell is,
loading the files...
<link href="scripts/Select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="scripts/Select2/dist/js/select2.min.js"></script>
<script src="scripts/jquery.placecomplete.js">//<![CDATA[//]]></script>
Tagging an input element in my body...
<input id="example123" class="example123" type="text" />
In my document.ready function, calling the following code...
$('#example123').placecomplete({});
and thats where it throws the error.
Any ideas where Im going wrong, and what this error means?
You are running into two issues here, both of which can easily be fixed.
Select2 4.0.0 no longer supports the query option in the slimmed down, standard build. This must be included in the full build (select2.full.js) as it is handled through a backwards compatibility module.
You are using Placecomplete and it depends on an older version of Select2. It looks like Select2 3.5.2+ can work, but I can tell from the options that it is using, it cannot work with Select2 4.0.0. There is an open ticket about this for Placecomplete.
For me, changing the <input /> tag to a <select> tag worked.
I've had this when you have two controls on your web page with the same Id - I had a hidden control and a select (the hidden control was first).
This can also happen if you try to initialize select2 on field type that does not "support" select2, like a hidden field or something along those lines.
In IE the dropdown list is coming upward inspite of coming downward when you click on it because of more number of values in it. In mozilla its working fine. Any suggestions? how to bring it downward. Also i am using IE8.
<s:select theme="simple" key="" id="" value="12" list="#{'1':'1','2':'2','3':'3'
,'4':'4','5':'5','6':'6','7':'7','8':'8','9':'9','10':'10','11':'11','12':'12','13':'13','14':'14','15':'15','16':'16','17':'17','18':'18','19':'19','20':'20','21':'21','22':'22','23':'23','24':'24','25':'25','26':'26','27':'27','28':'28','29':'29','30':'30','31':'31','32':'32','33':'33','34':'34','35':'35','36':'36'}"/>
Unfortunately this is something that seems to be handled by the browser explicitly, even after your html/javascript code.
Meaning that if IE detects that's it's a select and has the ability to make it an updrop due to little space, it will.
Alternatively you can use a custom dropdown control which will not actually render as a select, therefor you will have more control on how it works. There are many that can be found on-line using JavaScript/jQuery.
Personally I think it might be too much trouble for such a feature.
I can't get Netbeans to auto-complete my selectors for JQuery, example:
<a id="hello" href="#">Hello</a>
<script type="text/javascript">
$("|").hide();
</script>
As far as i understand the documentation at this point it should show the tags available on the page when i press control+space at the | position, but instead displays no suggestions. Links [1] and [2] shows clearly that this has been implemented. I have not tried prototype, link [2] shows that JQuery support has been added as well.
The auto-complete of functions works perfectly, with the embedded library of JQuery 1.4.2, it is only the selector auto-complete that does not work. Any suggestions?
[1] http://wiki.netbeans.org/JavaScript#Embedded_Completion
[2] http://wiki.netbeans.org/JavaScript#Recently_Added
Product Version: NetBeans IDE 6.8 (Build 200912041610)
Java: 1.6.0_18; Java HotSpot(TM) Client VM 16.0-b13
System: Windows XP version 5.1 running on x86; Cp1252; en_US (nb)
5 years later update:
As of at least version 8.0.2 Netbeans now properly auto-completes jQuery selectors in both php and html pages. I am unsure if this is due to some other changes on the editor engine or they finally caught the discrepancy but either way it works now, yay!
Naor answer made me rethink what I was doing, but it didn't quite answer my question. So let me provide the solution I found in case anyone is interested.
When working with netbeans, the auto-complete function behaves differently between php files and html. In html jquery selectors auto-completes as expected. But when trying to do the same within a php file in an html section of code, it will fail to auto-complete.
Just make sure that if you are expecting this feature to work, that you are using html files, not php. I will submit this as a feature/bug to the netbeans guys, hopefully they can fix it and make html/js auto-completion available to all file types that can include html/js code.
Link 1 says that there is code completion on element ids that appear in the html itself. They also say that it works with Prototype.js. I believe that it would work for jquery too, but don't forget - in order to select an element using it id in jquery you do $('#id') - with #.
What they meant in their example if you have $("f|") is that if you start writing $("f and the cursor of typing is after the f (they put "|" in order to mark the cursor), then code completion should show all relevant elements.
Try that:
in html: <div id="blabla">12345</div>
in jscript: $('bl');
after the bl press control+space, and I believe that it will display to you blabla.