ugrás a tartalomhoz

jquery currentScript.parent megoldás létezik?

gtoma · 2016. Május. 26. (Cs), 10.36
Sziasztok!

szembekerültem egy problémával, nem találok megoldást, hátha van 5letetek.

A felület amit csinálok ajax alapú. jQueryt használok.

A formok ajaxban érkeznek, és értelem szerűen vannak form elemek, amikhez scriptek csatlakoznak. pl.:
<select id="kacsasult"><option>Akármi</option></select>
<script>$("#kacsasult").select2()</script>
Teljesen jól működik, de belefutottam, hogy vannak olyan form elemek, melyeket ismételni kell, ha a user többet visz fel. pl.: számlánál a termékek.

A megoldás kézenfekvő. Az ilyen elem blokkokat beteszem egy divbe, és clónozom, a megfelelő eseményre - pl megnyom egy "új" gombot.

igen ám, de klónozáskor 2 ugyan olyan id lesz, ami szétüti a dolgot.
Erre megoldásként azt találtam ki, hogy jó lenne a scripteknél a célzást valahogy így megadni:
<script>$.parent("#kacsasult").select2()</script>
ahol is a $.parent egy saját funkcó lenne. Megkeresné hol van az éppen futó script tag, annak a parentjét keresné, és azon BELÜL findelné a #kacsasult -et.

Sajnos azonban vagy rosszul keresek, vagy nincs olyan lehetőség, hogy egy éppen futó <script> tag helyét megtaláljam a dom ban.

Ötletek rá?
 
1

Szerintem jobb lenne, ha azt

Endyl · 2016. Május. 26. (Cs), 11.00
Szerintem jobb lenne, ha azt írnád le, hogy pontosan mit szeretnél elérni, nem pedig azt, hogy hogyan, mert könnyen lehet, hogy valami miatt nem megfelelően indultál neki és már nem látod a fától az erdőt.

Például arra ne keress megoldást, hogy hogyan lehet egyszerre több elemnek ugyanaz az id-je, mert nem arra való. Ha több elemet ugyanazzal az "azonosítóval" kell előkeresni, arra a class a megfelelő eszköz.
2

Benne volt, de kiemelem jobban

gtoma · 2016. Május. 26. (Cs), 11.21
Ismétlődő form elemeknél: pl. számlán a termékek felvitele, egyszerű klónozással szeretnék létrehozni új elemeket.
<div id="ismétlendő">
     <label>Termék:</label>
     <select id="lehetneClassIs" name="termék"><option>Termék lista</option></select>
     <input type="number" name="price">
     <script>$("#lehetneClassIS").select2()</script>
</div>
<button onlcick="javascript:$("#ismétlendő").clone().after("#ismétlendő")">Még 1 termék felvitel</button>
Működés:
A "Még 1 termék felvitel" gombra kattintva klónozza az eredetit, és csinál egy új felviteli lehetőséget. És persze az új [name=termék] -re ráakaszkodik a select2 inicializálás. És CSAK arra. ;)

A probléma ott van, amit te kiemeltél. De nem megoldás CLASS ra cserélni a select2 célzását, mert az ráakaszkodna a már meglévő [name=termék] re is.
6

Azt a script elemet

Endyl · 2016. Május. 26. (Cs), 11.48
Azt a script elemet felesleges klónoznod. Amikor klónozol egy elemet, akkor van rá hivatkozásod és kereshetsz azon belül.

function addAnotherElement() {
  // egyéb utasítások...
  var $clonedElement = $('#template').clone();
  $('.legyenClass', $clonedElement).select2();
  // további utasítások...
}
7

Sajnos nem fog menni

gtoma · 2016. Május. 26. (Cs), 13.11
Mert a php-s form generátort még jobban át kellene alakítsam csak emiatt, mint abban az esetben, ha cseréltetem az id-ket js-ben.
8

Miért kell ahhoz nagy

Endyl · 2016. Május. 26. (Cs), 13.29
Miért kell ahhoz nagy átalakítás, hogy egy elemhez class-t adj id helyett, és ne szemeteld tele az oldalt felesleges script tagekkel?
9

