We Keep Coding

Plugin jquery doesn't launch

I have a problem with a jquery plugin.
I just add a plugin like this :
$.ui.plugin.add("draggable", "smartguides", {
//
start: function(event, ui) {
console.log('TOTO');
}
//
}
I set my options there :
function draggableElementParameters(hash_id, is_smartguides)
{
var datas = {
containment:"#container_page",
scroll: false,
cursor:"pointer",
opacity: 0.35,
tolerance: 5,
cancel: "#cr-stage",
smartguides: '.element-container',
stop: function (event, ui) {
//
});
}, drag: function (event, ui) {
//
}
};
return datas;
}
Then I call it like this :
$("#element-edit").draggable(window.parent.draggableElementParameters({{ json_encode($element->hash_id) }}, Helpers.Utils.Cookie.isTrue('backend-contest-editor-is-draggable-help')));
And to finish, element-container is ok in my view.
The fact is the plugin is never triggered, the console.log never appear.
Any ideas about this bug ?
thank you !

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

How can I reload javascript and css after asp gridview is refreshed in updatepanel?

I have an asp.net Gridview where users can insert update and deleted rows. With the code below, the users can drag a row up and down the gridview and update the position.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function myFunction() {
$("[id*=GridView1]").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
});
</script>
My issue is whenever a user inserts or updates a row, they can no longer drag and reorder any rows unless the page is refreshed. How can I resolve this issue?

You need to use refresh() after adding the new items
refresh()
Returns: jQuery (plugin only)
Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.
This method does not accept any arguments.
http://api.jqueryui.com/sortable/#method-refresh
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
$("[id*=GridView1]").sortable("refresh");
}
should work

I resolved this by just putting myFunction inside pageLoad as follows:
<script type="text/javascript" language="javascript">
function pageLoad() {
$("[id*=GridView1]").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
})
};
</script>

JQuery UI ! Draggable image and revertion

I have 4 droppable blocks and 1 draggable image, how to achive effect of revertion, only if the I dropped my image not into droppable element?
I used this options, but can't reach wished result:
$('.myimage').draggable({
scope: "tasks",
revert: true,
revertDuration: 1,
stop: function(event, ui) { }
});
$('.keeper').droppable({
accept: ".card",
scope: "tasks",
tolerance: "fit",
greedy: true,
drop: function(event, ui) {
$(this).css("background-color","green");
//$('.card').draggable({ scope: "tasks", revert: false });
}
});
so as you can see the revert set to "true", and when I dropped image not into .keeper, I have the revertion effect, and it's works fine untill I'm not drop .myimage to .keeper, after that I can dropping .myimage to everywhere on the page (revert doesn't work anymore), but I'm still need that .myimage was with this feature as for non-.keeper class elements, I hope you understand what I want.

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
});