Develop Reference

Select2 issue with adding class to Select2 container in WooCommerce instantiated instance

Ok, I have a WordPress/WooCommerce site and I am using Select2 for my select fields, but it seems WooCommerce also uses it for theirs.
I instantiate mine as such:
$('select').not('[multiple]').select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth : true,
});
Then I also want to apply a different border colour to fields that already have a value set, so I added this code:
$('select').each(function(e) {
handleSelectSelection($(this));
});
function handleSelectSelections(select) {
var el = (select.next('.select2').length) ? jQuery(select.data('select2').$container) : select;
if (select.val() !== "" && select.val() !== null) {
el.addClass('has-selection');
} else {
el.removeClass('has-selection');
}
}
Please note that all code outside the function is inside a (function($) { wrapper.
Now, this works fine with the select2 fields my code instantiates, however it doesn't seem to work with the ones WooCommerce instantiates.
I have checked the differences in the select fields and I noticed my ones have a data-select2-id attribute, whilst the WooCommerce ones do not.
I did some console logging with jQuery(select.data('select2').$container) on the WooCommerce ones and it appears quite normal however.
Testing the values returns correct and it even goes inside the section where it attempts to add the class, but it just fails to do so.
Edit: The interesting thing is it works if you bind it to a change event, but not this way.
Any ideas on what is happening here?

How to put cursor to the MathQuill (0.10) field so that one can type to edit right away?

I'm developing a simple plugin for Etherpad to edit formulae using MathQuill. When the toolbar is opened, I'd like the cursor to get into the edit field. The field is mathquillified like this:
var MQ = MathQuill.getInterface(2);
var mathQuillEditor = MQ.MathField(mathQuillField, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
latexEditor.value = mathQuillEditor.latex(); // update LaTeX field
jQuery(latexEditor).change(); // fire updating of CodeCogs
}
}
});
To get cursor in the edit field, I've tried:
mathQuillEditor.moveToRightEnd();
which visually puts the cursor there, but the blue margin (that points that the editor is active) does not appear and typing doesn't make any effect; and
mathQuillEditor.el().focus();
which doesn't make any visual difference. I've also tried to combine those, but still no success. Any ideas how to do this?

Ok, this wasn't documented, the answer is simply
mathQuillEditor.focus();
After I've rised an issue, this was explained and docs now contain this method.

Implementing a hyperlink within a dojo datagrid

This is my first time working with datagrids so please forgive anything that is unclear.
I have json text that is being implemented in a dojo datagrid (dojox.grid.DataGrid).
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xAgent.xsp"});
var layout = [
{cells:[ [
{field:'firstname', name:'First'},
{field:'lastname', name:'Last'},
{field:'policy', name:'Policy'},
{field:'lastaccessed', name:'Last Accessed'}
] ], noscroll:false
}
];
grid = new dojox.grid.DataGrid({
store: jsonStore,
structure: layout,
rowsPerPage: 50,
autoHeight: 50
}, '#{id:gridNode}');
grid.startup();
The grid itself is created perfectly fine and all data is displayed as desired, but I would like for one of the fields (the 'policy' field to be specific) to link towards another page. I need to include the information within the 'policy' field when I redirect as the policy number will be used in the next page.
In other words, I want all of the policy fields within my table to have their own unique external link that will contain the policy number from that respective field. The easiest way I can think of doing that is by changing the layout variable that feeds into the DataGrid's structure parameter, but there might be an easier way. If anyone has any ideas I would be very grateful.
Thanks in advance.

You can use formatter to create links, dojo buttons etc inside the grid.
Formatter is a JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML or even a dijit widget.
So in your case, add a formatter to policy column
{field:'policy', name:'Policy', formatter: createLink},
Then define the function with necessary external link. For example:
function createLink(data){
return (""+data+"");
}
Reference: http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#id3

How to toggle the google-maps autocomplete on and off?

I'm instantiating an autocomplete input for Google Maps API (level 3), like so:
var input = document.getElementById('szukanyAdres');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
How to turn the autocompletion functionality on and off at runtime?

