JS dinamikus input VS Firefox

PredMan · 2008. Már. 15. (Szo), 15.52

van ez a kód, ami DIV-be tölti be dinamikusan az inputokat. A gond az, hogy a FF új inputok létrehozásánál elfelejti az előző inputok tartalmát:


<script language="javascript">

	var x = 0;

	function changeIt() {
	var i = 1;

	x++;

	var my_div = document.getElementById("my_div");
	my_div.innerHTML = my_div.innerHTML +"<input type='text' name='jellemzo[]' id='jellemzo"+x+"' size='30'>&nbsp;&nbsp;<input type='text' name='meret[]' size='20' value='&Oslash;'>&nbsp;&nbsp;<input type='text' name='egyseg[]' size='10'>&nbsp;&nbsp;<input type='text' name='nettoar[]' size='10' onKeyPress='return numbersonly(this, event);'><br>";
	setTimeout('berak()',100);

	}

	function berak() {
         document.getElementById('jellemzo'+x).focus();
         }

</script>

IE-ben minden OK, de a FF elfelejti a beírt adatokat. Hogyan lehetne ezt kiküszöbölni? próbálkoztam a createElement függvénnyel ami működik is, de azzal meg az a gond, hogy azt csak külön formba tudom betölteni, de egy formom már van és nem szeretném megbojgatni az oldal szerkezetét.

segítségeteket előre is köszönöm!

■

HTML, CSS, JavaScript, Ajax

csirip

Sziasztok!

PredMan · 2008. Már. 16. (V), 09.44

eddig jutottam a kódolásban, de a böngésző consolja ezt írja ki:

"jellemzo0 nincs definiálva".


<script language="JavaScript">

darab = 0;

function uj() {
	var regijellemzo=new Array;
	var regimeret=new Array;
	var regiegyseg=new Array;
	var reginettoar=new Array;

	for (i=0;i<=darab;i++) {
		eval("regijellemzo[i]=document.form.getElementById(jellemzo"+i+".value)");
		eval("regimeret[i]=document.form.getElementById(meret"+i+".value)");
		eval("regiegyseg[i]=document.form.getElementById(egyseg"+i+".value)");
		eval("reginettoar[i]=document.form.getElementById(nettoar"+i+".value)");
	}

	darab++;

	regijellemzo[darab]="";
	regimeret[darab]="";
	regiegyseg[darab]="";
	reginettoar[darab]="";

  	ki='<table cellpadding="3"><tr><td align="center"><b>Jellemző</b></td><td align="center"><b>Méret</b></td><td align="center"><b>Egység</b></td><td align="center"><b>Nettó ár</b></td></tr>';

  	for (i=0;i<=darab;i++) {
  		ki+= '<tr><td><input type="text" name="jellemzo[]" id="jellemzo'+i+'" value="'+regijellemzo[i]+'" size="30"></td><td><input type="text" name="meret[]" id="meret'+i+'" value="'+regimeret[i]+'" size="20"></td><td><input type="text" name="egyseg[]" id="egyseg'+i+'" value="'+regiegyseg[i]+'" size="10"></td><td><input type="text" name="nettoar[]" id="nettoar'+i+'" value="'+reginettoar[i]+'" size="10" onKeyPress="return numbersonly(this, event);"></td></tr>\n';
	}

  	ki+='</table>';

  	document.getElementById('elemek').innerHTML=ki;

	
}

</script>

és ahol meghívom a DIV:


<div id="elemek">
				<table cellpadding="3"><tr><td><input type='text' name='jellemzo[]' id="jellemzo0" size='30'></td><td><input type='text' name='meret[]' id='meret0' size='20'></td><td><input type='text' name='egyseg[]' id='egyseg0' size='10'></td><td><input type='text' name='nettoar[]' id='nettoar0' size='10' onKeyPress='return numbersonly(this, event);'></td></tr></table>
			</div>

szerintem a getElementById-n akad ki, csak nem értem miért...

segítségeteket előre is köszönöm!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Valószínűleg!

Velias9 · 2008. Már. 17. (H), 17.49

Szerintem is jó a sejtésed, miszerint a getElementById() a rossz. És tudod miért? (Nyilván nem, különben nem kérdezted volna:) ) Azért, mert nem ezt:


"regijellemzo[i]=document.form.getElementById(jellemzo" + i + ".value)"

, hanem ezt:


"regijellemzo[i]=document.form.getElementById(jellemzo" + i + ").value"

kéne használnod az eval() függvényben, meg azon kívül is, ha esetleg ez előfordul.

Ezen kívül a saját érdekedben jobban jársz, ha abbahagyod az (pl.) onKeyPress-nek ezt a formáját és a szabványos, kisbetűs (onkeypress) formáját használod. Amúgy ez vonatkozik az összes eseménykezelőre.

Ha ez nem működne, akkor én csináltam egy jQuery alapú ilyen műveletet végző programot és az működik. A hátránya, hogy kicsit lassabb, mint egy hagyományos JavaScript.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

:(

PredMan · 2008. Már. 17. (H), 18.55

hát így se jó a kód. Megköszönném, ha megmutatnád azt a kódot, hátha az jobb lesz. A tanácsodat pedig megfogadom és mostantól kisbetűsen írom ezeket a parancsokat!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Mi a hiba?

Velias9 · 2008. Már. 18. (K), 18.26

Most miért nem jó a program?
Amúgy megmutatom a kódot, csak meg kell keresnem és kíváncsi vagyok a hibára. Az előző hibajelzés alapján ez volt a hiba.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

sikerült!

PredMan · 2008. Már. 19. (Sze), 07.30

köszi a segítséget, rájöttem a problémára! egyrészt az volt a gond, amit mondtál, aztán még a kódon kívül is volt egy apróság, ahol meghívtam magát az uj() függvényt. Kijavítottam azt is, most már frankón működik a kód. De azért kíváncsi lennék a Te változatodra is, hátha logikusabb, átláthatóbb.

mégegyszer thx!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Meg fogom írni.

Velias9 · 2008. Már. 19. (Sze), 17.04

Ígérem, hogy el fogom küldeni, de most sietek, úgyhogy majd később. Addig is jó szórakozást!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Tessék a script

Velias9 · 2008. Már. 20. (Cs), 14.18

Ez itt az eredeti verzió átdolgozva a te esetedre:


function uj()
{
	var azonosito = $("#elemek > input[@name='jellemzo[]']:last").id()
	var seged = (parseInt(azonosito.substring((azonosito.indexOf("o") + 1), azonosito.length)) + 1); // Kinyerem az utolso 'id' számát
	$("#elemek").height($("#elemek").height() + 22);
	$("#elemek > input[@name='jellemzo[]']:last").clone().appendTo("#elemek"); // Lemásolom az utolsó 'jellemzo[]' nevű elemet
	$("#elemek > input[@name='jellemzo[]']:last").id("jellemzo" + seged); // Ez már a másolat, az 'id'-jét megnövelem
	$("#elemek > input[@name='jellemzo[]']:last").val(""); // A tartalom is másolódik => nullázom

	var azonosito = $("#elemek > input[@name='meret[]']:last").id()
	var seged = (parseInt(azonosito.substring((azonosito.indexOf("t") + 1), azonosito.length)) + 1); // Kinyerem az utolso 'id' számát
	$("#elemek > input[@name='meret[]']:last").clone().appendTo("#elemek"); // Lemásolom az utolsó 'meret[]' nevű elemet
	$("#elemek > input[@name='meret[]']:last").id("meret" + seged); // Ez már a másolat, az 'id'-jét megnövelem
	$("#elemek > input[@name='meret[]']:last").val(""); // A tartalom is másolódik => nullázom

	var azonosito = $("#elemek > input[@name='egyseg[]']:last").id()
	var seged = (parseInt(azonosito.substring((azonosito.indexOf("g") + 1), azonosito.length)) + 1); // Kinyerem az utolso 'id' számát
	$("#elemek > input[@name='egyseg[]']:last").clone().appendTo("#elemek"); // Lemásolom az utolsó 'meret[]' nevű elemet
	$("#elemek > input[@name='egyseg[]']:last").id("egyseg" + seged); // Ez már a másolat, az 'id'-jét megnövelem
	$("#elemek > input[@name='egyseg[]']:last").val(""); // A tartalom is másolódik => nullázom

	var azonosito = $("#elemek > input[@name='nettoar[]']:last").id()
	var seged = (parseInt(azonosito.substring((azonosito.indexOf("r") + 1), azonosito.length)) + 1); // Kinyerem az utolso 'id' számát
	$("#elemek > input[@name='nettoar[]']:last").clone().appendTo("#elemek"); // Lemásolom az utolsó 'meret[]' nevű elemet
	$("#elemek > input[@name='nettoar[]']:last").id("nettoar" + seged); // Ez már a másolat, az 'id'-jét megnövelem
	$("#elemek > input[@name='nettoar[]']:last").val(""); // A tartalom is másolódik => nullázom

	$("#elemek").append("<br />");
}

Ha nem akarod nullázni a 'value' tulajdonságot, akkor azt a sort kihagyod.

Azonban ez neked nem biztos, hogy jó lesz, mert a kódod alapján táblázatba kéne mindez. Erre itt van egy nem letesztelt kód:


function uj()
{
	var cellak = $("#elemek > table > tbody > tr:last > td"); // A táblázatban az utolsó sor celláit kijelölöm
	var azonositok = new Array('jellemzo', 'meret', 'egyseg', 'nettoar'); // Létrehozok egy kézöbb kellő tömböt
	var i; // Csak azért hozom külön létre (amúgy nem kéne), mert ha nem teszem, akkor globális változó lesz és bezavarhat, vagy valami
	$("#elemek > table > tbody").append("<tr></tr>"); // Hozzáadok még egy sort
	for (i = 0; i < 4; i++)
	{
		$(cellak[i]).clone().appendTo($("#elemek > table > tbody > tr:last")); // A script elején kijelölt cellák közül egyet átmásolok az új sorba
		$("#elemek > table > tbody > tr:last > td:last > input").id(parseInt((azonositok[i]).indexOf((azonositok[i]).substring((azonositok[i]).length - 1))) + 1); // Megváltoztatom az 'id' értéket (az 'indexOf' függvényen belüli program az adott típus (pl.: 'jellemzo') utolsó betűjét keresi, mert utána már szám van)
		$("#elemek > table > tbody > tr:last > td:last > input").val(""); // A tartalom is másolódik => nullázom
	}
}

A 'value' nullázására az vonatkozik mint feljebb.
Ami fontos ebben a scriptben, hogy a 'table' elemen belül legyen egy 'tbody' elem is, mert a FireFox (tapasztalataim és a FireBug szerint) automatikusan oda teszi és ha nincs ott, akkor nem találja meg a jQuery az elemeket és kidobhatod az egészet.

Az általam használt függvények referenciáját itt találod meg és az általam használt jQuery csomagot (tudom, hogy van újabb is, de nekem múltkor nem működtek és nincs rá referenciám:( ) innen tudod letölteni.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

thx!

PredMan · 2008. Már. 20. (Cs), 20.54

köszönöm szépen! ez tényleg sokkal átláthatóbb!

még annyit, hogy ha én azt szeretném, hogy ezeknek a létrehozott inputoknak a neve ez legyen: "jellemzo[]", "meret[]" stb... /mint az eredeti kódomban/

akkor ha jól értettem a dokumentációt, így kell módosítani a kódot ugye?


$("#elemek > table > tbody > tr:last > td:last > input[@name='azonositok[]']:last").id(parseInt((azonositok[i]).indexOf((azonositok[i]).substring((azonositok[i]).length - 1))) + 1);

erre csak azért lenne szükség, hogy a PHP szkriptjében ne kelljen változtatnom.

mégegyszer kösz mindent!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nem.

Velias9 · 2008. Már. 21. (P), 12.42

Ha jól értettem az eredeti kódodat, akkor nem kell változtatnod azon amit én írtam.
Az én elképzelésem szerint a te forrásod valahogy így nézhet ki:


<html>
<head>
...
<style type="text/css">

.tablaFejlec
{
	text-align: center;
	font-weight: bold;
}

</style>
...
</head>
<body>
...
<table>
	<tbody>
		<tr>
			<td class="tablaFejlec">Jellemz&#337;</td>
			<td class="tablaFejlec">M&eacute;ret</td>
			<td class="tablaFejlec">Egys&eacute;g</td>
			<td class="tablaFejlec">Nett&oacute; &aacute;r</td>
		</tr>
		<tr>
			<td><input type="text" name="jellemzo[]" id="jellemzo0" value="" size="30" /></td>
			<td><input type="text" name="meret[]" id="meret0" value="" size="20" /></td>
			<td><input type="text" name="egyseg[]" id="egyseg0" value="" size="10" /></td>
			<td><input type="text" name="nettoar[]" id="nettoar0" value="" size="10" onkeypress="return numbersonly(this, event);" /></td>
		</tr>
	</tbody>
</table>
...
</body>
</html>

A script, amit írtam hozzá így néz ki:


function uj()  
{  
	var cellak = $("#elemek > table > tbody > tr:last > td"); // A táblázatban az utolsó sor celláit kijelölöm  
	var azonositok = new Array('jellemzo', 'meret', 'egyseg', 'nettoar'); // Létrehozok egy kézöbb kellő tömböt  
	var i; // Csak azért hozom külön létre (amúgy nem kéne), mert ha nem teszem, akkor globális változó lesz és bezavarhat, vagy valami  
	$("#elemek > table > tbody").append("<tr></tr>"); // Hozzáadok még egy sort  
	for (i = 0; i < 4; i++)  
	{  
		$(cellak[i]).clone().appendTo($("#elemek > table > tbody > tr:last")); // A script elején kijelölt cellák közül egyet átmásolok az új sorba  
		$("#elemek > table > tbody > tr:last > td:last > input").id(azonositok[i] + parseInt($(cellak[i]).id().indexOf((azonositok[i]).substring((azonositok[i]).length - 1))) + 1); // Megváltoztatom az 'id' értéket (az 'indexOf' függvényen belüli program az adott típus (pl.: 'jellemzo') utolsó betűjét keresi, mert utána már szám van)  
		$("#elemek > table > tbody > tr:last > td:last > input").val(""); // A tartalom is másolódik => nullázom  
	}  
}

A script működése:


	1. A 3. sorban kijelöli a HTML forrás sorait 26-tól 29-ig és visszaad egy tömböt.
	2. A 4. sorban létrehoz egy tömböt, ami a késöbbi azonosítók számok nélkül.
	3. A 6. sorban létrehoz egy új sort, de nincsenek benne még cellák.
	4. A 7. sorban végigjárja a 'cellak' tömböt. A feltételnél a 4 helyére 'cellak.length'-et is írhattam volna, de ugyan az csak több művelet.
	5. A ciklus
		1. Az első cellát (jellemző) lemásolja és hozzáadja a legújabb sorhoz. Most ez a cella az utolsó sor utolsó cellája (még csak egy van). Majd növeli az 'id'-t és nulláza a 'value'-t.
		2. A második cellát (méret) lemásolja és hozzáadja a legutolsó sor végéhez. Most ez a cella az utolsó sor utolsó cellája (már kettő van). Majd mint az előzőnél.
		3. A harmadik cellát (egység) lemásolja és hozzáadja a legutolsó sor végéhez. Most ez a cella az utolsó sor utolsó cellája (már három van). Majd mint az előzőnél.
		4. Az utolsó (negyedik) cellát (nettó ár) lemásolja és hozzáadja a legutolsó sor végéhez. Most ez a cella az utolsó sor utolsó cellája (már négy van). Majd mint az előzőnél.

Ha ebből még nem derengene: azért nem kell megadni a típusát, mert mindegyik cellán belül csak egy 'input' van és a ciklus működését is nehezebbé tenné. Ezen kívül a végén a ':last' sem kell.

Még egy-két dolog:
Észrevettem egy hibát a programomban. Amikor az 'id'-t megváltoztatja az a sor totál sz*r, de itt már ki van javítva.
Ezen kívül (nem tudom, hogy melyik szabványt használod) az XHTML szabvány szerint az üres elemeket (aminek nincs lezárópárja (pl.: input, img, meta, link, base, br ...) ) XML szabványnak megfelelően ' />' módon kell lezárni ' >' helyett.
Plusz (csak tanács) a 'td' elemen belül az 'align="center"' és a 'b' elem használata telljesen mellőzhető egy (esetleg külső fájlban tárolt) CSS kóddal, ami jobban támogatott az XHTML szabvány szerint (pl.: a 'font' elem használata tilos lett és helyette CSS van), ezenkívül a CSS tud néhány dolgot, amiről a HTML álmodni sem merne.

Remélem értettem a kérdésedet és arra válaszoltam. Ha még mindíg nem OK valami, akkor írj. De amint már említettem a kód nem kipróbált.

Jó szórakozást!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Bocsi

Velias9 · 2008. Már. 21. (P), 12.45

Most vettem észre, hogy kifelejtettem az 'elemek' azonosítójú 'div' elembe rakni a 'table' elemet.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

thx!

PredMan · 2008. Már. 21. (P), 18.19

hű ez nagyon részletes segítség volt! köszönöm szépen a türelmedet! ez a megoldás sokkal átláthatóbb, főleg ilyen alapos magyarázattal!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés