I''m writing an appliation that contains several dynamically created
lists. I
had hoped that the following method for using the Sortable library from
scriptaculous would work:
1) create the list
2) create a Sortable for it
3) create another list
4) create a Sortable for it
and so on. Unfortunately this doesn''t work. I can''t find any
info in the
documentation for Sortable.create[1] about this behavior. However, one of the
demo pages[2] (which doesn''t work in FF on Linux btw) mentions the
following:
The script tag that encloses the Sortable.create function
calls needs to occur after all of the lists that you
intend to use. IE.. in this example if you were place the
"Sortable.create("firstlist"...);" call immediately after
that list
(and before the second list) you would only be able to drag from
list 1 to list 2 and not from list 2 to list 1.
If it helps, I''m not interested in dragging from one list to
another. Just in re-ordering each list as its own entity.
Is there any way to not have to destroy all Sortables and then
re-create them every time an element is added to a list or a new list
comes into being?
Any help appreciated!
Also, FYI [3] doesn''t work in FF on Linux either.
References:
[1] http://wiki.script.aculo.us/scriptaculous/show/Sortable.create
[2] http://wiki.script.aculo.us/scriptaculous/show/SortableListsDemo
[3] http://wiki.script.aculo.us/scriptaculous/show/GhostlySortableDemo
The sortable demos haven''t worked for a while. ( http://
dev.rubyonrails.org/ticket/4690 )
The documentation is, in most cases, out of date. The following
worked for me:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title></title>
<script type="text/javascript"
src="js/min/prototype.js"></script>
<script type="text/javascript" src="js/min/scriptaculous.js?
load=effects,dragdrop"></script>
<script type="text/javascript">
//<![CDATA[
function buildList(times) {
var ul = document.createElement("ul");
ul.id = "ul" + times;
var li = null;
for (var i = 0; i < 5; ++i) {
li = document.createElement("li");
li.id = "li" + times + "_" + i;
li.appendChild(document.createTextNode("List " + times + " Item
" +
i));
ul.appendChild(li);
}
document.body.appendChild(ul);
Sortable.create(ul, {});
if ((--times) > 0) {setTimeout("buildList(" + times +
")", 2000)}
}
window.onload = function() {
setTimeout("buildList(3)", 2000);
}
//]]>
</script>
<style type="text/css">
body {
position:relative;
color: black;
background-color: white;
font-size: small;
}
li {margin: 2px; padding: 2px .5em; list-style-type:none;border:1px
solid;cursor:move;}
#ul1 li {background-color: #dbb;}
#ul2 li {background-color: #bdb;}
#ul3 li {background-color: #bbd;}
</style>
</head>
<body>
</body>
</html>
TAG
On May 19, 2006, at 7:45 AM, Sam Rowe wrote:
> I''m writing an appliation that contains several dynamically
created
> lists. I
> had hoped that the following method for using the Sortable library
> from
> scriptaculous would work:
>
> 1) create the list
> 2) create a Sortable for it
> 3) create another list
> 4) create a Sortable for it
>
> and so on. Unfortunately this doesn''t work. I can''t find
any info
> in the
> documentation for Sortable.create[1] about this behavior. However,
> one of the
> demo pages[2] (which doesn''t work in FF on Linux btw) mentions the
> following:
>
> The script tag that encloses the Sortable.create function
> calls needs to occur after all of the lists that you
> intend to use. IE.. in this example if you were place the
> "Sortable.create("firstlist"...);" call immediately
after that list
> (and before the second list) you would only be able to drag from
> list 1 to list 2 and not from list 2 to list 1.
>
> If it helps, I''m not interested in dragging from one list to
> another. Just in re-ordering each list as its own entity.
>
> Is there any way to not have to destroy all Sortables and then
> re-create them every time an element is added to a list or a new list
> comes into being?
>
> Any help appreciated!
>
>
> Also, FYI [3] doesn''t work in FF on Linux either.
>
>
> References:
>
> [1] http://wiki.script.aculo.us/scriptaculous/show/Sortable.create
> [2] http://wiki.script.aculo.us/scriptaculous/show/SortableListsDemo
> [3] http://wiki.script.aculo.us/scriptaculous/show/GhostlySortableDemo
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On Fri, May 19, 2006 at 08:47:16AM -0600, Tom Gregory wrote:
# The sortable demos haven''t worked for a while. ( http://
# dev.rubyonrails.org/ticket/4690 )
#
# The documentation is, in most cases, out of date. The following
# worked for me:
#
# <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/
# TR/html4/strict.dtd">
# <html>
# <head>
# <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
# <title></title>
# <script type="text/javascript"
src="js/min/prototype.js"></script>
# <script type="text/javascript" src="js/min/scriptaculous.js?
# load=effects,dragdrop"></script>
# <script type="text/javascript">
# //<![CDATA[
#
# function buildList(times) {
# var ul = document.createElement("ul");
# ul.id = "ul" + times;
#
# var li = null;
# for (var i = 0; i < 5; ++i) {
# li = document.createElement("li");
# li.id = "li" + times + "_" + i;
# li.appendChild(document.createTextNode("List " + times + "
# Item " + i));
# ul.appendChild(li);
# }
# document.body.appendChild(ul);
#
# Sortable.create(ul, {});
#
# if ((--times) > 0) {setTimeout("buildList(" + times +
")", 2000)}
# }
#
# window.onload = function() {
# setTimeout("buildList(3)", 2000);
# }
# //]]>
# </script>
# <style type="text/css">
# body {
# position:relative;
# color: black;
# background-color: white;
# font-size: small;
# }
# li {margin: 2px; padding: 2px .5em; list-style-type:none;border:1px
# solid;cursor:move;}
# #ul1 li {background-color: #dbb;}
# #ul2 li {background-color: #bdb;}
# #ul3 li {background-color: #bbd;}
#
# </style>
# </head>
# <body>
# </body>
# </html>
Perfect example!
I''m doing basically the same thing, but I''m using the Sortable
to update an
array. I then re-order the array and re-number/re-id the list. It works fine
with one list, but when I add a second list, only the second one maintains
state:
Here''s how I create the sortable:
Sortable.create(''pathul-'' +
cg,{onUpdate:function(){reorderPaths(Sortable.serialize(''pathul-''
+ cg))}});
and here''s the callback function:
function reorderPaths(str){
var myul = str.replace(/([^[])\[.*/,''$1'');
alert(''doing callback for '' + myul);
var mygnum = myul.replace(/\D+-(\d+)/,''$1'');
var s = str.split(''&'');
var tmp = new Array();
s.each(function(j){
var a = j.replace(/[^=]+=(\d+)/,''$1'');
tmp.push(g[cg].paths[a]);
});
g[cg].paths=tmp;
$A($(myul).childNodes).each(function(e){
if(e.tagName.toLowerCase() == ''li''){
e.removeAttribute(''id'');
}
})
var i=0;
$A($(myul).childNodes).each(function(e){
if(e.tagName.toLowerCase() == ''li''){
e.id = ''pathli-'' + mygnum +
''_'' + i;
i++;
}
})
}
Instead of your window.onload, make a button that allows you to
create multiple lists. Call each list ''pathul-'' + num; where
''num'' is
a variable that tracks the number of lists you''ve created. When you
create the second one, the first one will still appear to re-order,
but the callback fires for the most recent list created.
I realize tis would all be easier if I just posted my code, but
unfortunately, it''s huge and complex.
Thanks for the reply!
The callback definition is your problem:
Sortable.create(''pathul-'' +
cg,{onUpdate:function(){reorderPaths
(Sortable.serialize(''pathul-'' + cg))}});
As you''ve discovered, it will always call reorder/Serialize on the
most recent Sortable--this is because it uses the *current* value of
cg, not the value at the time of the onUpdate declaration. The
onUpdate option has a parameter, which is equal to the element
updated. Try this:
Sortable.create(''pathul-'' + cg, {onUpdate:function(el)
{Sortable.serialize(reorderPaths(el));}});
Or, even simper (but requires a re-write of your reorderPaths function):
Sortable.create(''pathul-'' + cg, {onUpdate:
reorderPaths});
To see a callback in my example change the Sortable.Create line to:
Sortable.create(ul, {onUpdate: function(el){new Effect.Highlight
(el);}});
TAG
On May 19, 2006, at 9:27 AM, Sam Rowe wrote:
> On Fri, May 19, 2006 at 08:47:16AM -0600, Tom Gregory wrote:
> # The sortable demos haven''t worked for a while. ( http://
> # dev.rubyonrails.org/ticket/4690 )
> #
> # The documentation is, in most cases, out of date. The following
> # worked for me:
> #
> # <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://
> www.w3.org/
> # TR/html4/strict.dtd">
> # <html>
> # <head>
> # <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
> # <title></title>
> # <script type="text/javascript"
src="js/min/prototype.js"></script>
> # <script type="text/javascript"
src="js/min/scriptaculous.js?
> # load=effects,dragdrop"></script>
> # <script type="text/javascript">
> # //<![CDATA[
> #
> # function buildList(times) {
> # var ul = document.createElement("ul");
> # ul.id = "ul" + times;
> #
> # var li = null;
> # for (var i = 0; i < 5; ++i) {
> # li = document.createElement("li");
> # li.id = "li" + times + "_" + i;
> # li.appendChild(document.createTextNode("List " + times +
"
> # Item " + i));
> # ul.appendChild(li);
> # }
> # document.body.appendChild(ul);
> #
> # Sortable.create(ul, {});
> #
> # if ((--times) > 0) {setTimeout("buildList(" + times +
")", 2000)}
> # }
> #
> # window.onload = function() {
> # setTimeout("buildList(3)", 2000);
> # }
> # //]]>
> # </script>
> # <style type="text/css">
> # body {
> # position:relative;
> # color: black;
> # background-color: white;
> # font-size: small;
> # }
> # li {margin: 2px; padding: 2px .5em; list-style-type:none;border:1px
> # solid;cursor:move;}
> # #ul1 li {background-color: #dbb;}
> # #ul2 li {background-color: #bdb;}
> # #ul3 li {background-color: #bbd;}
> #
> # </style>
> # </head>
> # <body>
> # </body>
> # </html>
>
>
> Perfect example!
>
> I''m doing basically the same thing, but I''m using the
Sortable to
> update an
> array. I then re-order the array and re-number/re-id the list. It
> works fine
> with one list, but when I add a second list, only the second one
> maintains
> state:
>
> Here''s how I create the sortable:
> Sortable.create(''pathul-'' +
cg,{onUpdate:function(){reorderPaths
> (Sortable.serialize(''pathul-'' + cg))}});
>
> and here''s the callback function:
>
> function reorderPaths(str){
> var myul = str.replace(/([^[])\[.*/,''$1'');
> alert(''doing callback for '' + myul);
> var mygnum = myul.replace(/\D+-(\d+)/,''$1'');
> var s = str.split(''&'');
> var tmp = new Array();
> s.each(function(j){
> var a = j.replace(/[^=]+=(\d+)/,''$1'');
> tmp.push(g[cg].paths[a]);
> });
> g[cg].paths=tmp;
> $A($(myul).childNodes).each(function(e){
> if(e.tagName.toLowerCase() == ''li''){
> e.removeAttribute(''id'');
> }
> })
> var i=0;
> $A($(myul).childNodes).each(function(e){
> if(e.tagName.toLowerCase() == ''li''){
> e.id = ''pathli-'' + mygnum +
''_'' + i;
> i++;
> }
> })
> }
>
>
> Instead of your window.onload, make a button that allows you to
> create multiple lists. Call each list ''pathul-'' + num;
where ''num'' is
> a variable that tracks the number of lists you''ve created. When
you
> create the second one, the first one will still appear to re-order,
> but the callback fires for the most recent list created.
>
> I realize tis would all be easier if I just posted my code, but
> unfortunately, it''s huge and complex.
>
> Thanks for the reply!
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On Fri, May 19, 2006 at 10:05:17AM -0600, Tom Gregory wrote:
# The callback definition is your problem:
# Sortable.create(''pathul-'' +
cg,{onUpdate:function(){reorderPaths
# (Sortable.serialize(''pathul-'' + cg))}});
#
# As you''ve discovered, it will always call reorder/Serialize on the
# most recent Sortable--this is because it uses the *current* value of
# cg, not the value at the time of the onUpdate declaration. The
# onUpdate option has a parameter, which is equal to the element
# updated. Try this:
# Sortable.create(''pathul-'' + cg, {onUpdate:function(el)
# {Sortable.serialize(reorderPaths(el));}});
That worked perfectly. I didn''t realize that variable was
late-bound. Thanks for the help!
This is more of a question for Thomas (madrobby)... He has always advocated to use gzip rather than any other form of javascript compression, but lately I ran into some issues with gzip on Internet Explorer. Read: http://support.microsoft.com/default.aspx?scid=kb;en-us;823386&Product=ie600 <http://support.microsoft.com/default.aspx?scid=kb;en-us;823386&Product=ie600> Did anyone face similar issues? _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Did anyone face similar issues? ---------------------- Not personally, but I did read about them here: http://www.thinkvitamin.com/features/webapps/serving-javascript-fast According to the article: "... Internet Explorer (versions 4 through 6) has some more interesting issues. When loading gzipped JavaScript, Internet Explorer will sometimes incorrectly decompress the resource, or halt compression halfway through, presenting half a file to the client. If you rely on your JavaScript working, you need to avoid sending gzipped content to Internet Explorer. In the cases where Internet Explorer does receive gzipped JavaScript correctly, some older 5.x versions wont cache the file, regardless of its e-tag headers."