To remove all listeners added to autocomplete.
autocomplete.unbindAll();
To remove all listeners added to input element.
google.maps.event.clearInstanceListeners(input);
See https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429

The solution of Dr.Molle doesn't work for me.
The solution I found is to clearListener and remove pac-container:
var autocomplete;
var autocompleteListener;
function disableGoogleAutocomplete() {
if (autocomplete !== undefined) {
google.maps.event.removeListener(autocompleteListener);
google.maps.event.clearInstanceListeners(autocomplete);
$(".pac-container").remove();
console.log('disable autocomplete to GOOGLE');
}
}
function enableGoogleAutocomplete() {
autocomplete = new google.maps.places.Autocomplete($("#inputDiv input")[0], options);
autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', function() { ... }
console.log('set autocomplete to GOOGLE');
}
Now I can switch on/off google places Autocomplete.

There are two elements related to the autocomplete
the input-element
a div that contains the list-entries. this div will be appended to the body and has the class "pac-container"
So what you can do: show or hide both elements by modifying their display-style.
When it's not possible to hide the input you may replace the input with a clone of the input, this will remove the autocomplete-functionality.
inputObject.parentNode.replaceChild(inputObject.cloneNode(true),input);
To restore the autocomplete do again what you want to do.

If anything written here does not work for you, you can try to just hide it.
The field with places appearing while typing is in css class .pac-container, so just declare it in css display: none. Then it will not appear during typing in searchbox. Actually it is not the way to customize it.

You can try to hide it with JQuery:
$(".pac-container").hide(); //hide autocomplete

I faced the problem as well (in my app I wanted to run the google's autocomplete only when user typed at least 4 digits into my input field - I am using my custom smart search when typed string has less than 4 digits).
In my case above solutions didn't work either, so my workaround is:
Set opacity: 0 to the $('.pac-container') when you need.
Optionally set also low z-index if needed.

Change cursor style depending on sort or not

I'm using the jqGrid and have 3 columns that can NOT be sorted. At this point the cursor changes to a hand when the user hovers over the headers regardless of sorting set to true or false. I'd like that cursor to be something other than a hand (text or pointer) on those column heads. It's confusing to the users this way. Is this something that can be set?
Thanks,
Mark

I find the question very good. So +1 from me.
You are not the first person (and not the last one) who wish to have another cursor on non-sortable columns. It's pity, but jqGrid gives you not classes or some other simple attributes which can be used to find the elements at which one can set CSS "cursor:default".
So I suggest to do this with the following code:
var myGrid = $("#list");
// create the grid
myGrid.jqGrid({
// all jqGrid parameters
});
// fix cursor on non-sortable columns
var cm = myGrid[0].p.colModel;
$.each(myGrid[0].grid.headers, function(index, value) {
var cmi = cm[index], colName = cmi.name;
if(!cmi.sortable && colName!=='rn' && colName!=='cb' && colName!=='subgrid') {
$('div.ui-jqgrid-sortable',value.el).css({cursor:"default"});
}
});
You can see on the demo live that the method work. In the demo the last column 'Notes' is non-sortable.
It would be nice if such behavior would be standard in the next version of jqGrid. I will try to find time and to write suggestion what from the code of jqGrid should be changed to make the behavior out-of-the-box.
UPDATED: The problem with the cursor on non-sortable columns is not exist more in free jqGrid 4.8.

Welcome to SO.
Absolutely. CSS:
th.unsortableclass {
cursor: default;
}
Now apply that class to your column headers that aren't sortable.

Oleg's example worked great but I had a request to always show the arrows if the column was sortable. I know I'm commenting but thought some one might have the same requirement.
So I added this to his loop:
jQuery('span.s-ico',value.el).remove();
Then after his code runs:
jQuery(".s-ico").show();
And then added this to my grid create:
onSortCol:function(index, iCol, sortorder){
// redisplay all arrows
jQuery(".s-ico").show();
}

$("jquery selector to pick only non-sorted columns").css("cursor", "default");