Autor Zpráva
stepanka
Profil *
Ahoj,

nevím jestli napsat sem, nebo do sekce Javascript. Případně se omlouvám administrátorům, ale zkusím to sem.
Moderátor Chamurappi: Přesouvám z kategorie PHP.

Chtěla bych poprosit o pomoc. Začínám s jQuery a používám ho ve formuláři pro přidávání inputů. Mám kód, který mi po kliknutí na odkaz inputy vytvoří, a potřebovala bych taky odkaz, který mi po kliknutí na něj inputy schová.

ZDE je živá ukázka.

Kód funkce klienti.js je

$(document).ready(function(){
  
  $("#muj_odstavec a").click(function(){
      $("#pridane_inputy").append('<table style="text-align:right;"><tr><td>Jméno: <input type="text" name="jmeno[]" value=""></td><td>Příjmení: <input type="text" name="prijmeni[]" value=""></td></tr><tr><td>Pozice: <input type="text" name="pozice[]" value=""></td><td>Telefon: <input type="text" name="telefon[]" value=""></td><td>E-mail: <input type="text" name="email[]" value=""></td></tr></table><br /><br />');  
  })
 
});

Zbytek se dá zobrazit ze zdrojového kódu stránky.

Potřebovala bych ke každé sadě 5ti vkládaných inputů zobrazit také odkaz "Odebrat", který by dané inputy schoval. Už jsem zavedla i metodu pokus-omyl, ale nedaří se :(

Budu moc ráda za jakékoliv rady. Předem děkuju.
ah01
Profil
Na tom celkem nic není, tady máš příklad:

http://jquery.jslab.net/zkousecka/#bba8715b872b5f92ee7891dff7be02a6

Uprav si ho dle svých představ.
stepanka
Profil *
ah01

Moc děkuju za reakci. Upravila jsem si to a funguje to dobře. Ale ... když vytvořím několik inputů a dám reload stránky, všechny zmizí. Když je taková věc ve formuláři a uživatel nevyplní správně některé pole, musel by tyto inputy přidávat a vyplňovat znovu..

Neumí to jQuery přidané inputy na stránce ponechat i při reloadech, až dokud uživatel sám neklikne na Odebrat?

Živá ukázka je opět ZDE

Mockrát děkuju.
jso
Profil *
stepanka
nejde o jQuery, ale o js, který za tím vším je. Pokud aktualizujete stránku, dojde k defaultnímu vykreslení tak, jak byl uživatel na začátku. Šlo by to řešit například pomocí ukládání cookie (session) a "vykreslení" inputů do stavu, který předcházel reloadu. Buď pomocí js nebo serverového jazyka.
stepanka
Profil *
jso
Ok, děkuju, čekala jsem, že toho budu chtít moc :-) Udělám to přes PHP... ještě jednou díky.
stepanka
Profil *
Ehm ... ještě problém :(

Do formuláře jsem si vložila:

	if (isset($_POST['jmeno']))
		{
		for ($i=0; $i<count($_POST['jmeno']); $i++)
			{
			
			echo '<div id="odebrat_vlozeny_div">
				<table style="text-align:right; float:left;">
					<tr>
						<td>Jméno: <input type="text" name="jmeno['.$i.']" value="'.$_POST['jmeno'][$i].'"></td>
						<td>Příjmení: <input type="text" name="prijmeni['.$i.']" value="'.$_POST['prijmeni'][$i].'"></td>
					</tr>
					<tr>
						<td>Pozice: <input type="text" name="pozice['.$i.']" value="'.$_POST['pozice'][$i].'"></td>
						<td>Telefon: <input type="text" name="telefon['.$i.']" value="'.$_POST['telefon'][$i].'"></td>
						<td>E-mail: <input type="text" name="email['.$i.']" value="'.$_POST['email'][$i].'"></td>
					</tr>
				</table>
				<br /><a href="#" id="odebrat_vlozeny_input">odebrat</a><br /><br /><br /><br />
			</div>';
			}
		}


A do JS jsem připsala

  $("#odebrat_vlozeny_input").click(function(){
  	var odebrat_div = $("#odebrat_vlozeny_div");		
	odebrat_div.remove();
  });



Funguje to celkem dobře, jen po kliknutí na Odebrat po reloadu stránky se dá odebrat pouze první DIV, ostatní DIVy na kliknutí nereagují..

Kdyby mi ještě někdo poradil, byla bych moc vděčná.

Díky.
Nox
Profil
stepanka
Nemá být id na stránce jen jednou?
Ono na to třeba prohlížeče kašlou, ale nevim jestli to jQuery nezohledňuje a vzhledem k tomu, že je selektor parsovaný při přiřazování zpracovávající funkce a ne až při akci, tak je možné, že na dalších idčkách už ta funkce přiřazena není

Mj. jde to přepsat hezčeji

$(".vlozeny_input").click(function(){
      $(this).remove();
  });
stepanka
Profil *
Nox

Děkuji za reakci.

Dá se tedy jQuery nějak říct, aby počítal s daným DIVem, za kterým následuje nějaké číslo?

DIV a odkaz v PHP jsem upravila takto:

<div id="odebrat_vlozeny_div_'.$i.'">

<a href="#" id="odebrat_vlozeny_input_'.$i.'">


A do JS se pokouším nacpat něco ve smyslu:

  $("#odebrat_vlozeny_input_"+i).click(function(){		
  	var odebrat_div = $("#odebrat_vlozeny_div_"+i);		
	odebrat_div.remove();
  });


Ale odkazy nereagují. Našla jsem na webu cykly FOR a FOREACH pro jQuery, ale ani po necelé hodině se mi to nepovedlo zprovoznit.

Budu moc ráda, pokud mi ještě někdo poradí. Je to poslední věc, která mi v tom formuláři nejde.

Děkuju.
Nox
Profil
stepanka
Vždyť už jsem ti napsal funkční skript...

tedy netestoval jsem ho, ale myslím že funguje a vypadá taky líp (proč znova ve funkci vybírat a navíc ještě přes zbytečnou pomocnou proměnnou,
navíc si myslím že to "i" se tam nezapeče, ale bude se při každým volání zjišťovat aktuální hodnota, čímž to nebude fungovat)
stepanka
Profil *
Nox

No, každopádně moc děkuju, ale nevím, jestli mě dobře chápeš. Vytvořila jsem radši živou ukázku

Pokud přidám nějaké inputy a kliknu na uložit, zůstanou na místě, což je super. Ale pak už nejdou odebírat.

Vložila jsem tam Tvůj kód:

  $("#odebrat_vlozeny_input").click(function(){
      $(this).remove();
  });


ale dělá jen to, že nechá zmizet pouze první odkaz "Odebrat".
Nox
Profil
No nepřečetla sis asi co jsem psal...a to jak jsem ten skript psal s tím souvisí, takže uprav výstup skriptu podle mého, ne naopak (no to "odebrat_" tam zůstat může)
stepanka
Profil *
Nox

No nepřečetla sis asi co jsem psal..
Právě to čtu pošesté :-)

