Kategorie – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Kategorie – JavaScript, AJAX, jQuery – Fórum – Programujte.comKategorie – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
zelenac10
Návštěvník
24. 11. 2013   #1
-
0
-

Dobrý večer,

prosím Vás neviete mi poradiť, ako sa vola funkcia v ajaxe, ktorá sa použivá na to, keď zadáte napr. Kraj potom dostanete na výber okres a nakoniec dedinu/mesto.Potreboval by som len názov, alebo dobrý navod na interete ak o niečo viete.

Ďakuejm :)

Príjemný zvýšok dňa 

Nahlásit jako SPAM
IP: 193.93.72.–
Vkuse sa len učím :)
Reklama
Reklama
Řešení
Ericsko+3
Stálý člen
24. 11. 2013   #2
-
0
-
Vyřešeno Nejlepší odpověď

Aj ja by som chcel taku funkciu ;)

Musis si to rozdelit na niekolko krokov. Idealne je mat sadu web servisov, ktore ti budu poskytovat data do dropdown zoznamov (select/option). Ak nemas vlastnu databazu, da sa vyuzit aj niektora z dostupnych sluzieb, napr. http://www.geonames.org/.

Vacsina funguje tak, ze data vypytas nejakym query a dostanes odpoved v xml, alebo json.
Mozes si samozrejme naplnit vlastnu databazu a urobit si vlastne web servisy. V podstate je to nejaky server side script (napr. php), ktoremu submitnes query cez ajax a dostanes odpoved, ktoru javascriptom spracujes a zobrazis v html.

Podla tvojej poziadavky teda potrebujes 3 webservisy:

  • kraje
  • okresy
  • mesta

Pre kraje si musis pripravit server side script, ktory zavolas napr.:
http://server/ws/kraje
a ako odpoved dostanes:

{
"1":"Bratislavsky",
"2":"Trnavsky",
"3":"Nitriansky"
... atd
}

Pre okresy potom budes mat script, ktory zavolas ako:
http://server/ws/okresy?… (kde n bude cislo kraja pochopitelne), odpoved bude podobna:

{
"1":"Trnava",
"2":"Piešťany",
"3":"Hlohovec",
... atd
}

No a pre mesta podobne:
http://server/ws/mesta?…;

{
"1":"Hlohovec",
"2":"Leopoldov",
"3":"Červeník",
... atd
}

Tolko server side.

Teraz sa pozrieme na klient side javascript:

V html zobrazime 3 prazdne dropdowny, ktorym budeme ajaxom plnit obsah:

Kraj:
<select name="kraj" id="kraj">
  <option>---</option>
</select>
Okres:
<select name="okres" id="okres">
  <option>---</option>
</select>
Mesto:
<select name="mesto" id="mesto">
  <option>---</option>
</select>

Teraz pride javascript magic - naplnime prvy dropdown: (preferujem pouzitie jquery pre zjednodusenie)

$.getJSON("http://server/ws/kraje", function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push( "<option name='" + key + "'>" + val + "</option>" );
  });
  $("#kraj").append(items.join("")); 
});

Co teraz? Potrebujeme nejaky listener, ktory bude cakat na vyber kraja. Cize ak uzivatel vyberie nejaky kraj, naplni sa druhy dropdown okresmi:

$("#kraj").on("change", function() {
  var id = $(this).val();
  $.getJSON("http://server/ws/okresy?kraj="+id, function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push( "<option name='" + key + "'>" + val + "</option>" );
    });
    $("#okres").append(items.join("")); 
  });
});

Super. Ostava uz iba rovnaky listener pre vyber okresu:

$("#okres").on("change", function() {
  var id = $(this).val();
  $.getJSON("http://server/ws/mesta?okres="+id, function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push( "<option name='" + key + "'>" + val + "</option>" );
    });
    $("#mesto").append(items.join("")); 
  });
});

Ostava ti uz iba dorobit finalny submit vybrateho mesta, ale to uz je ina story.

Snad som ti nejak pomohol.

Nahlásit jako SPAM
IP: 88.212.34.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý