Diskuze: Vložení do kategorie
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.


Michal Kuba:13.1.2015 21:13
Takže jinak než přes JS to nevyřeším? Původně jsem myslel, že bych tam vložil nějakou php direktivitu, ale toto je asi snazší, že?
Michal Kuba:13.1.2015 21:15
Já se totiž v tom JS tolik nevyznám, takže mi teď zabere chvíli času než pochopím, co jak nahradit aby mi fungovalo, jak má.
Michal Šmahel:13.1.2015 21:30
Neboj, to já si s JS také moc neruzumím a pochopil jsem to. Jde o to, že to při změně zkontroluje value vybraného. Pokud je value 0 (Admin), vypíše to ten text. Takže musíš připsat další možnosti a texty, trochu to musíš upravit...
Michal Kuba:13.1.2015 21:32
Mě není uplně jasný, jestli to Admin je myšleno jako textový řetězec nebo to má v JS svůj význam. Mám trochu obavy kam potom vypisovat ty moje konkrétní požadovaný možnosti.
Neaktivní uživatel:13.1.2015 21:33
Nevím jestli to půjde v php, ale zkus tohle:
http://jsfiddle.net/j0jgb93q/
V JS se moc nevynám takže možná ti někdo poradí líp
Michal Šmahel:13.1.2015 21:34
Není, je to bráno podle ID (číselného), tady má 0.
Michal Šmahel:13.1.2015 21:36
Máš to trochu divoké.
//Edit: A nech ho, ať si to zkusí sestavit sám, jinak se nic
nenaučí
Neaktivní uživatel:13.1.2015 21:37
"V JS se moc nevynám takže možná ti někdo poradí líp "
Je to možné Podobné jsem
jednou potřeboval a našel v nějakém návodu.
Honza Bittner:13.1.2015 21:43
Za podmínek, že tvoje select část bude nad obsahem, který chceš zobrazovat, můžeš využít něco jako toto:
option[value="auto"]:selected ~ .div-s-obsahem-pro-auto
Což by teoreticky mělo fungovat, prakticky nevím - nezkoušel jsem...
Já bych použil "onChange":
<select name="kategorie" onchange="jump_kategorie(form)">
...
</select>
Pak vytvoříš JS funkci:
function jump_kategorie(form)
{
kat=form.kategorie.value;
window.location.href = "volba-kategorie.php?kategorie="+kat;
}
A pak bych otestoval v souboru volba-kategorie.php, zda existuje proměnná
typu GET:
if(isset($_GET["kategorie"]))
{
zobrazení další nabídky závislé na volbě kategorie....
}
Ber to jen jako nástřel a né finální řešení. takhle jsem to někde
používal v kódu svého webu, kdy se po nějaké volbě zobrazovaly další,
závské na té první. snad to pomůže a není to příliš amatérské
Michal Šmahel:13.1.2015 22:14
On ale chce vícevrstvý výběr. Vybereš auta a poté se ti ukáže další <select> a tam vybereš třeba značku.
Michal Šmahel:13.1.2015 22:16
Pokud by ti to nešlo, dej sem celé snažení a nějak ti to doladíme.
Honza Bittner:13.1.2015 22:22
Nejoptimálnější řešení je pomocí CSS, což jsem psal výše. Je to však řešení né moc šetrné na úpravy, jelikož to děláš ručně. Preprocesorama se to dá docela usnadnit, ale stejně je tam velký podíl ruční práce.
Jinak bych doporučoval v JS udělat něco jako:
Zjistíš cyklem (each?) jaký option v daném section má elected, poté zavoláš
#value-z-option a takto dále... Budeš poté muset pouze míti value stejné
jako ID. Získáš tak univerzální řešení.
Michal Kuba:13.1.2015 22:37
Nejsem si jist, jestli jsem vložil script na správné místo, takto jsem to nikdy neřešil:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styl.css">
<title>Podání inzerátu</title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="auto"){
$(".motorky").hide();
$(".automobily").show();
}
if($(this).attr("value")=="moto"){
$(".automobily").hide();
$(".motorky").show();
}
});
}).change();
});</script>
<body>
<header>
<img id="logo" src="../img/logo.svg">
<nav>
<ul>
<li><a href="index.php">Domů</a></li>
<li><a href="">Nejnovější inzeráty</a></li>
<li><a href="">Kontakt</a></li>
<li><a href="#">Podat inzerát</a></li>
<li><a href="prihlaseni.php">Přihlásit se</a></li>
</ul>
</nav>
</header>
<article>
<header><h2>Nový inzerát</h2></header>
<section style="width: 780px;">
<form id="podani_inzeratu" method="post" style="margin: 10px;margin-left: 110px;">
Titulek: <br>
<input type="text" name="titulek" /><br />
Text inzerátu: <br>
<textarea name="text" /></textarea><br />
Kategorie: <br>
<select name="kategorie" onchange="admSelectCheck(this)">
<option></option>
<option value="auto">Automobily</option>
<option value="moto">Motorky</option>
<option value="prace">Práce a přivýdělky</option>
<option value="reality">Reality</option>
<option value="stavba">Stavba</option>
<option value="mobily">Mobily</option>
<option value="pocitace">Počítače</option>
<option value="a&v">Audio & video</option>
</select><br>
<select class="automobily">
<option value="OA">Osobní automobily</option>
<option value="NA">Nákladní automobily</option>
<option value="Do">Dodávky</option>
<option value="Pr">Přívěsy</option>
<option value="ND">Náhradní díly</option>
<option value="Ji">Jiné</option>
</select>
<select class="motorky">
<option value="Mo">Motorky</option>
<option value="Ct">Čtyřkolky</option>
<option value="NDm">Náhradní díly</option>
<option value="Pri">Příslušenství</option>
<option value="Jim">Jiné</option>
</select>
Město: <br>
<input type="text" name="mesto" /><br />
<input type="submit" value="Přidat inzerát" />
</form>
</section>
</article>
</body>
</html>
Pokud sem dobře pochopil ten názorný příklad na fiddlu tak bych to měl mít upravené takto správně (řeším zatím jen první dvě kategorie, abych zjistil funkčnost).
Momentálně to nefunguje, všechny tři Selecty se zobrazují při jakémkoliv výběru.
Neaktivní uživatel:13.1.2015 22:53
http://jsfiddle.net/j0jgb93q/4/
Tak nějak
Michal Kuba:13.1.2015 23:02
Tak já už nevím, jestli mám ještě i blbě umístěný tag script, ale i když použiju tvoji myšlenku (nezkopíroval jsem to pouze, ale upravil to své), tak to nefunguje..
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "automobily") {
$(".box").hide();
$(".automobily").show();
}
if ($(this).attr("value") == "motorky") {
$(".box").hide();
$(".motorky").show();
}
});
}).change();
});</script>
<select name="kategorie">
<option></option>
<option value="automobily">Automobily</option>
<option value="motorky">Motorky</option>
<option value="prace">Práce a přivýdělky</option>
<option value="reality">Reality</option>
<option value="stavba">Stavba</option>
<option value="mobily">Mobily</option>
<option value="pocitace">Počítače</option>
<option value="a&v">Audio & video</option>
</select><br>
<select class="motorky box">
<option value="Mo">Motorky</option>
<option value="Ct">Čtyřkolky</option>
<option value="NDm">Náhradní díly</option>
<option value="Pri">Příslušenství</option>
<option value="Jim">Jiné</option>
</select>
<select class="automobily box">
<option value="OA">Osobní automobily</option>
<option value="NA">Nákladní automobily</option>
<option value="Do">Dodávky</option>
<option value="Pr">Přívěsy</option>
<option value="ND">Náhradní díly</option>
<option value="Ji">Jiné</option>
</select>
Kde tu mám chybu? :/
Michal Kuba:13.1.2015 23:08
A pokud použiju i přidaný CSS, tak se podkategorie vůbec nezobrazují.
Honza Bittner:13.1.2015 23:11
- dělej kód univerzální
- proč dáváte na konec znovu .change() ?
Já bych to udělal tak, že dáš třídy/id stejné, jako jsou value v sectionu... Pak by kód byl nějak takto - s jQuery. Chce to ještě nějak ochytit ty elementy, které budeš zobrazovat - třeba je dáš do nějakého divu, či jim dáš třídu - ty máš koukám .box etc...
Také bych dal selectu nějakou třídu/id, aby nedocházelo ke kolizím při případném jiném selectu na stránce - ty máš koukám .kategorie.
$(".kategorie").change(function(){
$(".kategorie option:selected").each(function(){
var value = $(this).attr("value");
$(".box").hide();
$(".box." + value).show(); //např. .moznost.auta
});
});
Takto nějak by to teoreticky mělo fungovat...
Honza Bittner:13.1.2015 23:18
$(".kategorie").change(function(){
var value = $(".kategorie option:selected").attr("value");
$(".box").hide();
$(".box." + value).show();
});
Toto je ozkoušeno a funkční - http://jsfiddle.net/j0jgb93q/10/
Michal Kuba:13.1.2015 23:21
Tak já nevím, jestli už jsem blbej nebo je tolik hodin, ale ani takto mi to nefunguje. Doufám že jsem to upravil správně:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">$(document).ready(function () {
$(".kategorie").change(function () {
$("kategorie option:selected").each(function () {
var value = $(this).attr("value");
$(".moznost").hide();
$(".moznost." + value).show(); //např. .moznost.auta
}
});
});
});</script>
<body>
<div> <select name="kategorie" class="kategorie">
<option></option>
<option value="automobily">Auto</option>
<option value="motorky">Moto</option>
<option value="prace">Práce a přivýdělky</option>
<option value="reality">Reality</option>
<option value="stavba">Stavba</option>
<option value="mobily">Mobily</option>
<option value="pocitace">Počítače</option>
<option value="a&v">Audio & video</option>
</select></div><br>
<select class="moznost motorky">
<option value="Mo">Motorky</option>
<option value="Ct">Čtyřkolky</option>
<option value="NDm">Náhradní díly</option>
<option value="Pri">Příslušenství</option>
<option value="Jim">Jiné</option>
</select>
<select class="moznost automobily">
<option value="OA">Osobní automobily</option>
<option value="NA">Nákladní automobily</option>
<option value="Do">Dodávky</option>
<option value="Pr">Přívěsy</option>
<option value="ND">Náhradní díly</option>
<option value="Ji">Jiné</option>
</select>
A ještě se zeptám, jak jsi myslel dělat kód univerzální?
Michal Kuba:13.1.2015 23:27
Tak tohle je divný. Když sem to už celý zkopíroval tak, jak to funguje na Fiddlu, tak ani teď mi to nefunguje..
Honza Bittner:13.1.2015 23:28
Nejsem si jistý, že můžeš importovat jquery a zároveň v tom elementu mít JS kód?
Odděl to a zkus znova.
Michal Kuba:13.1.2015 23:28
Nevím jestli to nevidím jen já, ale když se podíváš na stránku : http://mainos.cekuj.net/…_inzerat.php
funguje to jak má?
Je nutné se zaregistrovat pro přidání inzerátu, stačí ale vytvořit
naprosto fake účet, já ho potom klidně smažu
Michal Kuba:13.1.2015 23:31
Oddělit je myšleno takto?
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script lang="javascript">$(".kategorie").change(function(){
$(".kategorie option:selected").each(function(){
var value = $(this).attr("value");
$(".box").hide();
$(".box." + value).show(); //např. .moznost.auta
});
});</script>
A ještě jednou dotaz, je v pořádku, že mám tagy script NAD body? Tudíž i nad selectem?
Honza Bittner:13.1.2015 23:37
Pokud zkopíruji ten kód z tvé hlavičky do konzole tak to začne fungovat... Takže kód je dobře, ale JS to nenačte.
Podle W3schools se scripty v HTML zapisují takto: Uprav ten element, máš tam nějaké lang="javascript", což možná může dělat ten problém... ?
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Scripty by v hlavičce jít měly stejně dobře jako v body... tuším.
Michal Kuba:13.1.2015 23:43
Trochu mi už jde z toho hlava kolem.. Ale pořád to tam nemůžu vpasírovat. Asi hádám dobře, že takhle to nebude:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<script lang="javascript">$(".kategorie").change(function(){
$(".kategorie option:selected").each(function(){
var value = $(this).attr("value");
$(".box").hide();
$(".box." + value).show(); //např. .moznost.auta
});
});</script>
Ani když do toho kódu podle W3 zapíšu ten zbytek, tak to nefakčí.
Honza Bittner:13.1.2015 23:57
Takto bych to napsal... A mělo by to jíti...
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(".kategorie").change(function(){
var value = $(".kategorie option:selected").attr("value");
$(".box").hide();
$(".box." + value).show();
});
</script>
Michal Kuba:14.1.2015 0:01
Já se střelím, prostě furt to nedělá co má (ostatně, můžeš se
přesvědčit na webu sám)
Proč to v tom internetovým testeru jde a mě na ostro ne? :/
Honza Bittner:14.1.2015 0:11
Zkus tam dát, ještě před tu funkci, alert...
<script>
alert("baf");
... zbytek
Michal Kuba:14.1.2015 0:12
Jo, tak to vyskočí. Ale nevím kde mám (nemám) ty podkategorie. Ještě mě napadlo, jestli to nepřekrývá ta položka Město pod tím. Zkusím to odřádkovat trochu, jestli to nepomůže.
EDIT: Tak ani to nepomáhá..
Honza Bittner:14.1.2015 12:14
Zkus si udělat nějaký "sanbox" HTML a vyzkoušet to tam. Naiportuj si tam jQuery z Google Libraries:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JS ti funguje, ale nějak se to zadrhává na tom jQuery evidentně...
Matyáš Procházka:14.1.2015 15:27
To $(".kategorie").change ... musíš načíst až potom, co se načte ten element v HTML...
(Řešení Honzy doplněné o mé poznámky)
takže buď takto:
<select class="kategorie"></select>
<script>
$(".kategorie").change(function(){
var value = $(".kategorie option:selected").attr("value");
$(".box").hide();
$(".box." + value).show();
});
</script>
Nebo v hlavičce takto:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
var test = function () {
$(".kategorie").change(function(){
var value = $(".kategorie option:selected").attr("value");
$(".box").hide();
$(".box." + value).show();
});
};
$(document).ready(test);
</script>
+20 Zkušeností
+2,50 Kč

Michal Kuba:14.1.2015 16:23
Díky moc, už to funguje správně Tím jak nerozumím tolik JS tak nevím, co tam bylo špatně ale to
hlavní je, že to funguje. Doufám, že až to budu dělat pro dalších 6
kategorií a asi 30 podkategorií, že už to půjde..
Matyáš Procházka:14.1.2015 17:01
Jó, jednou jsem tento problém řešil s clickem asi půl dne a od tý doby
na něj nikdy nezapomenu
Matyáš Procházka:14.1.2015 17:02
To jsem rád.
Kdybys potřeboval třeba vysvětlit, co jednotlivá funkce dělá, tak napiš
Zobrazeno 39 zpráv z 39.