[JS] Dynamische volgorde formulier aanpassen

[semicolon]

Ik heb met javascript het ondertussen totaal niet orginele 'drag en drop' script om de volgorde te veranderen, zelf nagemaakt. (niet vragen waarom of zeggen wiel opnieuw uitvinden = onzin, daar vraag ik niet om.

Werkt prima, echter kom ik met 1 probleem. De volgorde van de velden klopt niet.
Op het moment heb ik maar 1 veld, voor het ID, echter later zullen hier mogelijk per 'rij' meerdere instaan. Ik maak gebruik van [] in de namen om later server-side een array te ontvangen.

De positie van het element verander ik waarschijnlijk totaal fout, namelijk door gewoon de Node opnieuw te appenden (niet opnieuw aanmaken/clonen dus). insertBefore, insertAfter (custom) en appendChild gebruik ik hier dus voor.

Het liefste geef ik geen voorbeeld ivm gevoelige informatie, en daarnaast is hij momenteel Safari only.


Volgorde: 1,2,3,4,5 (standaard volgorde dus, onaangepast)

Als ik vervolgende de 5 boven de 1 sleep, zou je dus verwachten 5,1,2,3,4 (wat je ook -ziet-). Maar in dit geval blijft bij 5 voor 1 de volgorde onveranderd. Soms veranderd de volgorde na veel gespeel, maar dan is hij alsnog fout.

Ik hoop dat het duidelijk genoeg omschreven is, en dat iemand me hiermee kan helpen, ik zit er al bijna een week op vast.

- update
test script
Ik ga ervan uit dat hier toch omgevraagd heb, dus heb even de basis werking apart gemaakt, en levert hetzelfde resultaat (helaas). Ik weet zeker dat ik het fout doe (ja ik zelf), maar ik zou graag willen horen hoe ik dit dan -goed- doe.

JavaScript:

window.onload = function( ){
        var c = document.getElementById( 'container' );
        var een = document.getElementById( 'een' );
        var twee = document.getElementById( 'twee' );
        var drie = document.getElementById( 'drie' );
        
        c.insertBefore( drie , een );
    }

HTML:

<form action="echo.php" method="post">
    <div id="container">
        <div id="een">
            <input type="text" value="1" name="test[]" />
        </div>
        <div id="twee">
            <input type="text" value="2" name="test[]" />
        </div>
        <div id="drie">
            <input type="text" value="3" name="test[]" />
        </div>
    </div>
    <input type="submit" />
</form>

Je zou visueel moeten zien 312, maar bij het verzenden is het nog 123.

[ Voor 27% gewijzigd door semicolon op 11-10-2006 19:36 ]

[Michali]

Ik denk dat hij intern de volgorde ook bijhoudt, en dat die niet gewijzigd wordt, behalve als je je input aan een andere form koppelt. Misschien kun je proberen de volgorde in de elements array van je form object te wijzigen, maar ik vraag me af of dat zou werken.

Beter is om zelf een naam te geven waarbij je de index bepaald. Ik zou er sowieso niet op vertrouwen dat je de gegevens binnenkrijgt in de volgorde waarop ze op het scherm staan. Als je echt een bepaalde volgorde wilt afdwingen, dan zou ik dat ook bulletproof maken door namen als test[0], test[1], test[2] etc. te geven.

[semicolon]

Michali schreef op woensdag 11 oktober 2006 @ 19:49:Als je echt een bepaalde volgorde wilt afdwingen, dan zou ik dat ook bulletproof maken door namen als test[0], test[1], test[2] etc. te geven.

Aja goed dat je het zegt, dit had ik ook geprobeerd en ook hier kreeg ik de foute volgorde terug. Ik heb echter deze zelfde code geprobeerd in Firefox en Webkit (de code -achter- safari, laatste nightly build), en daarin 'werkt' het wel. (ik zeg 'werkt' omdat ik nog steeds twijfel of de manier waarop ik de elementen een nieuwe positie geef correct is.).

Dat lost mijn probleem voor de huidige versie van Safari niet op, dus ik hoop dat iemand anders nog suggesties heeft. Toch bedankt voor je input.

[Michali]

Maar je geeft hem dan toch wel een nieuwe naam lijkt me, bij het wijzigen van de volgorde? Anders is het wel raar.

[semicolon]

Michali schreef op woensdag 11 oktober 2006 @ 20:03:
Maar je geeft hem dan toch wel een nieuwe naam lijkt me, bij het wijzigen van de volgorde? Anders is het wel raar.

Nee ik verander de naam niet, kan je uitleggen waarom ik dat wel zou moeten doen op het moment dat ik de key in de "array" dus zelf definieer zoals je zelf ook voorstelde.

[Verwijderd]

De vraag is ook een beetje wat de volgorde van de input elementen in bijvoorbeeld document.forms en form.elements is. Waarschijnlijk moet je gewoon echt de naam van een veld aanpassen c.q. alle invoer elementen in het formulier opnieuw aanmaken in de DOM tree.

[Michali]

Max v W schreef op woensdag 11 oktober 2006 @ 20:16:
[...]

Nee ik verander de naam niet, kan je uitleggen waarom ik dat wel zou moeten doen op het moment dat ik de key in de "array" dus zelf definieer zoals je zelf ook voorstelde.

Stel je hebt deze elementen:

HTML:

<input name="test[0]" value="0">
<input name="test[1]" value="1">
<input name="test[2]" value="2">
<input name="test[3]" value="3">

Dan zou je dit zo binnen kunnen krijgen:

code:

array(
  0 => 0,
  1 => 1,
  2 => 2,
  3 => 3
);

Als je dan de volgorde verandert:

HTML:

<input name="test[1]" value="1">
<input name="test[0]" value="0">
<input name="test[3]" value="3">
<input name="test[2]" value="2">

Dan zijn is test[] nog steeds op dezelfde manier geindexeerd. Je krijgt je gegevens dus nog steeds in dezelfde volgorde terug. Als je ze dan een nieuwe naam geeft, zoals dit:

HTML:

<input name="test[0]" value="1">
<input name="test[1]" value="0">
<input name="test[2]" value="3">
<input name="test[3]" value="2">

Dan zou je het wel zo binnen moeten krijgen:

code:

array(
  0 => 1,
  1 => 0,
  2 => 3,
  3 => 2
);

Ik weet trouwens niet zeker of dit vastgelegd gedrag is, maar ik verwacht wel dat dit overal zo geimplementeerd is. Het lijkt mij iig logisch. Probeer het dus eerst eens uit voordat je er vanuit gaat dat dit ook echt zo is.

[Verwijderd]

Waarom gebruik je gewoon niet de Sortable van scriptaculous :

http://wiki.script.aculo....us/show/SortableListsDemo

of check

http://www.gregphoto.net/sortable/advanced/

[semicolon]

Verwijderd schreef op woensdag 11 oktober 2006 @ 20:18:
De vraag is ook een beetje wat de volgorde van de input elementen in bijvoorbeeld document.forms en form.elements is. Waarschijnlijk moet je gewoon echt de naam van een veld aanpassen c.q. alle invoer elementen in het formulier opnieuw aanmaken in de DOM tree.

In dit voorbeeld wordt de volgorde inderdaad
1e veld
2e veld
submit knop
3e veld

Michali schreef op woensdag 11 oktober 2006 @ 20:29:...
Dan zou je het wel zo binnen moeten krijgen:

code:

array(
  0 => 1,
  1 => 0,
  2 => 3,
  3 => 2
);

Ik weet trouwens niet zeker of dit vastgelegd gedrag is, maar ik verwacht wel dat dit overal zo geimplementeerd is. Het lijkt mij iig logisch. Probeer het dus eerst eens uit voordat je er vanuit gaat dat dit ook echt zo is.

In dit voorbeeld werkt het, echter als ik het later toepas in een applicatie wat uiteindelijk de bedoeling is zal het waarschijnlijk lastiger worden. Ik hou hem even ernaast als 'final solution' en hoop dat iemand anders misschien nog een goed idee heeft hierover. Het voorbeeld hier is namelijk het simpelste van het simpelste vergeleken met het eind script, waarbij deze techniek lastiger te implementeren wordt (maar niets is onmogelijk).

Nogmaals, dit fenomeen doet zich kennelijk alleen voor in Safari, niet in WebKit (nightly build van Safari) of Firefox. (IE is niet van belang). Maar nu weet ik niet of ik Safari schuld moet geven of mijn denkwijze.

Verwijderd schreef op woensdag 11 oktober 2006 @ 21:21:
Waarom gebruik je gewoon niet de Sortable van scriptaculous :

http://wiki.script.aculo....us/show/SortableListsDemo

of check

http://www.gregphoto.net/sortable/advanced/

Je hebt mijn topicstart niet gelezen, dit soort berichten vraag ik dus niet om. Maar als je het moet weten, ik heb er niets aan om standaard producten te gebruiken omdat er dan geen uitdaging meer is, en ik niet weet wat er op de achtergrond gebeurd, en ik me aan 'hun' regels moet houden.

[ Voor 7% gewijzigd door semicolon op 11-10-2006 21:29 ]

[Verwijderd]

Max v W schreef op woensdag 11 oktober 2006 @ 21:26:
[...]

In dit voorbeeld wordt de volgorde inderdaad
1e veld
2e veld
submit knop
3e veld


[...]

In dit voorbeeld werkt het, echter als ik het later toepas in een applicatie wat uiteindelijk de bedoeling is zal het waarschijnlijk lastiger worden. Ik hou hem even ernaast als 'final solution' en hoop dat iemand anders misschien nog een goed idee heeft hierover. Het voorbeeld hier is namelijk het simpelste van het simpelste vergeleken met het eind script, waarbij deze techniek lastiger te implementeren wordt (maar niets is onmogelijk).

Nogmaals, dit fenomeen doet zich kennelijk alleen voor in Safari, niet in WebKit (nightly build van Safari) of Firefox. (IE is niet van belang). Maar nu weet ik niet of ik Safari schuld moet geven of mijn denkwijze.


[...]

Je hebt mijn topicstart niet gelezen, dit soort berichten vraag ik dus niet om. Maar als je het moet weten, ik heb er niets aan om standaard producten te gebruiken omdat er dan geen uitdaging meer is, en ik niet weet wat er op de achtergrond gebeurd, en ik me aan 'hun' regels moet houden.

hahahahaha .... dus jij wil alles zelf opnieuw uitvinden? Juist zulke dingen maken het leven van een developer makkelijker. Waarom opnieuw het Sortable uitvinden als het al bestaat? Wat jij wil maken, zoals je beschreven had kan je juist snel met die sortable maken. I know, cuz I did it. Hoe?

1) Maak je form
2) Maak een div genaamd "mysortables"
3) Maak daarin divjes met een naam en die genummerd zijn en daarin de textvelden als een array met een key voorbeeld:

