We Keep Coding

How to disable buttons when drag & drop div row has moved in jQuery

Not to sure how to attack the following scenario.
I have a form with a row which is drag and drop-able and this is working perfectly. The issue I have is that I want to disable some buttons when the rows do not match page load and re-enable when they do.
I have the below jQuery code so far:
var $form = $('form'),
origForm = $form.serialize();
// Drag & drop for existing rules
$(function () {
$("#sortableRows").sortable();
$("#sortableRows").disableSelection();
});
// Check to see if form defaults have changed
$('form :input').change(function () {
if ($form.serialize() !== origForm) {
addDisable();
} else {
removeDisable();
}
});
// Added the disabled attribute when form changes
var addDisable = function () {
$("button[name='addButton'], button[name='modifyButton'], button[name='deleteButton'], button[name='activeButton'], button[name='inactiveButton'], input[name='searchDialPlanBox']").attr('disabled', true);
}
// Removes the disabled attribute
var removeDisable = function () {
$("button[name='addButton'], button[name='modifyButton'], button[name='deleteButton'], button[name='activeButton'], button[name='inactiveButton'], input[name='searchDialPlanBox']").removeAttr('disabled');
}
As I said the drag and drop and the disable/enable functions are working fine of everything else e.g. I disable the listed buttons when an input is changed but no sure on on how to do this when the div row is moved.
Got part of it working but stuck on when moving other divs as the first on works fine but other always fall into the Else
Drag & Drop Does Not Disable Buttons As Doesn't Fall Into Correct IF Statement

You can also give callback function like below for sortable
$( ".selector" ).sortable({
change: function( event, ui ) {}
});

Where is the code responsible for drag and drop handling?
For now Ill assume that is done by .sortable(). Then you would have to look into the docs of this function and search for events which are triggered on drag/drop and attach an listener which then calls disable/enable button.
Something like:
/*...*/.sortable({
dragStart: addDisable,
dragEnd: removeDisable
})
If you want to enable/disable depending on certain conditions then of course you have to implement that in the event handler too.

Disable auto focus on drop-down open of select2?

I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:
select2 will not be triggering the native events. select2 will also
not be triggering non-native versions of the events, which is less of
an issue as we still have the option to add the native events without
breaking compatibility.
So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
$(":focus").blur();
}, 50);
});
Is there any possibility that I could achieve that result above? Thanks.

Finally, I managed to find solution which works just fine for me as below:
/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
$('.select2-search input, :focus,input').prop('focus',false).blur();
}
$("select").select2().on("select2-open", hideSelect2Keyboard);
$("select").select2().on("select2-close",function(){
setTimeout(hideSelect2Keyboard, 50);
});
Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.
I hope this will help other who searching for this as me too. Thanks.

I think I've found a solution for select v3 - tested in v3.5.4.
We can use the option shouldFocusInput, which must be a function that should return true or false.
So initialize the plugin with the following code:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
return false;
}
});
});
Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb
If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.
So the complete code should be:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
if (Modernizr.touch) {
return false;
}
return true;
}
});
});

I am not sure why, but the above solutions didn't work for me. But this one worked-
$('select').on('select2:open', function (event) {
$('.select2-search input').prop('focus',false);
});

HTML Event: how to handle "click" and "text selection" event separately in dojo dgrid-row?

I am using dojo dgrid for table representation. I have handled a row click event with grid.on('.dgrid-content .dgrid-row:click', function(){ // Open a Dialog}). But the problem I am facing here is: while user is trying to select any text on the row with a hope to copy, the event eventually ends up opening the dialog.
As per my knowledge, HTML5 has the support of ondrag event, but that is not working in my case. What are the other ways to separate these two events and handle accordingly?
Thanks in advance.

You can distinguish select from click in following way inside of your click handler:
clickHandler: function () {
var collapsed = window.getSelection().isCollapsed;
if (collapsed) {
console.log("Clicked");
//Open dialog
} else {
console.log("Selected");
//Do something else
}
}

You should add set allowTextSelection to true inside your grid. This allows the user select text inside the rows.
Make sure you read the documentation on the topic.

Buttons Re-Enable in CKEditor

I have the following Javascript to disable buttons on CKEditor:
CKEDITOR.replace( 'text', {
on : {
instanceReady : function(ev) {
ev.editor.commands.image.disable();
ev.editor.commands.justifyleft.disable();
}
}
});
This works well to disable the buttons on load, but on click of any other non-disabled buttons, they all re-enable. I tried placing the code in a few other places but had no luck.
Where is the correct place to place the disable code so it won't re-enable?

If you really want to disable buttons, not hide them, then check my answer in - Show but disable wysiwyg buttons.
If you want to remove them completely then check this guide - http://docs.ckeditor.com/#!/guide/dev_toolbar

Override ENTER key handling in CKEditor dialog

I'm adding an autocomplete feature to CKEditor 3.6 dialog textinput box.
The problem is that selecting a value from the list with ENTER key is not possible because it closes the dialog and all the ENTER key events are stopped from bubbling up the dom.
I can see that in _source/plugins/dialog/plugin.js:
// ESC, ENTER
var preventKeyBubblingKeys = { 27 :1, 13 :1 };
var preventKeyBubbling = function( e )
{
if ( e.data.getKeystroke() in preventKeyBubblingKeys )
e.data.stopPropagation();
};
Is there a way to override this behavior without changing the original code?
Any other ideas are also welcome!

Looks like I will have to put all the dialog content in iframe just to work around this.
It would be nice if the list of keys prevented from bubbling was configurable and not hardcoded.

For CKEditor 4, I have solved this problem by disabling OK button while autocomplete is working and enabling it again when input loses focus:
CKEDITOR.dialog.getCurrent().getButton("ok").disable();
CKEDITOR.dialog.getCurrent().getButton("ok").enable();