We Keep Coding

Jquery Ui AutoComplete is not working with keyup/down when used with label value

When using keyup keydown to select option from autocomplete list textbox is showing value. But incase of selection from mouse it is working properly.
JsFiddle - http://jsfiddle.net/0c21r1pe/1
$("#promoteActionTextBox").autocomplete({
source: actionNames,
minLength: 0,
select: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$('#promoteActionError').hide();
$(this).attr('actionId', ui.item.value);
},
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
}
else {
$('#promoteActionError').hide();
$(this).val(ui.item.label);
$(this).attr('actionId', ui.item.value);
}
}
}).focus(function (event, ui) {
event.preventDefault();
$('#promoteActionTextBox').autocomplete("search");
this.value = ui.item.label;
});

change the object property name from value to something else and it works
WORKING DEMO
UPDATE
How about THIS FIDDLE
I added a code which removes the event which is responsible for that effect.
create:function(){
$('.ui-autocomplete').unbind('menufocus');
}

select: function(event, ui) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
},
focus: function( event, ui ) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
}

Sortable not working in Firefox but every other browser

I'm using this example (http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/) in my asp.net application. I have the sortable working in every browser other than Firefox, for some reason it triggers the event but never go into the code.
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
start: function (event, ui) {
//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
if ($.browser.mozilla || $.browser.safari)
$(ui.item).find('.dragbox-content').toggle();
},
stop: function (event, ui) {
ui.item.css({ 'top': '0', 'left': '0' }); //Opera fix
updateWidgetData();
}
})
.disableSelection();
});

If I recall correctly, Firefox doesn't accept functions with the wrong number of parameters as event functions. This is according to the standard so you should comply. Try this:
start: function (event) {
The ui parameter cannot follow the event to the function.

Here is code for using jQuery sortable for all Chrome & Firefox:
You must delete the line $(#sortable).disableSelection(); in jQuery Sortable code. (ref: Sortable | jQuery UI)
<script>
$(function () {
$("#sortable").sortable({
placeholder: "ui-state-highlight"
});
});
</script>
Hope it helps ;)

i have done
$("#stores-container").sortable({
stop: function(event, ui) {
textareaID = $(ui.item).find(' textarea').attr('id');
textareaVal=$(ui.item).find(' textarea').val();
editorID=$(ui.item).find('.mce-container').attr('id');
$( "#"+editorID ).remove();
$('#'+textareaID).show();
tinymce.init({selector: '#'+textareaID});
}
});

Jquery Autocomplete key press down display label name rather than value?

Is there a way you can force jQueryUI autocomplete to display data label rather than data value:
For example
[{"label":"name","value":"1"},{"label":"name3","value":"6"},{"label":"name1","value":"8"},{"label":"name2","value":"10"}]
$( ".auto-search" ).autocomplete({
minLength: 2,
dataType: 'json',
source: tempJson,
focus: function(event, ui){
$('input[name="user-name"]').val(ui.item.label);
},
select: function (event,ui){
$('input[name="user-name"]').val(ui.item.label);
$('input[name="user-id"]').val(ui.item.value);
return false;
}
})
The above code, when you press the down button, displays the value rather than the label. Can it be changed to show the label?

Make sure to return false or prevent the default action of the event from your focus event handler:
focus: function(event, ui){
event.preventDefault();
$('input[name="user-name"]').val(ui.item.label);
},

The callback function is not working on me. so i used a bind event autocompletefocus and worked just fine.
$('input[name="user-name"]').on("autocompletefocus", function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
});

How to do something in jquery droppable event

Hi all sorry if its a silly question.But I am new to javascript.
I have a div on which is draggable.Now I want to do some thing when that div is dropped
So far I have write a simple alert but its not working.
Can any one guide me how do I write some code in drop event.
Here is my code
<div id = "par" class = "ui-draggable" style="position: relative; height: 200px; width: 200px;outline:2px solid green">
</div>
<script>
$('#par').draggable();
$('#par').droppable({
drop: function( event, ui ) {
alert("blabla");
}
});
</script>
Here is link to fiddle
Draggable droppable

