Change CSS with jQuery Sortable - javascript

How can I change CSS property once sorted. Something likes this:
$( "#sort" ).sortable({
$(#div1).css("background-color","yellow");
});
Thanks alot

When you call initiate the plugin, make sure you pass a handler for the stop event:
$('#sort').sortable({
stop: function(){
$('#div1').css('background-color','yellow');
}
});

http://docs.jquery.com/UI/Sortable#events
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});

Look at the events for sortable on the jQuery UI website: http://jqueryui.com/demos/sortable/#events
Depending on the event you want, you can use:
$( "#sort" ).sortable({
change: function(){
$("#div1").css("background-color","yellow");
}
});

Related

Jquery UI sortable Change not working correctly

I have this code for initilazing my sortable ul, but both methods only render 1 item of the list and not the whole of it, with the stop event everything is fine, but I need to use the change event, what is the problem?
Thanks in advance.
API JQUERY SORTABLE
$( "#sortable-ul" ).sortable({
scroll: true,
items: "> li",
change: function() {
console.log($("#sortable-ul").sortable("toArray"));
console.log($("#sortable-ul").sortable("serialize"));
}
});
Try this code:
$( "#sortable-ul" ).sortable({
scroll: true,
items: "> li",
update: function() {
console.log($("#sortable-ul").sortable("toArray"));
console.log($("#sortable-ul").sortable("serialize"));
}
});

How to use 'on change' event on an input type hidden?

Demo and full code is like this :
http://jsfiddle.net/9R4cV/685/
I using like this :
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
But it's not working
Any solution to solve my problem?
You need to trigger .change() (or .trigger('change')) on input value changes, otherwise programatically changes are not triggering events.
The id of your input is #customer not #customer_name.
$( "#tags" ).autocomplete({
source: aTags,
select: function(event, ui) {
$("#customer").val(ui.item.label).change();
}
});
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
Working example.
Why not change the #customer_copy directly when item selected?
$( "#tags" ).autocomplete({
source: aTags,
select: function( event, ui ) {
console.log(ui.item.label);
$("#customer").val(ui.item.label);
$("#customer_copy").val(ui.item.label)
}
});

sortable - start , update , stop events not getting triggered

When I am dragging and dropping an item, following code using sortupdate gets triggered
$('#sortable').sortable().bind('sortupdate', function (event, ui) {
debugger;
//Triggered when the user stopped sorting and the DOM position has changed.
});
BUT
start, update, stop, change events are not getting triggered
That is,
$('#sortable').sortable({
start: function(event, ui) {
//
},
change: function(event, ui) {
//
},
update: function(event, ui) {
//
}
});
My goal is to find the original and dropped position of an item.
EDIT (for clear understanding):
In short,
$('#sortable').sortable().bind('sortupdate' ..... is working(triggered)
$('#sortable').sortable().bind('start' ..... is not working(not triggered)
$('#sortable').sortable().bind('change' ..... is not working(not triggered)
$('#sortable').sortable().bind('update' ..... is not working(not triggered)
$('#sortable').sortable().bind('sort' ..... is not working(not triggered)
If possible to get the values of old and new position with sortupdate event alone, then also it is ok..My ultimate goal is to find the position of both old and new for an item.
all this event are prefixed with sort so instead of start it becomes sortstart
i have created a fiddle where it will give the message of item moved from and to have a check at
http://jsfiddle.net/p2gethgh/
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
var from,to;
$("#sortable").on("sortstart",function(event,ui){
from = $(this).children().index(ui.item);
});
$('#sortable').on('sortdeactivate',function(event,ui) {
to = $(this).children().index(ui.item);
alert(ui.item.text()+' moved from '+(from + 1)+' to '+(to + 1));
});
This is the correct way to bind event to jquery sortable
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
OR
$( ".selector" ).on( "sortstart", function( event, ui ) {} );

Jquery trigger not triggering element

I trying to get a trigger working but this doesn't seem to work. Im 100% sure this is the right code to do the job.
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).trigger( "click" );
});
});
however is there another way to trigger an element click when a different element is clicked?
I don't see flaws in that code. It might be something else then (classnames are correct?)
You could try getting the click on another thread:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
setTimeout(function(){
$( ".attachment-large" ).trigger( "click" );
}, 10);
});
});
Or try another click method trigger:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).click();
});
});
Is there no error message provided in your console?

JQuery droppable having a handle drop function with additional parametes

So I understand this is how we normally call a jquery droppable:
$( ".selector" ).droppable({
drop: function(event, ui) { ... }
})
Is it possible for me to write something like this:
$( ".selector" ).droppable({
drop: function(event, ui, additionalParameter) { return function(){....} }(myParameter)
});
As long as the value is a function reference, you can do whatever you like. So yes!
You probably want to capture the event and ui objects, so they need to be parameters in the returned function. So your code would be:
$( ".selector" ).droppable({
drop: function(additionalParam){ return function(event, ui){...}; }(myParam)
});

Categories

Resources