<div id='sort_1'>
<input type='text' name='enum[1]' value='text 1'>
</div>

<div id='sort_2'>
<input type='text' name='enum[2]' value='text 2'>
</div>

4) Activeer de sortable
Sortable.create('mysortables',{tag:'div'});

5) Maak een knopje die gekoppeld is aan javascript functie vb

function doeDit()
{
alert(Sortable.sequence('mysortables'));
}


6) Maak je submit button

7) Ga nu maar lekker drag and droppen

Submit je form naar je backend en kijk naar de volgorde die binnen komt. Als het goed is is dat gelijk de volgorde van je sortable.

ik heb er niets aan om standaard producten te gebruiken omdat er dan geen uitdaging meer is,en ik niet weet wat er op de achtergrond gebeurd, en ik me aan 'hun' regels moet houden.

Dat van die standaard product slaat nergens op. Gebruik je PHP of een ander serverside product? JA? Hmm is dat niet een standaard product? Of heb je zelf een eigen serverside taal aangezien je niet "HUN" regels wil volgen.

Wees blij dat zulke script eindelijk bestaan, want ik weet nog een tijd dat dit allemaal drama was. Nu kan ik dankzij zulke scripts tegen de klant zeggen "Kijk dit kunnen we doen in zoveel tijd" en dat ik gewoon weet dat het werkt in alle grote browsers.