Like MrObrian says, you need to be using draggable.stop for what you are tying to achieve.
This fiddle illustrates the difference.
http://jsfiddle.net/MddyD/4/
$(function() {
$('#par').draggable({
stop: function() {
alert("hi");
}
});
$("#dropIn").droppable({
drop: function() {
alert("drop");
}
});

Use Droppable.drop to catch what was dropped on droppable(You need to use both draggable and droppable)
http://docs.jquery.com/UI/Droppable#event-drop
<script>
$('#thingToDrag").draggable();
$('#par').droppable({
accept: "#thingToDrag",
drop: function( event, ui ) {
alert("draggable dropped");
}
});
</script>

You need to use the dragstop event which will be launched when the draggable element will stop being dragged :
$('#par')
.draggable()
.on('dragstop', function(event, ui) {
alert('ok')
});
http://jsfiddle.net/MddyD/3/

Here, you need to work with the object you setup as draggable. You can bind a function to the stop event.
<script>
$(function() {
$('#par').draggable({
stop: function(event, ui) {
alert("Dropped");
}
});
});
</script>
the $(function(){ }); just tells the script to run when the document is done loading. You could also just bind any other function that you create to the stop event.
http://jqueryui.com/demos/draggable/#event-stop

Preventing click event with jQuery drag and drop

I have elements on the page which are draggable with jQuery. Do these elements have click event which navigates to another page (ordinary links for example).
What is the best way to prevent click from firing on dropping such element while allowing clicking it is not dragged and drop state?
I have this problem with sortable elements but think it is good to have a solution for general drag and drop.
I've solved the problem for myself. After that I found that same solution exists for Scriptaculous, but maybe someone has a better way to achieve that.

A solution that worked well for me and that doesn't require a timeout: (yes I'm a bit pedantic ;-)
I add a marker class to the element when dragging starts, e.g. 'noclick'. When the element is dropped, the click event is triggered -- more precisely if dragging ends, actually it doesn't have to be dropped onto a valid target. In the click handler, I remove the marker class if present, otherwise the click is handled normally.
$('your selector').draggable({
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$('your selector').click(function(event) {
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
}
else {
// actual click event code
}
});

Solution is to add click handler that will prevent click to propagate on start of drag. And then remove that handler after drop is performed. The last action should be delayed a bit for click prevention to work.
Solution for sortable:
...
.sortable({
...
start: function(event, ui) {
ui.item.bind("click.prevent",
function(event) { event.preventDefault(); });
},
stop: function(event, ui) {
setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
}
...
})
Solution for draggable:
...
.draggable({
...
start: function(event, ui) {
ui.helper.bind("click.prevent",
function(event) { event.preventDefault(); });
},
stop: function(event, ui) {
setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
}
...
})

I had the same problem and tried multiple approaches and none worked for me.
Solution 1
$('.item').click(function(e)
{
if ( $(this).is('.ui-draggable-dragging') ) return false;
});
does nothing for me. The item is being clicked after the dragging is done.
Solution 2 (by Tom de Boer)
$('.item').draggable(
{
stop: function(event, ui)
{
$( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );
}
});
This works just fine but fails in one case- when I was going fullscreen onclick:
var body = $('body')[0];
req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;
req.call(body);
Solution 3 (by Sasha Yanovets)
$('.item').draggable({
start: function(event, ui) {
ui.helper.bind("click.prevent",
function(event) { event.preventDefault(); });
},
stop: function(event, ui) {
setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
}
})
This does not work for me.
Solution 4- the only one that worked just fine
$('.item').draggable(
{
});
$('.item').click(function(e)
{
});
Yep, that's it- the correct order does the trick- first you need to bind draggable() then click() event. Even when I put fullscreen toggling code in click() event it still didn't go to fullscreen when dragging. Perfect for me!

I'd like to add to this that it seems preventing the click event only works if the click event is defined AFTER the draggable or sortable event. If the click is added first, it gets activated on drag.

I don't really like to use timers or preventing, so what I did is this:
var el, dragged
el = $( '#some_element' );
el.on( 'mousedown', onMouseDown );
el.on( 'mouseup', onMouseUp );
el.draggable( { start: onStartDrag } );
onMouseDown = function( ) {
dragged = false;
}
onMouseUp = function( ) {
if( !dragged ) {
console.log('no drag, normal click')
}
}
onStartDrag = function( ) {
dragged = true;
}
Rocksolid..

lex82's version but for .sortable()
start: function(event, ui){
ui.item.find('.ui-widget-header').addClass('noclick');
},
and you may only need:
start: function(event, ui){
ui.item.addClass('noclick');
},
and here's what I'm using for the toggle:
$("#datasign-widgets .ui-widget-header").click(function(){
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
}
else {
$(this).next().slideToggle();
$(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
}
});

A possible alternative for Sasha's answer without preventing default:
var tmp_handler;
.sortable({
start : function(event,ui){
tmp_handler = ui.item.data("events").click[0].handler;
ui.item.off();
},
stop : function(event,ui){
setTimeout(function(){ui.item.on("click", tmp_handler)}, 300);
},

In jQuery UI, elements being dragged are given the class "ui-draggable-dragging".
We can therefore use this class to determine whether to click or not, just delay the event.
You don't need to use the "start" or "stop" callback functions, simply do:
$('#foo').on('mouseup', function () {
if (! $(this).hasClass('ui-draggable-dragging')) {
// your click function
}
});
This is triggered from "mouseup", rather than "mousedown" or "click" - so there's a slight delay, might not be perfect - but it's easier than other solutions suggested here.

In my case it worked like this:
$('#draggable').draggable({
start: function(event, ui) {
$(event.toElement).one('click', function(e) { e.stopPropagation(); });
}
});

After reading through this and a few threads this was the solution I went with.
var dragging = false;
$("#sortable").mouseover(function() {
$(this).parent().sortable({
start: function(event, ui) {
dragging = true;
},
stop: function(event, ui) {
// Update Code here
}
})
});
$("#sortable").click(function(mouseEvent){
if (!dragging) {
alert($(this).attr("id"));
} else {
dragging = false;
}
});

the most easy and robust solution? just create transparent element over your draggable.
.click-passthrough {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: transparent;
}
element.draggable({
start: function () {
},
drag: function(event, ui) {
// important! if create the 'cover' in start, then you will not see click events at all
if (!element.find('.click-passthrough').length) {
element.append("<div class='click-passthrough'></div>");
}
},
stop: function() {
// remove the cover
element.find('.click-passthrough').remove();
}
});

Have you tried disabling the link using event.preventDefault(); in the start event and re-enabling it in the drag stopped event or drop event using unbind?

Just a little wrinkle to add to the answers given above. I had to make a div that contains a SalesForce element draggable, but the SalesForce element has an onclick action defined in the html through some VisualForce gobbledigook.
Obviously this violates the "define click action after the drag action" rule, so as a workaround I redefined the SalesForce element's action to be triggered "onDblClick", and used this code for the container div:
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0,
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$(this).click(function(){
if( $(this).hasClass('noclick'))
{
$(this).removeClass('noclick');
}
else
{
$(this).children(":first").trigger('dblclick');
}
});
The parent's click event essentially hides the need to double-click the child element, leaving the user experience intact.

I tried like this:
var dragging = true;
$(this).click(function(){
if(!dragging){
do str...
}
});
$(this).draggable({
start: function(event, ui) {
dragging = true;
},
stop: function(event, ui) {
setTimeout(function(){dragging = false;}, 300);
}
});

for me helped passing the helper in options object as:
.sortable({
helper : 'clone',
start:function(),
stop:function(),
.....
});
Seems cloning dom element that is dragged prevented the bubbling of the event. I couldn´t avoid it with any eventPropagation, bubbling, etc. This was the only working solution for me.

The onmousedown and onmouseup events worked in one of my smaller projects.
var mousePos = [0,0];
function startClick()
{
mousePos = [event.clientX,event.clientY];
}
function endClick()
{
if ( event.clientX != mousePos[0] && event.clientY != mousePos[1] )
{
alert( "DRAG CLICK" );
}
else
{
alert( "CLICK" );
}
}
<img src=".." onmousedown="startClick();" onmouseup="endClick();" />
Yes, I know. Not the cleanest way, but you get the idea.