V tom Tvém třířádkovém skriptu se díky this odstraní ten prvek, na který klikneš. A já bych potřebovala kliknout na odkaz "Odebrat" a nechat tím zmizet celý DIV u tohoto odkazu. Takže to this mi tam logicky ani nesedí. A ani mi to bohužel nefunguje.

Živou ukázku jsem dala, skripty jsou zde klienti.js a index.php

Tvůj kód je tam použitý (pouze s pozměněným názvem DIVu).

Nevím kde je chyba - buď si extrémně sedím na vedení, nebo jsi špatně pochopil můj problém. Moc si vážím toho, že se mi snažíš poradit, ale Tvůj "funkční" skript se mi jako moc funkční nejeví :-( Ale i tak moc díky.
stepanka
Profil *
Jooo, mám to :-) Kdesi jsem se dočetla, že pokud mám na stránce více DIVů se stejným ID, nesmím použít ID, ale CLASS. Taky jsem pozměnila JS skript na tento

  $(".odebrat_vlozeny_input").click(function(){
      $(this).parent().remove();
  });


tím pádem se bere rodičovský prvek a můžu použít this. Takže už mi to funguje, to je fajn..
jso
Profil *
stepanka
ano, „pokud mám na stránce více DIVů se stejným ID, nesmím použít ID, mezi id a class není "žádný" rozdíl, jen ten, že id se může na stránce vyskytovat maximálně jednou, oproti tomu se třída může vyskytovat několikrát.
Radim24
Profil
Problém se zmizením prvků by měl jít vyřešit pomocí přesměrování stránky. Když na adrese http://www.domena.cz/index.php? přidáš argumenty, které ti budou definovat ty vytvořené prvky, tak pak bys ty argumenty mohla zpracovat javascriptem a vytvořit políčka znovu pomocí js.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0