Je hebt mijn topicstart niet gelezen, dit soort berichten vraag ik dus niet om

Jij wilt toch gewoon de volgorde van je formelementjes veranderen? Nou dat kan dus met die Sortable. Ik geef je een mogelijke oplossing, ga dan niet stom terug zeiken.


EDIT:
zucht .. wou het eigenlijk niet doen maar goed:

http://www.leihitu.nl/xperiments/sortable/

[ Voor 1% gewijzigd door Verwijderd op 12-10-2006 10:06 . Reden: voorbeeldje gemaakt ]

[moozzuzz]

Ik heb je topic niet helemaal doorgelezen, maar ik zag dat je je elementen in een array wil steken (kant server) door ze te benoemen als name="arraynaam[]". Dit impliceert dat je je informatie door de serverside laat interpreteren als array. De serverside zal [automagisch] maw. het eerste element een key=1 geven, het tweede element een key=2, ...

Volgens mij is dus de oplossing om je naamgeving aan te passen, en de elementen dus expliciet te benoemen. Element één, wordt dan arraynaam[1] enz...

Maar mss is dat hierboven al gesteld

[ Voor 5% gewijzigd door moozzuzz op 12-10-2006 15:21 ]

[BtM909]

Verwijderd schreef op donderdag 12 oktober 2006 @ 09:53:
[...]


