Nabízení hodnot na vyplnění formuláře z databáze

.:M@rt!n:.

Chtěl bych do projektu udělat zadávání hodnot z formuláře, kde by se při psaní do textboxu pod ním vypisovaly hodnoty které už v db jsou a mohl bych si případně vybrat potřebnou hodnotu, která už tam je. A potom ještě na základě vyplněného prvního pole, vyplnit další, kam se načtou data z db. Je mě jasné že to bude přes AJAX, ale jsou někde návody na takovéto možnosti? Sám to do kupy nedám.

ViPEr*CZ*

To druhý pole nechápu jak by to mělo fungovat, ale to co popisujete je tzv. našeptávač. Toho je na netu hafo. Doporučuji například použít jQuery UI autocomplete.

.:M@rt!n:.

Díky. No dejme tomu, že vyplním do pole jméno. A na základě tohoto jména budu chtít do dalších polí nastavit hodnoty které náleží tomu jménu – prostě když už ty data v db jsou, abych je nemusel zadávat znova.

Vojtěch Dobeš

Na input (s autocompletem nebo bez) bych navěsil na událost change AJAXový požadavek, který se serveru dotáže a podle případně vrácených dat vyplní další políčka.

$.post({link getMeData!},..., function handleGetMeData(... atd.

.:M@rt!n:.

Nešlo by to prosím více rozepsat?

Vojtěch Dobeš

To už bych to musel celé naprogramovat :) Doporučuju tuhle přednášku. Jinak aspoň kousek:

<script>
$(function () {
	$('CSS selektor k memu inputu').change(function () {
		var $this = $(this);
		$.get({link getDataForUser!}, {
			name: $this.val()
		}, function (payload) {
			if (payload.user) {
				$('CSS selektor pro jmeno teticky').val(payload.auntsName);
			}
		});
	});
});
</script>

public function handleGetDataForUser($name)
{
	$this->payload->user = $this->users->getByName($name);
	$this->sendPayload();
}

Doufám, že jQuery i Nette se příliš nezměnilo a tohle bude fungovat.

.:M@rt!n:.

Bude funkční na to našeptávání tento postup: https://gist.github.com/1207351 ?

Vojtěch Dobeš

$.ajax({
	url: "{!$presenter->link('autocomplete')}",
	data: {

Ten link tam dej bez uvozovek, Latte je doplní automaticky. Stejně tak ten výkřičník je tam zbytečný…

Jestli je to funkční netuším, doporučuju otestovat v prohlížeči :) Ale mohlo by.

.:M@rt!n:.

Tak nejde a nevím kde mám hledat chybu :)

Vojtěch Dobeš

Řešíš teď autocomplete nebo to donačtení hodnot?

.:M@rt!n:.

No vůbec mě to nenabízí hodnoty, po zadání prvních písmen.

Vojtěch Dobeš

Eh… to není, na co jsem se ptal. Tuším tedy že autocomplete. Jak to debuguješ? Sleduješ třeba v konzoli Firebugu, co se ti tam posílá? Vyhazuje server 500? Nebo nic nevrací? Budeš muset poskytnout více informací, aby ti někdo poradil.

.:M@rt!n:.

Vůbec nevím co mám hledat. S JS dělám poprvé

Vojtěch Dobeš

Aha, to je dobré zmínit :) Firebug (doplněk do Firefoxu) má záložku Konzole (popř. Síť), kde lze sledovat probíhající requesty, popř. chyby v Javascriptu.

.:M@rt!n:.

tady je obrázek co je ve firebugu

Vojtěch Dobeš

V tomhle snímku nikde není požadavek na tvoji aplikaci, jen na JS soubory. Nemáš v konzoli nějaké javascriptové chyby?

.:M@rt!n:.

Jj je tam. Odkazuje na tento kód:

<script>
$(function() {
	var select_name = "name";
	$("input[name=" + select_name + "]").autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "{!$presenter->link('autocomplete')}",
				data: {
					whichData: select_name,
					typedText: request.term
				},
				success: function( data ) {
					response( $.map( data, function( item ) {
						return { label: item, value: item }
					}));
				}
			});
		},
		minLength: 2,
		open: function() {
			$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
		},
		close: function() {
			$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
		}
	});
});
</script>

hned na první řádek – píše: není definována funkce

Vojtěch Dobeš

Máš před tímto kódem přilinkované jQuery?

.:M@rt!n:.

Ano je tam.

.:M@rt!n:.

Žádná další rada? Zkoušel jsem i nějaké jiné řešení, ale furt to nemůžu rozchodit. :(

Vojtěch Dobeš

Netuším, proč ti to hází není definována funkce. Zkus někam hodit celou šablonu atd. Takhle je to lovení v kalné vodě.