Sortable list - even when list is changed

[Nathan Klatt]

Hi Rafal,

In what way does it not work? I transcribed your code into jsbin and
it seems to be fine, though I don't have any roundbox styling being
applied:

http://jsbin.com/oququ3/edit

Nathan

[rafald]

Hello,

I just started to user jquery. Its very good , though as the beginner
I have some issues ;-)

I have sortable llisty build like this:
<ul id="elements">
<li id="li1">Item 1</li>
.....
</ul>

in functions.js I have this:

$(function(){
$("#elements").sortable();
$("#elements").disableSelection();
});

This make the whole list perfectly sortable and works fine.

My problem is with events I would like to add.
I have read that following should work:

$('#elements').sortable({
update: function(event, ui) { alert('update') }
});

Since I am using list in round corner div, my whole code looks like
this:

$(document).ready(function(){
$('#elements').sortable({
update: function(event, ui) { alert('update') }
});
$("div.roundbox") .wrap('<div class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
});

but it does not work!
I need to execute a function each time when order of item on the list
will change.
I my example I just wanted to test function, and therefore I added
alert.
Could anybody advise me what is wrong here?

regards
Rafal

[rafald]

Post by Nathan Klatt
Hi Rafal,
In what way does it not work? I transcribed your code into jsbin and
it seems to be fine, though I don't have any roundbox styling being
http://jsbin.com/oququ3/edit
Nathan

Hi

I am not surpised you don't get it rounded ;-) . I presented only part
of the code for rounded corners, because this is not my problem here
(anyway: if you need rounded check this: http://docs.jquery.com/Tutorials:Rounded_Corners
...and make sure you download images from the style as well.).

My problem is different:
Each time when the user sorts something, I would like to see what is
the current order of items. I need to trigger a code each time when
user moves something.

In other words: I do not see popup 'update' which I expect to see
(see : alert('update') in my code above)

What could be wrong ?

regards
Rafal

[rafald]

ok...I see on you page it works...I double checked my code.
Here what happens

WHEN I replace THIS:
$(function(){
$("#elements").sortable();
$("#elements").disableSelection();
});
$(function() {
$("#accordion").accordion();
});
$(document).ready(function(){
$('#elements').sortable({
update: function(event, ui) { alert('update') }
});
$("div.roundbox") .wrap('<div class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
});


With code from your page:

$(function(){
$("#elements").sortable();
$("#elements").disableSelection();
});
$(function() {
$("#accordion").accordion();
});
$(document).ready(function(){
$('#elements').sortable({
update: function(event, ui) { alert('update') }
});
$("div.roundbox") .wrap('<div class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
});



...the it WORKS ;-)

but the problem is I need accordion as well.

For my code it is enough that I remove THIS part:
$(function(){
$("#elements").sortable();
$("#elements").disableSelection();
});
$(function() {
$("#accordion").accordion();
});

then it works

so I have to reorganize the code.

Could you advise me what will be the best solution here ?

regards
Rafal

[Nathan Klatt]

Post by rafald
ok...I see on you page it works...I double checked my code.
...
but the problem is I need accordion as well.

If you update the jsbin page to how you think it should be (i.e., add
the accordion) I'd be happy to look into what's wrong. :)

Go to the page I made: http://jsbin.com/oququ3/edit, make your edits,
save a "New revision", then forward the link.

Nathan

[rafald]

Hi ,
please check this:
http://jsbin.com/oququ3/6/edit

As you can see:
- sortable list works
- accordion works
...but:
- POPUP 'update' does not come

what could be wrong here?
regards
Rafal

[Peter Edwards]

In your example, you have two calls to $('#elements').sortable().
The second one has the update event added, but the first (the one which
creates the sortable) doesn't. If you add the update handler to the
first call, it works OK.

Post by rafald
Hi ,
http://jsbin.com/oququ3/6/edit
- sortable list works
- accordion works
- POPUP 'update' does not come
what could be wrong here?
regards
Rafal

[rafald]

Hi Peter,
Indeed! It works ;-) THANKS!
It was enough to remove line with >> $("#elements").sortable(); <<

So, what is the right place to put:
$("#elements").sortable();
?

in my example:
the first place was outside "$(document).ready(function()"
the second place (where I added event) was inside "$
(document).ready(function()"

What are the rules here and what will be difference if I put inside
or outside ?
Could you please explain this to me ?

regards
Rafal

[Peter Edwards]

No problem,

$(document).ready(function(){
});

and

$(function(){
});

are the same - both will run whatever you have in them when the DOM is
ready - the second is just a kind of shorthand for the (much easier to
read) first. Docs:

.ready()
http://api.jquery.com/ready/

$(callback)
http://api.jquery.com/jQuery/#jQuery3

When you have multiple instances of these constructs in your scripts,
the code within them will run in the order in which they are defined, so
in your example, what was happening was the first
$("#elements").sortable(); (defined within the $(function(){}); block)
was creating the sortable list - the second call (within
$(document).ready) was ignored.

Hope this helps,

Peter

Post by rafald
Hi Peter,
Indeed! It works ;-) THANKS!
It was enough to remove line with >> $("#elements").sortable(); <<
$("#elements").sortable();
?
the first place was outside "$(document).ready(function()"
the second place (where I added event) was inside "$
(document).ready(function()"
What are the rules here and what will be difference if I put inside
or outside ?
Could you please explain this to me ?
regards
Rafal

[rafald]

Hi ,
please check this:
http://jsbin.com/oququ3/6/edit

As you can see:
- sortable list works
- accordion works
...but:
- POPUP 'update' does not come

what could be wrong here?
regards
Rafal

[rafald]

Hi ,
please check this:
http://jsbin.com/oququ3/6/edit

As you can see:
- sortable list works
- accordion works
...but:
- POPUP 'update' does not come

what could be wrong here?
regards
Rafal

[rafald]

Hi ,
please check this:
http://jsbin.com/oququ3/6/edit

As you can see:
- sortable list works
- accordion works
...but:
- POPUP 'update' does not come

what could be wrong here?
regards
Rafal