hahahahaha .... dus jij wil alles zelf opnieuw uitvinden? Juist zulke dingen maken het leven van een developer makkelijker. Waarom opnieuw het Sortable uitvinden als het al bestaat? Wat jij wil maken, zoals je beschreven had kan je juist snel met die sortable maken. I know, cuz I did it. Hoe?

Als TS het zelf wilt oplossen, wie ben jij dan om hem daarop te wijzen... Er zijn meerdere redenen waarom iemand het perse zelf wilt doen

Het kan overigens geen kwaad om te kijken hoe de 'standaard' oplossingen het doen, aangezien TS daar weer wat van kan leren, maar om nou je mening zo op te drukken. Beetje relaxed, ok?

[semicolon]

moozzuzz schreef op donderdag 12 oktober 2006 @ 15:12:
Ik heb je topic niet helemaal doorgelezen, maar ik zag dat je je elementen in een array wil steken (kant server) door ze te benoemen als name="arraynaam[]". Dit impliceert dat je je informatie door de serverside laat interpreteren als array. De serverside zal [automagisch] maw. het eerste element een key=1 geven, het tweede element een key=2, ...

Volgens mij is dus de oplossing om je naamgeving aan te passen, en de elementen dus expliciet te benoemen. Element één, wordt dan arraynaam[1] enz...

Maar mss is dat hierboven al gesteld

Was al gesteld en hielp helaas niets. Ik denk dat het toch gewoon aan de browser ligt (gezien het in nightly build en firefox wel werkt). Toch bedankt voor je input.

Verwijderd schreef op donderdag 12 oktober 2006 @ 09:53:hahahahaha .... dus jij wil alles zelf opnieuw uitvinden? Juist zulke dingen maken het leven van een developer makkelijker. Waarom opnieuw het Sortable uitvinden als het al bestaat? Wat jij wil maken, zoals je beschreven had kan je juist snel met die sortable maken.

Nogmaals, ik hou van uitdagingen. Als je het wiel niet opnieuw wilt uitvinden kan bijna iedereen stoppen met programmeren - 'want het bestaat al'. Concurrentie is ook nog zoiets (in mijn geval niet van toepassing) Misschien wil ik wel dat mijn wiel vierkant is, oke?

Dat van die standaard product slaat nergens op. Gebruik je PHP of een ander serverside product? JA? Hmm is dat niet een standaard product? Of heb je zelf een eigen serverside taal aangezien je niet "HUN" regels wil volgen.

Er is een verschil tussen een programmeertaal en programmatuur.

Jij wilt toch gewoon de volgorde van je formelementjes veranderen? Nou dat kan dus met die Sortable. Ik geef je een mogelijke oplossing, ga dan niet stom terug zeiken.

Ik "zeik" niet terug, ik zeg alleen dat ik in de TopicStart duidelijk gevraagd heb hier niet over te praten.

Oke, ik ga hier niet meer over praten. Terug naar mijn probleem.

Ik denk dat mijn probleem dus toch aan mijn huidige browser ligt, wat geen probleem is als dat inderdaad het geval is. Toch wil ik dan nog even vragen aan de experts hier, of het wel netjes is om een bestaand element opnieuw te appenden om hem op een andere plaats te krijgen, of dat ik hem beter kan clonen, of .. [zelf invullen]

[Verwijderd]

BtM909 schreef op donderdag 12 oktober 2006 @ 15:28:
[...]

Als TS het zelf wilt oplossen, wie ben jij dan om hem daarop te wijzen... Er zijn meerdere redenen waarom iemand het perse zelf wilt doen

Het kan overigens geen kwaad om te kijken hoe de 'standaard' oplossingen het doen, aangezien TS daar weer wat van kan leren, maar om nou je mening zo op te drukken. Beetje relaxed, ok?

Wie ik dat ben dan? Degene die hem probeert te helpen en dan terug krijgt

Je hebt mijn topicstart niet gelezen, dit soort berichten vraag ik dus niet om

Maar goed ... hoop dat de topicstarter eruit komt.

[ Voor 14% gewijzigd door Verwijderd op 12-10-2006 16:18 . Reden: damnz ... tikken is ook een vak .... ]