ugrás a tartalomhoz

dinamikus formok javascripttel?

kalamona · 2008. Jan. 4. (P), 12.53
sziasztok!

hogyan tudok olyan formot készíteni, ahol egyes elemeket dinamikusan lehet megjeleniteni igényektől függően, mindezt javascripttel kliens oldalon megvalósitva. pl. mint a gmail-ben mikor több fájlt akarsz csatolni és adod hozzá a feltöltési mezőket...

tudtok mondani támpontot, amelyen elindulhatok?

köszönöm!
 
1

Támpontok

N0r3i · 2008. Jan. 4. (P), 13.38
Guglizz rá: html dom javascript

A második találat már egy egészen jó referenciára mutat:
http://www.w3schools.com/htmldom/dom_reference.asp

Kérdezz pontosabban, pontosabb választ kaphatsz!

Norbi
2

kerestem

kalamona · 2008. Jan. 4. (P), 17.04
igen, de ez még önmagában csak dom referencia. biztosan találtam volna sok mindent sok idő alatt, de mivel nem tudtam igazán jó keresést produkálni, itt kérdeztem meg mert sokkal gyorsabb és pontosabb, ha valaki aki már csinált ilyet ad néhány jó linket. köszönöm is a választ!
nem tudom mire van szükségem (mi a neve a módszernek), ezért nem kérdeztem pontosabban.
új formelemek hozzáadását szeretném megvalósítani, de a form kitöltése közben élőben. pl nevek felvitele. akárhány név lehetséges, egy új név linkre kattintva lehetne új input boxot hozzáadni. meg lenne mellettük egy kis törlés felirat is, azzal meg eltávolitani. ha kész a névsor akkor kattintana a submit gombra.
3

ezek mind megoldhatóak hagyományos javascripttel

Thoer · 2008. Jan. 4. (P), 20.46
de szerintem sokkal értelmesebb kiválasztani egy komoly javascript frameworköt és tanulmányozni, használni. Az eredmény ugyan valamivel nagyobb lesz, de minden más szempontból sokkal jobb.

Pl Mootools-al ez kb ennyi:
HTML:
<form >
  <input name="input_nev1" id="input_id1">
  <input name="input_nev2" id="input_id2">
  <input type="submit" id="add_new_element" name="add_new_element">
  <input type="submit" id="process_form" name="process_form">
<!-- Javascript nélkül betöltünk egy újabb nevet -->
</form>


Javascript:

function addNewElement(e){ // függvény az új input létrehozásához
  
  var new_element = new Element('input');  // létrehozzuk az új input mezőt

  new_element.setProperties({  //beállítjuk a mező tulajdonságait
    'type': 'text',
    'name': 'input_nev'+this.legnagyobb
  );

  new_element.injectBefore(this);  // beszúrjuk a DOM-ba a megfelelő helyre
  this.legnagyobb++;

  e = new Event(e).stop();  // leállítjuk az eredeti form elküldését

}

window.addEvent('domready', function(){   // betöltés után, de megjelenítés előtt aktiválódó függvény

  var mybutton = $('add_new_element');    // megkeressük a gombot ami az elemek beszúrását végzi

  mybutton.legnagyobb = 2;  // megadjuk a már létező mezők számát

  mybutton.onclick = addNewElement.bindAsEventListener(mybutton);  // hozzárendeljük a függvényt a gombhoz

});
Persze mindezt tudja minden komolyabb javascript framework. (DoJo, jQuery, Ext, prototype + scriptaculous ,stb...)
4

ajaj...

kalamona · 2008. Jan. 5. (Szo), 00.37
...ez beleásós dolog lesz, már látom.
jól hangzik, meg jó ötlet, meg köszi, de nem tudom megéri e ezért az egy verébért beélesíteni az ágyút.
mi most a menő js fw fronton? nem követtem az eseményeket az utobbi másfél évben. akkor a prototype volt populáris meg a jquery. most melyek? mik az erősségeik, érveik egymáshoz viszonyítva?
5

yui, jquery, dojo, prototype

kalamona · 2008. Jan. 6. (V), 19.45
ezt a listát sikerült egyelőre kitermelnem. ezek közül viszont nem tudok objektive dönteni a kevés időm miatt, haladni kellene a projektnek...
melyikhez kell a legkevesebb rákészülés? próbált valaki többet is közülük?

hm... yui, jquery, dojo, prototype...
6

Van még az extjs és a mootools.

Fraki · 2008. Jan. 7. (H), 01.31
Van még az extjs és a mootools. Egyikre sem kell külön rákészülni, ha csináltad már az egyikkel, a másikokkal is olyan lesz. Én korábban prototype-ot használtam, kisebb szájtoknál mostmár mootoolst, mert szépen össze lehet kattintgatni a szükséges komponenseket; és az extjs sem ördöngős, a demókról könnyű másolni.

Azért nem árt figyelembe venni a fajsúlyukat (zárójelben amiket nem használtam, lehet, rossz helyre sorolom őket):
- extjs (és yui) „heavy” kategória, komplett widgetkészletek, elsősorban adminfelületre használatosak sztem.
- prototype (s talán jquery) középmezőny, sok rájuk épülő komponenst írogatnak
- mootools (s talán dojo) lite kategória
7

hát...

Hodicska Gergely · 2008. Jan. 7. (H), 11.22
Egyikre sem kell külön rákészülni, ha csináltad már az egyikkel, a másikokkal is olyan lesz.
Ez az extjs-ről nem igazán mondható el. Többen is használták a környezetemben, és az elindulás kifejezetten vesződséges vele, ráadásul pár hónapja még az új verzió doksija nem igazán volt jó, mindkét fejlesztőtő azt mesélte, hogy elég gyakran bele kellett nézni a forrásába. Amire nincs konkrét példa, azt kűzdős vele megcsinálni.

Én korábban prototype-ot használtam, kisebb szájtoknál mostmár mootoolst, mert szépen össze lehet kattintgatni a szükséges komponenseket;
A mootools nekem egyenlőre nem igazán szimpi, talán túlságosan is fapados, és a doksija is elég sajátságos. Most az az összekattintgatós dolog szeritem alapvetően a parasztvakítás része a dolgoknak (persze minimálisan hasznos lehet), de egy betömörített jquery sem túl nagy (és általában nem a fálj leszedése a sok idő ilyen méreteknél, hanem a kapcsolódás), viszont lényegesen használhatóbb. Kiforrottabb is, és lényegesen kevesebb kóddal lehet benne ugyanazt elérni.

(s talán dojo) lite kategória
A dojo messze az egyik legösszetettebb ezek közül. Nem használtam még, de egy időben sokat olvasgattam róla, van benne egy csomó érdekes koncepció. Pl. az eseménykezelése is érdekes, akár AOP jeleggel is lehet vele programozni, plusz ott vannak olyan jóságok, mint pl. a dojo.storage. Egy elég jó koponya a fejlesztője, kb. az volt a céljuk, hogy egy enterprise ready cuccot csináljanak, amivel ténylegesen lehet komoly alkalmazásokat építeni.


Üdv,
Felhő
8

jQuery

Hodicska Gergely · 2008. Jan. 7. (H), 11.25
Szerintem nézd meg ezt, nagyon jól ki van találva főleg az alapja. Nagyon jó tömören lehet benne megfogalmazni dolgokat. A pluginek egy része már nem olyan profi, de lehe jókat találni. Van hozzá könyv is, de a doksija is nagyon jó.

Annó még talán itt írta valaki, hogy azt vette észre, hogy ami korábban oldalnyi JS kód volt, az prototype-pal pár sor lett, majd amikor átírta jQuery-re, akkor egy sor lett.


Üdv,
Felhő
9

oké!

kalamona · 2008. Jan. 7. (H), 16.31
köszi szépen mindenkinek, pont ilyesmikre gondoltam, light/heavy! :)
dojo-t használt valaki közületek? tényleg jó gondolatok vannak benne, csak át kéne látnom rendesen.

nekivágok először jquery-vel, aztán majd még meglátom. szerintem boldogitalak még benneteket.
10

comparing open-source ajax frameworks

Fraki · 2008. Jan. 7. (H), 22.48
http://www.nickbouton.com/archives/2007/12/11/comparing-open-source-ajax-frameworks/