| Autor | Zpráva | ||
|---|---|---|---|
| frauen Profil * |
#1 · Zasláno: 27. 1. 2011, 01:33:11
Zdravím,
potřeboval bych pomoci s přípravou jídelního a nápojového lístku, které by měly mít následující podobu: Jídelní listek: {Kategorie} - {Kategorie - doplňující info} {Číslo}. {Název} {Cena} {Stručný popis} Pokud bude vyplněn stručný popis, název se vyznačí tučně. U nápojového lístku to bude obdobné, akorát bude vynecháno číslo a nebude platit podmínka pro vyznačení názvu tučně. Představoval bych si to asi tak, že někde budou tlačítka: Přidat kategorii, Přidat položku. Po kliknutí se přidají příslušné položky. Při kliknutí na Přidat kategorii se přidá do formuláře: {input pro Kategorie} - {input pro Kategorie - doplňující info} Při kliknutí na Přidat položku se přidá do formuláře: {Číslo} {input pro Název} {input pro Cena} {textarea pro Stručný popis} Pozn.: Číslo - hodnota se vygeneruje automaticky podle aktuálního pořadí položky - 1. až n. Zároveň vedle každé kategorie a položky bude tlačítko Odstranit. Používám na svém webu několik věcí pomocí jQuery - ColorBox, dropdown menu apod. tak pokud by bylo možné řešení udělat pomocí jQuery. Všem bych chtěl mnohokrát předem poděkovat za rady a pomoc. |
||
| Marek88 Profil |
#2 · Zasláno: 27. 1. 2011, 01:52:43
Pokud vůbec nevíš, jak to udělat, tak se to spíš hodí do kategorie "práce a zakázky".
Pokud si nevíš rady jen s tím přidáváním inputů, tak zkus tohle http://www.zaachi.com/cs/items/dynamicke-pridavani-elementu-formulare.html Jestli to chceš v jquery, tak asi nebude těžké to vygooglit na dotaz "dynamické přidávání inputů jquery" nebo tak nějak... |
||
| frauen Profil * |
#3 · Zasláno: 27. 1. 2011, 02:03:33
Jedná se mi pouze o to vytváření a odstraňování inputů / textarea, proto jsem to umístil do JS.
Každopádně díky za odkaz a radu, co mám hledat, mrknu se na to. Pokud by se našel někdo, kdo má další radu či by mi nějak pomohl, budu vděčný. |
||
| frauen Profil * |
#4 · Zasláno: 27. 1. 2011, 16:15:50
Prozatím jsem dal dokupy toto:
$(document).ready(function() {
var categoryId = 0;
$("#button-category").click(function(){
var category = "<p id='category-"+ categoryId + "'>Kategorie " + categoryId + ":<br><input type='text' size='40'><button onclick='removeCategory(" + categoryId + ");'>Odebrat</button></p>";
$("#form-content").append(category);
categoryId++;
});
function removeCategory(id) {
$("#category-" + id).remove();
}
});Přidávání funguje, odebrání však nikoliv. V čem je, prosím, chyba? Je vůbec dobré řešení to, co jsem prozatím vytvořil, zda neobsahuje nějaké chyby apod.? |
||
| Kcko Profil |
#5 · Zasláno: 27. 1. 2011, 16:34:38
$(document).ready(function() {
var categoryId = 0;
$("#button-category").click(function(){
var category = "<p id='category-"+ categoryId + "'>Kategorie " + categoryId + ":<br><input type='text' size='40'><button onclick='removeCategory(" + categoryId + ");'>Odebrat</button></p>";
$("#form-content").append(category);
categoryId++;
});
});
function removeCategory(id) {
$("#category-" + id).remove();
}
|
||
| frauen Profil * |
#6 · Zasláno: 27. 1. 2011, 16:57:41
Kcko:
Proč musí být funkce takto odděleně? |
||
| Chamurappi Profil |
#7 · Zasláno: 27. 1. 2011, 17:02:01
Reaguji na frauena:
„V čem je, prosím, chyba?“ Funkce removeCategory je lokální a z onclicku lze zavolat jen globálně dostupné funkce.
„Je vůbec dobré řešení to, co jsem prozatím vytvořil, zda neobsahuje nějaké chyby apod.?“ Ani moc ne. Máš v úmyslu mít nesouvislou řadu čísel? Když někdo vyrobí pět kategorií a pak třetí vyhodí, bude po druhé hned čtvrtá. Nech přečíslovávání na prohlížeči — nepřidávej odstavce, ale položky číslovaného seznamu. „Proč musí být funkce takto odděleně?“ Nemusí být vůbec odděleně. Napsal bych to takhle: $(document).ready(function() {
$("#button-category").click(function(){
var category = $("<li>kategorie: <br><input type='text' size='40'><button type='button'>Odebrat</button></li>");
category.find("button").click(function()
{
category.remove();
});
$("#ídéčko-číslovaného-seznamu").append(category);
});
}); |
||
| frauen Profil * |
#8 · Zasláno: 27. 1. 2011, 17:23:35
Chamurappi:
Díky, to mě nenapadlo, funguje to dobře. Chtěl bych ještě doplnit přidávání položek pod jednotlivé kategorie. Bude to zřejmě víceméně to samé, akorát si myslím, že by bylo vhodné použít vnořené seznamy, ale nevím, jak to napsat v tom js. Mohl bych poprosit o nápovědu? Díky. |
||
| frauen Profil * |
#9 · Zasláno: 28. 1. 2011, 02:12:52
Vypadá to, že jsem nakonec dal dohromady funkční řešení.
Chtěl bych se jen zeptat, proč nefunguje "Odebrat", když dám jednu kategorii předem napevno do formu (uplně stejný obsah jako kdybych přidal dynamicky přes tlačítko)? Také bych se chtěl zeptat, jakým způsobem udělat to, že když formulář odešlu a budu mít někde nevyplněnou kategorii a zobrazím pomocí php hlášení, že nebyla vyplněna některá z kategorií, aby se mi zobrazily zpět kategorie a položky s odeslanými daty? JS: $(document).ready(function(){
$("#button-category").click(function(){
var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>");
category.find("button").click(function(){
category.remove();
});
$("#form-content").append(category);
});
$("#button-item").click(function(){''
var item = $("<p>Položka:<br><input type='text' name='item[]' size='80'> Cena: <input type='text' size='5'> <button type='button'>Odebrat</button><br>Popis:<br><textarea cols='50' rows='2' name='descripion[]'></textarea></p>");
item.find("button").click(function(){
item.remove();
});
$("#form-content").append(item);
});
});PHP (HTML): <?php
if (isset($_POST['sent'])) {
if(empty($_POST['category'])) {
$error = 'Nebyla přidána žádná kategorie.';
} else {
for ($i = 0; $i < count($_POST['category']); $i++) {
if (empty($_POST['category'][$i])) {
$error = 'Nebyla vyplněna kategorie.';
}
}
}
// Error
if (isset($error)) {
echo $error;
}
}
?>
<form action="" method="post" id="list">
<div id="form-content">
<p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button">Odebrat</button></p>
</div>
<p id="buttons">
<input type="hidden" name="sent">
<input type="submit" value="Upravit">
</p>
</form>Děkuji mnohokrát. |
||
| frauen Profil * |
#10 · Zasláno: 28. 1. 2011, 14:26:39
Opravdu mi nikdo neporadí? Potřeboval bych problém vyřešit, abych mohl pokračovat. Děkuji.
|
||
| Chamurappi Profil |
#11 · Zasláno: 28. 1. 2011, 14:38:05 · Upravil/a: Chamurappi
Reaguji na frauena:
„Potřeboval bych problém vyřešit, abych mohl pokračovat.“ To jsi nám dal dobrou motivaci :-) Viz osmé závazné pravidlo. „Chtěl bych se jen zeptat, proč nefunguje "Odebrat", když dám jednu kategorii předem napevno do formu“ Protože mu nic nenastavilo, že by mělo odebírat. Asi by bylo jednodušší mu dát rovnou atribut: <button … onclick="this.parentNode.parentNode.removeChild(this.parentNode)"> category.find("button").click).
|
||
| frauen Profil * |
#12 · Zasláno: 28. 1. 2011, 14:43:15
Omlouvám se za osmé pravidlo, ale nevěděl jsem, jak uživatele oživit pro případnou radu či pomoc.
Chamurappi: „… a s tím ho můžeš generovat i do HTML, i v tom skriptu“ Díky, určitě vyzkouším a případně použiji. Jediné, co mi dělá problém, je to, jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat? Děkuji. |
||
| _es Profil |
#13 · Zasláno: 28. 1. 2011, 15:01:02
frauen:
„jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat?“ Zistíš v PHP, čo návštevník vyplnil a pošleš mu to isté v HTML. |
||
| Chamurappi Profil |
#14 · Zasláno: 28. 1. 2011, 15:05:11
Reaguji na frauena:
„nevěděl jsem, jak uživatele oživit pro případnou radu či pomoc“ Nijak. Trpělivě vyčkávej, jako všichni ostatní, kdo tu hledají pomoc — proto existuje to pravidlo. „Jak bych měl postupovat?“ Vygenerovat je v PHP cyklem a s vyplněným atributem value. (Samozřejmě patřičně ošetřeným, aby ten řetězec nemohl v HTML způsobit problémy.)
|
||
| frauen Profil * |
#15 · Zasláno: 28. 1. 2011, 15:08:28
Použil jsem pro první pevnou položku Kategorie:
<p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button" onclick="$(this).closest('p').remove();">Odebrat</button></p>_es: > „jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat?“ > Zistíš v PHP, čo návštevník vyplnil a pošleš mu to isté v HTML. Chápu to správně, že po odeslání položek si musím nějak uložit odeslaná data a ty pak nějak obalit příslušnými inputy apod. a opět zobrazit? |
||
| _es Profil |
#16 · Zasláno: 28. 1. 2011, 15:12:55
frauen:
„Chápu to správně, že po odeslání položek si musím nějak uložit odeslaná data“ Prečo by si ich musel niekam ukladať? Veď PHP skript k nim má prístup. „ty pak nějak obalit příslušnými inputy apod. a opět zobrazit?“ Áno. |
||
| frauen Profil * |
#17 · Zasláno: 28. 1. 2011, 15:19:08
Jak mám následující udělat v JS? Potřebuju tam nějak doplnit obsah onclick.
<p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button" onclick="$(this).closest('p').remove();">Odebrat</button></p>JS: var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>"); |
||
| Chamurappi Profil |
#18 · Zasláno: 28. 1. 2011, 15:19:41 · Upravil/a: Chamurappi
Reaguji na frauena:
„Což funguje, ale nevím, zda je to správné řešení (?).“ Bude to pomalejší než mnou uvedený kód kvůli použití jQuery (a hlavně Sizzlu v něm na vyhodnocování selektoru). Jinak to udělá v podstatě totéž. |
||
| _es Profil |
#19 · Zasláno: 28. 1. 2011, 15:23:36
frauen:
„tam nějak doplnit obsah onclick“ To som nejak nepochopil, kam „tam“, aký „obsah“? |
||
| Chamurappi Profil |
#20 · Zasláno: 28. 1. 2011, 15:26:59
Reaguji na _es:
Jestli jsem to správně pochopil, tak neví, jak dostat ten atribut onclick dovnitř řetězce s HTML kódem. Nejspíš ho trápí uvozovky, asi je neumí správným způsobem escapovat.
|
||
| frauen Profil * |
#21 · Zasláno: 28. 1. 2011, 15:27:47
_es:
> „tam nějak doplnit obsah onclick“ > To som nejak nepochopil, kam „tam“, aký „obsah“? HTML: onclick="$(this).closest('p').remove();"do JS: var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>"); |
||
| _es Profil |
#22 · Zasláno: 28. 1. 2011, 15:41:22
frauen:
Do textového reťazca v JS ohraničeného úvodzovkami ( "text") vložíš úvodzovky pomocou dvojice znakov \" ("text\"pokračovanie textu").
|
||
| Chamurappi Profil |
#23 · Zasláno: 28. 1. 2011, 15:43:31
Reaguji na frauena:
A dovnitř HTML atributu můžeš uvozovky/apostrofy, kterými je atribut ohraničen, vepsat entitou. Kdybys použil můj onclick, neměl bys problém s uvozovkami :-)
|
||
| frauen Profil * |
#24 · Zasláno: 28. 1. 2011, 21:42:01
Snažím se vypsat odeslané kategorie a položky, ale mám menší problém. Špatně se mi vypisují položky. V čem je, prosím, problém?
JS: $(document).ready(function(){
var categoryId = 0;
$("#button-category").click(function(){
var category = $("<p class=\"category\">Kategorie " + categoryId + ": <input type=\"text\" name=\"category[]\" size=\"50\"> <button type=\"button\" onclick=\"$(this).closest('p').remove();\">Odebrat</button></p>");
$("#form-content").append(category);
categoryId++;
});
$("#button-item").click(function(){
var item = $("<p>Položka:<br><input type=\"text\" name=\"item[" + (categoryId - 1) + "][]\" size=\"80\"> Cena: <input type=\"text\" name=\"price[" + (categoryId - 1) + "][]\" size=\"5\"> <button type=\"button\" onclick=\"$(this).closest('p').remove();\">Odebrat</button><br>Popis:<br><textarea cols=\"50\" rows=\"2\" name=\"description[" + (categoryId - 1) + "][]\"></textarea></p>");
$("#form-content").append(item);
});
});PHP: for ($i = 0; $i < count($_POST['category']); $i++) {
echo '<p class="category">Kategorie: <input type="text" name="category[]" size="50" value="' . $_POST['category'][$i] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button></p>';
for ($j = 0; $j < count($_POST['item']); $j++) {
echo '<p>Položka:<br><input type="text" name="item[]" size="80" value="' . $_POST['item'][$i][$j] . '"> Cena: <input type="text" name="price[]" size="5" value="' . $_POST['price'][$i][$j] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button><br>Popis:<br><textarea cols="50" rows="2" name="description[]">' . $_POST['description'][$i][$j] . '</textarea></p>';
}
} |
||
| frauen Profil * |
#25 · Zasláno: 28. 1. 2011, 21:55:18
Chybička byla v PHP:
for ($i = 0; $i < count($_POST['category']); $i++) {
echo '<p class="category">Kategorie: <input type="text" name="category[]" size="50" value="' . $_POST['category'][$i] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button></p>';
for ($j = 0; $j < count($_POST['item'][$i]); $j++) {
echo '<p>Položka:<br><input type="text" name="item[]" size="80" value="' . $_POST['item'][$i][$j] . '"> Cena: <input type="text" name="price[]" size="5" value="' . $_POST['price'][$i][$j] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button><br>Popis:<br><textarea cols="50" rows="2" name="description[]">' . $_POST['description'][$i][$j] . '</textarea></p>';
}
}Nechápu jen jednu věc, pokud odešlu input s obsahem 0 tak mi špatně fungují podmínky pro ověření. Jak bych měl data ošetřit, prosím? |
||
| Witiko Profil |
#26 · Zasláno: 28. 1. 2011, 22:27:21
Chamurappi:
„a hlavně Sizzlu v něm“ Sizzle je pokusem o co nejbližší interpretaci CSS3 selektorů. Místo Sizzlu je proto v případě podpory využita funkce document.querySelectorAll, kdykoliv je to možné. |
||
|
Časová prodleva: 13 let
|
|||
0