We Keep Coding

Sortable UI fires click event

I'm using sortable ui jquery in my page, where i sort collapsed panels that expand on click
the problem is on mobile browser, click event is fired twice so on click it expands then collapses again
any ideas ?
Sortable UI
$( ".sortable" ).sortable({
handle: '.portlet-header',
sort: function(event, ui) {
$(ui.item).find(".processHeader").addClass("dragging");
},
axis: 'y',
revert: true,
scroll: false,
cursor: 'move',
helper : 'clone',
update: function(event, ui) {
ui.item.unbind("click");
ui.item.on("click",function (e) {
e.preventDefault();
return false;
});
},
placeholder: 'sortable-placeholder',
start: function(event, ui) {
// $(ui.item).find(".processHeader").addClass("dragging");
ui.placeholder.html(ui.item.html());
ui.item.css("transform", "rotate(1deg)");
},
stop:function (event,ui) {
ui.item.css("transform", "rotate(0deg)");
},
// forcePlaceholderSize: true,
delay: 350
});
Binding click event for headers
$('.processHeader').off().on('click', fireExpand);
expand function
fireExpand=function () {
// e.preventdefault();
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}

I know it's not optimal but did you try using setTimeout() in order to "ignore" the second click?
fireExpand=function () {
setTimeout(function() { } , 1000)
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}
Kind regards,
Charalampos

JQuery sortable Disable sorting when only one element exists

I`m trying to disable jquery sortable on a list of items when there is only one item remaining in the list. Here is my code so far:
$(".draggable_teams").sortable({
handle: '.team-header .grabber',
revert: 100,
tolerance: 'pointer',
connectWith: '.draggable-team-connector',
placeholder: 'highlight-teams',
helper: function (e, ul) {
var $originals = ul.children();
var $helper = ul.clone();
$($helper).find("[teamorder='teamorder']").addClass('clone-teams');
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
start: function (ul) {
$('.clone-teams .team').slideUp(400);
},
update: function () {
updateListScope();
scope.saveTeamOrder();
}
}).disableSelection();
}
Any help at all would be greatly appreciated :) Thanks.

I think you may use the length function
if($(".draggable_teams").children('li').length>1)
{ your code }
else{ $( ".draggable_teams" ).sortable( "disable" ); }

Managed to figure this out in the end thanks to all your help. Here is my completed code.
$(".draggable_teams").sortable({
handle: '.team-header .grabber',
revert: 100,
tolerance: 'pointer',
connectWith: '.draggable-team-connector',
placeholder: 'highlight-teams',
start: function () {
$('.clone-teams .team').slideUp(400);
},
helper: function (e, ul) {
var $originals = ul.children();
var $helper = ul.clone();
$($helper).find("[teamorder='teamorder']").addClass('clone-teams');
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
update: function () {
updateListScope();
scope.saveTeamOrder();
}
}).disableSelection();
}
scope.$watch("teams", function(){
setSortability();
});
function setSortability() {
if(!scope.teams || scope.teams.length < 2){
$( ".draggable_teams" ).sortable( "disable" );
}
else{
$( ".draggable_teams" ).sortable( "enable" );
}
}

gridster not using callback function

i have been trying to tinker with the callback function of my gridster. all i want it to do is call back the location of my grid, then using jquerys load function , pass it to another page to store and save the information. However i either return an error or nothing upon using this method. current code is as follows
var gridster = $(".gridster").gridster({
widget_margins: [1, 1],
widget_base_dimensions: [318, 184],
serialize_params: function ($w, wgd) {
return {
id: wgd.el[0].id,
col: wgd.col,
row: wgd.row,
size_y: wgd.size_y,
size_x: wgd.size_x
}
},
widget_selector: ".draggable",
draggable: {
stop: function(e, ui, $widget) {
alert('hello world');
}
}
,
draggable: {
handle: ".headertitle"
}
}).data('gridster');
gridster.enable();
any help would be appreciated

solved the problem, was using the defining variable draggable twice, which was canceling out the stop function, moved them into one setup, solved problem
draggable: {
stop: function(e, ui, $widget) {
alert('hello world');
}
}
,
draggable: {
handle: ".headertitle"
}
edited to
draggable: {
handle: ".headertitle"
stop: function(e, ui, $widget) {
alert('hello world');
}
}

jQuery UI Autocomplete Suggestions Not Closing on Select

I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete normally works.
It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.
To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.
Any ideas!?
Working Code - http://jsbin.com/aFeceTe/1/edit?html,js,output
$(document).ready(function(){
var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];
$("input").autocomplete({
source: test,
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Broken Code - http://jsbin.com/uyOGUVU/6/edit?html,js,output
$(document).ready(function(){
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});

Try this
$(document).ready(function(){
var temp = true;
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
temp = true;
return false;
}
}).focus(function () {
if(temp) {
$(this).autocomplete("search");
temp = false;
}
});
});
SEE DEMO

JavaScript function pass-through?

I'm not sure if this is doable, but I would like to be able to set a jQuery UI event as a function (directly), as opposed to continuing to wrap in additional function(event, ui) { ... } wrappers.
Hopefully you can see what I'm going for from the example below.
Here is what I would like:
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
Now I would think that the above would work, since I'm simply trying to say "continue firing this event, just over to that function".
Unfortunately, that will not work, and I'm ending up with this: (and for some reason, a disconnect from all data)
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});

The following two examples should both work in theory:
var dropdownSelect = function(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
And this:
function dropdownSelect(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
JavaScript functions are first class citizens, which means that you can treat them like any other object.

sure why not define that function first:
var dropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});

var dropdownSelect = function(event, ui) { ... };
var onDropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: onDropdownSelect,
minLength: 0
});