Develop Reference

Determining if a jquery plugin has been initialized

I'm using two different jquery plugins. selectpicker and prettyCheckable
neither return anything when I initialize them, so how can I determin if they are initialized so I don't re initialize them?
They get called like this
$("#StartTime").selectpicker();
$("input.terms").prettyCheckable();
I guess I could set a flag like this and check it very time I want to view the page and initialize the data in that page , but I don't know if that's the best way.
if (scope.isTermsInitialized === false) {
$("input.terms").prettyCheckable();
scope.isTermsInitialized = true;
}

For the picker you can check the value of the get function. I didn't see any methods for prettycheckable that would be of any use. You could add some checks with the customClass method, but at that point you might as well set a variable.
http://picker.adam-uhlir.me/
http://arthurgouveia.com/prettyCheckable/

Toggling multiple checkboxes

I can't seem to get jquery to toggle multiple checkboxes. I want to grab all the checkboxes on the page with a certain name and toggle them. Here is what I am currently trying but it just generates the error below and I am not sure why. What am I missing here?
$("input[name=recurringGridCheckbox]").prop("checked", !(this.prop("checked")));
Object doesn't support property or method 'prop'

There's a syntax error in rhe variable you use in the setter; this refers to the DOMElement, not the jQuery object and so does not have the prop() method available.
To fix this you can provide a function to the prop() method which will update the property based on its current state. Try this:
$("input[name=recurringGridCheckbox]").prop("checked", function(i, checked) {
return !checked;
});

.prop is a jquery method, so you must use it with a jquery object:
$("input[name='recurringGridCheckbox']").prop("checked", !$(this).prop("checked") );
Also, in specific cases the attribute value needs to be enclosed in quotes, so it may be good practice to always do that.

Selected value not being set via jQuery / CoffeeScript

if addr.types[0] is "country"
console.log addr.long_name.trim().toUpperCase()
$("#user_country_id").each ->
console.log $(this).text().trim() if $(this).text().trim().toUpperCase() is addr.long_name.trim().toUpperCase()
$(this).attr "selected", "selected" if $(this).text().trim().toUpperCase() is addr.long_name.trim().toUpperCase()
return
The code goes through a Google Places object and checks if the address component is "country", then what I want to do is update the Country select box if the TEXT matches what's returned by Google.
It's not working - just console logging the addr.long_name works and just logging the $(this).text() works (I get the whole list of countries of course...) and as far as I can tell they match.
This is the current state of the code. I've clearly tried trim() and toUpperCase() thinking perhaps there is some sort of mismatch there - but nothing has changed.
This is written in CoffeeScript, we're just accessing some of our elements with our typical jQuery accessors.
Any idea what I'm doing wrong?

I believe you want to use .prop instead of .attr. For instance, selected is a property of a select box, not an attribute. So it is semantically correct, and behaves better as well.

How can I resolve getActiveObject() and getActiveGroup() in new version of fabricJS?

I have been using fabricjs since version 1.1.9 and created quite a big application. Now i'm trying to use the newer version 1.4.0, and have found out there are many changes. It was possible to use getActiveObject() to select single object and also to select multiple group object, but now it is throwing error on group object while i am trying to get some property of selected group (like strokeWidth), the error is "Uncaught TypeError: Cannot read property 'strokeWidth' of null". But if i use getActiveGroup() for group object, there is no error. The fact is if this is the problem, i have to recreate my whole project. Is it possible to resolve my situation with some minor fix? Where can i find the change log for version 1.4.0?

maybe this is could be a solution for you.
getActiveObject() returns null if a group is selected and if a object is selected getAtctiveGroup() returns null as well. Just create a function that returns whatever is selected on the canvas.
function getSelection(){
return canvas.getActiveObject() == null ? canvas.getActiveGroup() : canvas.getActiveObject()
}
If you now replace all getActiveObject() with getSelection() calls in your code this should solve your problem. Hope this helps.

You can use canvas.getActiveObjects() which will return all selected objects.
canvas.getActiveObjects().forEach((object) => {
// do something with object
})

Rendering suggested values from an ext Combobox to an element in the DOM

I have an ext combobox which uses a store to suggest values to a user as they type.
An example of which can be found here: combobox example
Is there a way of making it so the suggested text list is rendered to an element in the DOM. Please note I do not mean the "applyTo" config option, as this would render the whole control, including the textbox to the DOM element.

You can use plugin for this, since you can call or even override private methods from within the plugin:
var suggested_text_plugin = {
init: function(o) {
o.onTypeAhead = function() {
// Original code from the sources goes here:
if(this.store.getCount() > 0){
var r = this.store.getAt(0);
var newValue = r.data[this.displayField];
var len = newValue.length;
var selStart = this.getRawValue().length;
if(selStart != len){
this.setRawValue(newValue);
this.selectText(selStart, newValue.length);
}
}
// Your code to display newValue in DOM
......myDom.getEl().update(newValue);
};
}
};
// in combobox code:
var cb = new Ext.form.ComboBox({
....
plugins: suggested_text_plugin,
....
});
I think it's even possible to create a whole chain of methods, calling original method before or after yours, but I haven't tried this yet.
Also, please don't push me hard for using non-standard plugin definition and invocation methodics (undocumented). It's just my way of seeing things.
EDIT:
I think the method chain could be implemented something like that (untested):
....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....
o.onTypeAhead = function() {
// Call original
this.origTypeAhead();
// Display value into your DOM element
...myDom....
};

#qui
Another thing to consider is that initList is not part of the API. That method could disappear or the behavior could change significantly in future releases of Ext. If you never plan on upgrading, then you don't need to worry.

So clarify, you want the selected text to render somewhere besides directly below the text input. Correct?
ComboBox is just a composite of Ext.DataView, a text input, and an optional trigger button. There isn't an official option for what you want and hacking it to make it do what you want would be really painful. So, the easiest course of action (other than finding and using some other library with a component that does exactly what you want) is to build your own with the components above:
Create a text box. You can use an Ext.form.TextField if you want, and observe the keyup event.
Create a DataView bound to your store, rendering to whatever DOM element you want. Depending on what you want, listen to the 'selectionchange' event and take whatever action you need to in response to the selection. e.g., setValue on an Ext.form.Hidden (or plain HTML input type="hidden" element).
In your keyup event listener, call the store's filter method (see doc), passing the field name and the value from the text field. e.g., store.filter('name',new RegEx(value+'.*'))
It's a little more work, but it's a lot shorter than writing your own component from scratch or hacking the ComboBox to behave like you want.

#Thevs
I think you were on the right track.
What I did was override the initList method of Combobox.
Ext.override(Ext.form.ComboBox, {
initList : function(){
If you look at the code you can see the bit where it renders the list of suggestions to a dataview. So just set the apply to the dom element you want:
this.view = new Ext.DataView({
//applyTo: this.innerList,
applyTo: "contentbox",

#qui
Ok. I thought you want an extra DOM field (in addition to existing combo field).
But your solution would override a method in the ComboBox class, isn't it? That would lead to all your combo-boxes would render to the same DOM. Using a plugin would override only one particular instance.