Hát ehhez sokat kellene írnom. :)

gtoma · 2016. Május. 26. (Cs), 13.56
Ezért inkább bele sem kezdek. De sokat kellene variálni, ezt most hidd el nekem. :)

Azért még picit várok, hátha van valami ilyesmit:
itt

tud ajánlani valaki.
13

Én lehet azt csinálnám a

smokey · 2016. Május. 26. (Cs), 21.14
Én lehet azt csinálnám a helyedben, hogy nem a formot klónoznám, hanem amikor megnyomom az Új hozzáadása gombot, akkor a létrehozós form inputjaiból kiszedném az adatokat, azt eltárolnám valahol, mondjuk egy tömbben (és persze beszúrnám a DOM-ba az új elemet, hogy látszódjon), kiüríteném a formot, és ennyi. Ezzel a form egyedi működése - vagyis a létrehozás - megmaradt és nem kellett duplikálni/klónozni semmit.
15

Az egyetlen értelmes

bamegakapa · 2016. Május. 27. (P), 01.56
Az egyetlen értelmes megoldásnak azt látom, ha nem engeded, hogy ilyen közbeszúrt script tegek szennyezzék a kódot. Ha maradnak, az csakis a pokol legsötétebb bugyrai felé vezet :). Jártam ott és nem egy népünnepély.

Helyette ráraksz a selectre mondjuk egy "oh_please_call_select2_on_me" nevű classt, az AJAX hívás után pedig meghívsz egy függvényt, ami inicializálja a megfelelő jQuery plugineket, class alapján. Ugyanezt a függvényt meghívod klónozás után is. Az idket kukázod.

Gyorsan összedobtam egy occsó kis demót.

Kisbetűs rész: az onclick attribútumban és társaiban a "javascript:" nem jó semmire. Oda alapból Javascriptet ír az ember.
3

Sajnos nincs scope-os id

zzrek · 2016. Május. 26. (Cs), 11.22
Én is találkoztam hasonló problémával, amikor jól jött volna, ha a DOM lehetőséget adott volna egy adott html elemen belüli egyedi azonosítóra, de nincs ilyen. Például lehetne egy olyan tulajdonság, aminek nem az egész dokumentumban, hanem csak az adott elemen belüli szinten kellene egyedinek lenni, nevezzük ezt localid-nek. Ekkor a document.getElementById-hez hasonlóan lehetne egy barmilyenhtmlelem.getElementByLocalId is, és ez sokat segítene. De ilyen nincs.
Az adott esetben 2 javaslatom van:
1: Amikor megjön a form ajaxban, még stringként, cseréld le benne regexp-pel az id="kacsasult" szöveget valamire, ami mindig egyedi lesz.
2: Akkor cseréld le az id-t, miután klónoztad, még mielőtt visszatennéd a végleges helyére a DOMban.

Így nem lesz soha két egyforma ID-d, és tudod azonosítani egyértelműen.
4

Igen, ez az egér út

gtoma · 2016. Május. 26. (Cs), 11.32
Az a bajom, hogy logikátlanul kell variálnom a php form készítőt, és csak akkor akarok gányolni, ha nincs más út.
12

Már akkor

zzrek · 2016. Május. 26. (Cs), 16.42
Már akkor logikátlanul variálod, amikor klónozni kényszerülsz, ha jól értem...
5

Ekkor a

Endyl · 2016. Május. 26. (Cs), 11.34
Ekkor a document.getElementById-hez hasonlóan lehetne egy barmilyenhtmlelem.getElementByLocalId is, és ez sokat segítene. De ilyen nincs.


Pedig van, és ahogy írtam, erre tökéletesen jó a class (vagy bármilyen tetszőleges dolog, amivel a DOM adott elemét le lehet kérdezni, a célnak megfelelően): element.querySelectorAll(). És jQueryben is ugyanígy lehet szűkíteni a kereséseket adott elemre.

De még az element.querySelectorAll()-ra és társaira sincs feltétlenül szükség, mert a documentre hívva is remek eredményt adhat egy ilyen kiválasztó: #some-parent > .some-child.

