Willkommen in der Webstatt Zum Webstatt Blog und Stories
Franky Franky am 27.06.06 18:49

Hallo,

ich bastel momentan an einer einfach Homepageverwaltung. Nun sollen die Links im Menü dabei einfach sortiert werden.

Ich dachte mir...
- entweder eine select-box mit den Seiten als einzelne <options>. Das es dann neben der select-box so pfeile gibt zum hoch und runterschieben.
- noch besser wäre natürlich eine web2.0 lösung, wie das hier:
[IMG]http://blog.netvibes.com/images/todo-reorder.gif[/IMG]

Nur wie realisiere ich das? Und ansonsten ... wenn ich diese 1. möglichkeit aufgreife...wie kann ich dann die nummerierung an mein (php) script schicken? normalerweise würde ich ja höchstens die einzelnen <option>'s mit den values an mein script schicken, aber nicht die sortierung..
und zu 2 (was mir eigentlich lieber wäre): wer kennt so ein script?

Lg,
Franky

netcup.de Warum gibt es hier Werbung?
milahu milahu am 27.06.06 19:36

Siehe http://script.aculo.us/ :)

Franky Franky am 27.06.06 20:00

mhh danke aber..
http://demo.script.aculo.us/ajax/sortable_elements

# view
<ul id="list">
<% 6.times do |i| -%>
<li id="item_<%= i+1 %>">I'm number <%= i+1 %></li>
<% end -%>
</ul>

<p id="list-info"></p>

<%= sortable_element 'list',
:update => 'list-info',
:complete => visual_effect(:highlight, 'list'),
:url => { :action => "order" } %>

# controller
def order
@order = params[:list]
render :partial => 'list'
end

# _list.rhtml partial
Updated order is: <%= @order.join(', ') %>.


versteh ich net...
ist asp oder?

milahu milahu am 27.06.06 20:15

Ist der entsprechende Ruby Code.. aber guck doch einfach den HTML- bzw. JS-Code an.

Franky Franky am 27.06.06 20:24

aso mhh thx...
<ul id="list">
<li id="item_1">I'm number 1</li>
<li id="item_2">I'm number 2</li>
<li id="item_3">I'm number 3</li>
<li id="item_4">I'm number 4</li>

<li id="item_5">I'm number 5</li>
<li id="item_6">I'm number 6</li>
</ul>
+ js

und wie bekomme ich das jetzt per <form> gesendet?

milahu milahu am 27.06.06 20:31

Als Werte der <li>s definierst du Textfelder und die Reihenfolge solltest von JS geliefert bekommen.

Musst eben noch eine onsubmit Methode für <form> definieren, die ein verstecktes Eingabefeld
mit der Reihenfolge hinzufügt.

Franky Franky am 27.06.06 23:54

nochmal danke...aber dafür müsste ich erst einmal den jscode verstehen..
<script type="text/javascript">
Sortable.create('list', {
onUpdate:function(){
new Ajax.Updater('list-info', '/ajax/order', {
onComplete:function(request){
new Effect.Highlight('list',{});
}, parameters:Sortable.serialize('list'), evalScripts:true, asynchronous:true
}
)
}
})
</script>

kannst du mir bitte vll ein beispiel oder soetwas erstellen?

nuit nuit am 28.06.06 10:24

aber dann wirst du aus einem Beispiel auch nichts verstehn ;D

Ajax - http://www.amazon.de/gp/product/3898427641/302-3468508-4369640?v=glance&n=299956

schönes buch, dass die bibliothek verwendet ;)


beispiele sollten auch bei der Bibliothek mit dabei sein ;D

unter dem Ordner "test", musst dich da einfach mal im Js und Html code umkucken ;)


ganz gut un hilfreich ist auch die docu von der Bibo:
http://wiki.script.aculo.us/scriptaculous/show/HomePage


sollte was für dich sein:
http://www.gregphoto.net/sortable/index.php

Franky Franky am 28.06.06 12:29

ohh moooni =)
genau das von deinem dritten link hab ich gesucht =)
damit versteh ichs...das buch werd ich mir kaufen, wenn ich mal wieder geld dafür hab ;)

wie läufts eig. mit deinem browser?

Franky Franky am 28.06.06 16:39

Sooo, habs echt hinbekommen ein Wunder, danke ^^

Wenn ich aber jetzt per JS ein <li> hinzufügen will, dann mach ich das normalerweise per createElement(), createTextNode() und appendChild(). Wenn ich das aber jetzt mit diesem Script mache, bekomme ich nur ein leeres Element, dass nicht "dropable" ist ;)
Gibts denn für das Script da eine ganz neue Funktion oder muss ich die Liste immer komplett neu erzeigen, wenn ich einen Wert hinzufügen will?

leo am 25.08.06 21:50

@franky: versuch danach doch nochmal Sortable.create() aufzurufen, also direkt nach dem hinzufügen deines neuen punktes

@nuit: das hat nicht direkt was mit ajax zu tun...:D

@script.aculo.us: ich war davon auch mal begeistert aber finde es einfach viel zu groß und unflexibel.

ich empfehle euch mal jquery ( http://jquery.com ) anzuschauen (=> pluginpage: http://proj.jquery.com/plugins/ ).
"interface" sollte das plugin deiner wahl sein.

gruß, leo.

tnY am 25.08.06 22:28

hä ich hab mir die demo http://www.eyecon.ro/interface/sortables.html auf meinen rechner geladen dazu das plugin und das jquery.js und so auch auf namen blabla geachtet und dann mach ich das an und bei mir lokal funktioniert das net.. jemand ne idee?

nuit nuit am 25.08.06 22:41

schau dir mal die konsole an, ob was falsch ist...also ob er schriet...weil wenns nicht funktioniert, dann schreit die konsole von firefox immer :D

tnY am 25.08.06 22:47

das spuckt so einiges aus was aber eg net sein kann da ich doch die dateien von der page kopiert hab?!

Fehler: $("ul").Sortable is not a function
Quelldatei: http://127.0.0.1/tests/#
Zeile: 109

und 4 mal (oder ähnlich)

Fehler: jQuery is not defined
Quelldatei: http://127.0.0.1/tests/interface/isortables.js
Zeile: 9

nuit nuit am 25.08.06 22:52

du musst die auch richtig einbinden?
weil bei denen liegt sie im ordner: interface
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface/iutil.js"></script>
<script type="text/javascript" src="interface/idrag.js"></script>
<script type="text/javascript" src="interface/idrop.js"></script>
<script type="text/javascript" src="interface/isortables.js"></script>

tnY am 25.08.06 22:54

ist so, die dateien gibts dort auch nur der scheint die wohl net anzunehmen...

mit ner alten version des jquery's klappts.. da sind wohl nen paar fehler entstanden mit der zeit ;)

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt