We Keep Coding

Semantic UI dropdown values cannot be accessed

This is an issue related to Semantic UI's dropdowns at https://semantic-ui.com/modules/dropdown.html.
I have a bunch of multiselect dropdowns defined and have declared the line
$('.ui.dropdown')
.dropdown()
;
well before doing any sort of operations with the dropdowns, in order to activate the dropdowns' behavior. Curiously, however,
when I try using certain methods on the dropdown, such as $("#" + mydropdown.id).dropdown("get text"), I get an error in the Chrome Dev Tools, saying "Uncaught TypeError: No method named "get text".
But when I try to simply use $("#" + mydropdown.id).dropdown(), it works: I am able to access the dropdown element without any issue whatsoever.
What could be the cause? I am absolutely clueless as to why this could be happening. Any hypotheses as to what could be happening are appreciated.

Huh, the problem above was solved by commenting out a line of code that referenced bootstrap.in.js. I've heard that Bootstrap could interfere with Semantic UI, and I disabled Bootstrap.js in another application, but for some reason I forgot to do so within the current app.

How To Get Two JS/Jquery Plugins to Work Together?

I've posted here before but can't find my account so this is my new first post.
I'm attempting to use a js plugin called "blueberry slider" with a responsive js menu called "Menumaker" and something is conflicting, can't get the slider to show. I really don't know what I'm doing with JS yet, hoping someone can help. In Chrome, element inspection, it's saying "undefined is not a function". I haven't modified anything of the plugins.

I think your problem is probably that you're loading a version of jquery, adding a plugin to it, and then loading a new version of jquery and attempting to add a plugin to that, too. Pick a single version of jquery to include. You're including three:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
at the top,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
just above your blueberry script, and
<script src="js/jquery-1.8.3.min.js"></script>
at the bottom just above your menumaker script.
The latest version of jQuery loads and overwrites your blueberry script's modified version of jQuery.
I suggest you just get rid of the last two and use the first version.

the function which you are calling and function present in your plugin library doesn't match , which is the reason it doesn't find any function named "undefined" in that library. Try checking the function name in it's documentation.

Primefaces Autocomplete in Firefox not closing on Selection

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.

Primefaces - Datatable Widget for var ... not available

I am using primefaces 4.0 and jsf 2.2 in my Application. I have created a page where a datatable is nested in a tabview. Now when I want to filter the datatable, it keeps loading and doesn't how a result.
After some time i recognized, that javascript throws the following error: "Widget for var 'test' not available! ".
I guess this should be the issue, but what's the problem or how can i solve this? Does anyone have an idea?
Best Regards!

I am posting my answer here hopefully can help some people out there.
I have the same problem. My case is I want to perform the default filter for my <p:dataTable>, thus, I have to perform the PF('dtWidgetVar').filter(); script in javascript when page load.
This is my initial attemp:
$(document).ready(function()
{
PF('dtWidgetVar').filter();
});
It looks perfectly fine, but just doesn't work. Until I find the error in Chrome console Widget for var 'dtWidgetVar' not available!, and googling it for hours, finally I found this thread. Therefore I add a $(function(){}); to wrap my script as below:
$(document).ready(function()
{
$(function()
{
PF('dtWidgetVar').filter();
});
});
BOOM!, finally it works. From here as well as here both stating that the $(function(){}); and $(document).ready(function(){}); are actually the same, so I have also no clue why it works. I have also try to only use $(function(){}); but it doesn't work. Have to use both functions to make it works, at least in my case. But still, I hope this helps some humans! Sorry for my bad English.

In the absence of posted code it's impossible to say. However, there are a couple of things I can suggest to look for.
Check to see if you have a duplicate widget name in your view.
Obviously you wouldn't intuit that from the message you got, but I
recall in the past getting this same message for duplicate widget
names
Check to see if you have a component where you've given the widget var the same name as the ID. I've read that this is to be avoided.
A very common error is to conflate ids and widget names. That
is, you are trying to use an ID as a widget var
See what in your code is trying to reference "test"
I can't confirm this myself, but I've seen other StackOverflow posts that suggest this is a possible error when you have imported two copies of the jQuery library

I've experienced Widget for var '[widgetVar]' not available when using p:ajax update="#all" inside a p:commandButton. I could avoid the issue by putting content to be updated in a h:panelGroup which I referenced in update and put the element declaring widgetVar outside that panel group.

Netbeans JQuery Selector auto-complete

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.