Szerk.:
Az element.querySelectorAll() előnye, hogy ha támogatja a böngésző, akkor a közvetlen gyerekek lekéréséhez nem kell tudni egy csak a szülőre illeszkedő kiválasztót, hanem lehet használni a :scope pseudoclasst is: :scope > .some-child
11

Persze

zzrek · 2016. Május. 26. (Cs), 16.41
Persze, nem vitattam, hogy a class jó ilyesmire, de eredetileg nem arra találták ki, hogy egyedileg azonosíts egy elemet egy másikon belül. Olyan nincs, ami direkt erre lenne hivatott. Mondhatnám azt is, hogy semmi szükség az azonosítóra, mert a dom struktúra adott, tehát lemehetsz addig az elemig mindenféle azonosító nélkül is, ameddig akarsz :-)
10

template

Hidvégi Gábor · 2016. Május. 26. (Cs), 14.02
16

Nem teljesen,

gtoma · 2016. Május. 27. (P), 07.44
De úgy tűnik, ilyen irányba kell mennem. :)
14

Üdv! Nekem csak tippem van

Karvaly84 · 2016. Május. 27. (P), 00.18
Üdv!

Nekem csak tippem van mit is szeretnél, de ha az jó, akkor szerintem újra kell gondolnod ezt az egész dolgot mert ebből nagy gányolás lesz...

Feltételezem olyasmit szeretnél, hogy ha a felhasználó rendel egy jó rántott sajtot tegyük fel, akkor legyen lehetősége hozzá tartárt is kérni. Tehát a lista amiről rendel mindig ugyan az, és ha ki választ egy tételt akkor legyen lehetősége újabb tételeket kiválasztani.

Úgy látom az a probléma, hogy nem tudod, hogy szúrj be úgy új option elemet, hogy az ne akadjon össze egy már meglévővel.

Készíts egy bevásárló kosarat ami session id alapján tárolja hányadig elem kerül a kosárba (legyen lehetőség ki venni is) és PHP-ben ennek megfelelő kimenetet gyárts.

Ez alatt azt értem, hogy pl mindig jön egy option AJAX-on amiknek a name jellemzőjét az alapján generálod le, hogy hány cuccot pakolt a kosárba, a value érték meg ami alapján számlázol a termék azonosítója pl. Ennek a logikai résznek nem kliens oldalon jsben kel megvalósulnia amit csinálsz. Szóval írj egy API-t amit csak hívogatsz (betesz, kivesz, fizet)

A betesz - berak egy új option-t a formba
A kivesz - kiveszi onnan
A fizet - meg elküldi a formot
17

Köszönöm mindenkinek, az ötletelést!

gtoma · 2016. Május. 27. (P), 08.04
Sajnos úgy tűnik, hogy amit én szerettem volna az nem működik. :(

Karvaly: Nem teljesen, azt tudom hogy készítsek egy szerver oldali megoldást, és nem szeretnék újból és újból szerver oldalról töltögetni.

Az igazsághoz hozzátartozik, hogy kritikus hozzáállásom az ilyen problémákhoz az Angularral függ össze, mert mióta azt elkezdtem tanulmányozni (és sajnos ezt a projektet nem azzal csinálom) azóta kicsit átalakult az MVC gondolkodásom. :) Egyszerűen zavarnak az ilyen összevissza kliens-szerver megoldások.

Nincs para, legközelebbi projektemnél már csak a Model lesz szerver oldali, a View és a Controller kliens oldali lesz. Nem is csoda a php-s megoldás akadozik, hiszen az nincs közvetlen kapcsolatban a megjelenítővel. :(

Jelen pillanatban egy egyszerű megoldást fogok használni. A php form generátorba építek egy független class-t, aminek átadok egy HTML forrás elérést és adat listát és csupán ennyit printel a php. Így kiemelem a szerver oldali renderelésből az ilyen form elemeket. A forrást javascript betölti mint template, és egy kliens oldali template kezelővel megoldom a felépítést, és dom-ba fűzést.