Disable jQueryUI button and keep its original layout/style - jquery-ui

If I disable jQueryUI button using "disabled" option, button goes dim.
But I don't want it that way - I just want it unresponsive and styled in its original layout - no rollovers, no clicks - everything dead.
Unbinding button click from button doesn't help.
Unbinding all events from button using unbind() just as well.
Any ideas?

In fact, you could just remove the "disabled" classes after disabling the button:
$( "button" ).button();
$( "button" ).button('disable');
$( "button" ).removeClass('ui-button-disabled ui-state-disabled')
Here is a fiddle : http://jsfiddle.net/9gq9n/

Ok, at last I figured it out.
To disable any jQueryUI button, including 'buttonized' checkbox with label attached (while retaining its original layout), you have to do the following:
unbind its events
unbind events from its label(s)
So, here's an example:
$("mybuttons").unbind();
$("mybuttons").getLabels().unbind();
I'm using a plugin I recently wrote (originally by SO member Gijs, but didn't work always...)
jQuery.fn.getLabels = function () {
return this.map(function () {
var parentLabels = $(this).parents('label').get();
var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
return parentLabels.concat(associatedLabels);
});
};
Hope it helps.

Related

JQuery UI: how to stop drag and drop in start

I have the following setup:
$('.my-list').sortable({
handle: '.drag-handle',
start: function(event, ui ) {
//check to see if allow drag and drop
var should_disable = check-code-goes-here ;
if (should_disable) {
//how to disable
}
},
stop: function(event, ui ) {
}
});
When dragging a .drag-handle element, I need to check a condition to see if it is allowed to be dragged and dropped. If yes, go as normal. If not, I would like to disable the whole drag/drop operation. Note that I cannot determine whether a .drag-handle element should be draggable or not at page load, which is why I need to check at the time of each drag/drop operation.
Thanks and regards.
Check this JSFiddle link
http://jsfiddle.net/shuklendu/uacc7/17/
in that example a class 'fixed' added to item which don't want to drag and cancel property set to sortable by
$("#sortable").sortable({
cancel: ".fixed"
});

Jquery-ui tooltip on click

I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.

jQuery UI dialog: clicking on the title bar (including close button) makes the whole dialog scroll up

Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js

jQuery-ui Tooltip get Title on click

I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!

jquery ui drag element without keeping mouse button down (follow the cursor)

I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});

Resources