ajax form – výpis hodnot z db na základě hodnoty input type text před odesláním formuláře

JanBE

Ahoj,

poradil by někdo jak, by šlo co nejjednodušeji vypisovat dopovídající záznamy z DB, na základě vyplněného input type textu (ještě před odesláním formuláře)?

Představa: < input type=„text“ name=„name“ onchage=„vypis_obsah_db(this)“ > (následují další inputy formuláře)..Pod formulářem by se na základě vyplněného name, zobrazil výpis řádků z DB, kde col = „name“..

Přes ajax potom nějak předat this.name

Je správně, jít cestou snipetů?

Jan Mikeš

Mozna by to slo zhruba takto:

<script>
$("input[data-action]").on("change", function(){
	$.nette.ajax({
		url: $(this).data("action"),
		type: "GET",
		data: { "string": $(this).val() }
	});
}};
</script>

<input type="text" data-action="{plink fetchData!}">
{snippet mySnippet}

Presenter:

	public function handleFetchData($string){
		$this->template->data = $this->model->fetchRows($string);
		if($this->ajax) {
			$this->redrawControl("mySnippet");
		} else {
			$this->redirect("this");
		}
	}

edit: doplnil jsem i ajax, zkus a melo by to fungovat :) psano ofc z hlavy a nevyzkouseno, takze to mozna bude potrebovat drobne upravy

Editoval Lexi (1. 4. 2014 17:55)

JanBE

Lexi, díky za hrubou ukázku!..

A Ajaxem začínam a ještě se mi nepodařila zprovoznit ani nejjednoduší aplikaci ("":http://blog.davidkloucek.cz/…-frameworku/) .. Laděnka píše, že nezná proměnou $prom a když ji defaultně nastavím v presenteru na "", tak potom kliknutím se celá stránka načte znovu beze změny.. Zřejmě nemám dobře nastavený ajax…

V @layoutu mám nalinkovaný javascriptový soubor s vlastn. funkcemi a jquery.nette.js který jsem stáhnul přes tento web. Nezapomněl jsem na něco?

Jan Mikeš

Misto jquery.nette.js pouzit nette.ajax.js je k tomu i pekny navod.

S odstupem casu si uvedomuji, ze misto handle (v predchozi ukazce nahore) by bylo lepsi si vytvorit komponentu s formularem a obsluhu mozna delat tam.

Predchozi ukazka samozrejme bude taky fungovat a pokud s nette zacinas tak pro tebe bude i jednodussi, nez do toho plest komponenty a formulare.

Jinak k prikladu z blogu, hodnotu tam plni defaulnte v presenteru a nasledne ji prepisuje ajaxem, aby porovnal, jestli se ajax zavola a vse funguje, takze to je spravne, ze ji musis nastavit.

Pripadne posli kod sveho presenteru, to napovi vice kde mas chybu.

Re ajax.. pro tento zakladni priklad neni potreba nejak nastavovat, staci ho inicializovat pomoci

$.nette.init();

JanBE

ok, díky za nasměrování.
nette.ajax.js jsem si nalinkoval misto jquery. Ale zatím stále nic.

kód v presenteru:

  public function renderDefault()
{
    $this->template->sec = $this->database->table('table')->order('id');
    $this->template->prom = "";
}

.....
.....

public function handleTest()
{
    $this->template->prom = 'Hodnota poslaná AJAXem.';
    $this->redrawControl(); //překreslíme komponentu
}

//tato metoda se provádí vždy, proto musíme zamezit přepsání hodnoty z handle
public function renderTest()
{
    if (! $this->isAjax()) { //je toto ajaxový požadavek?
        $this->template->prom = 'Výchozí hodnota.';
    }
}

v šabloně:

<p>
    {snippet mySnippet}{$prom}{/snippet} <a class="ajax" n:href="test!">Změnit</a>
</p>

v jednom z nalinkovaných js mám na začátku:

$(function () {
    $.nette.init();
})

Jan Mikeš

A jsi ve view „test“? renderTest zrus a jeho kod presun do renderDefault, protoze si myslim, ze jsi v default view :) koukni na debug bar dole

JanBE

Pravda, jsem v default :-), taková blbá chyba… Ale pořád nic..Po kliknutí zůstává „Vychozí hodnota“

  public function renderDefault()
{
    $this->template->sec = $this->database->table('table')->order('id');
    $this->template->prom = "";
    if (! $this->isAjax()) { //je toto ajaxový požadavek?
        $this->template->prom = 'Výchozí hodnota.';
    }
}

Jan Mikeš

Mas tam 2× $this->template->prom, ten prvni mimo if smaz.

Dale v sablone musis mit

<a n:href="test!">...</a>

aby se zavolal signal handleTest(), dale prosim over, ze ma tag class=„ajax“, aby byl pozadavek opravdu ajaxovy a pres firebug nebo jiny nastroj over, ze se ajaxovy pozadavek provede.

Dale se ujisti, ze opravdu mas v kodu

$this->redrawControl();

Ktery prekresli snippety pri ajaxovem pozadavku.

JanBE

Děkuju za upozornění. Zkoušel jsem to bez prvního this už před tím. Ani v podobě:

  public function renderDefault()
{
    $this->template->sec = $this->database->table('table')->order('id');

    if (!$this->isAjax()) { //je toto ajaxový požadavek?
        $this->template->prom = 'Výchozí hodnota.';
    }
}

....
....

public function handleTest()
{
    $this->template->prom = 'Hodnota poslaná AJAXem.';
    $this->redrawControl(); //překreslíme komponentu

}

a

{snippet mySnippet}{$prom}{/snippet} <a class="ajax" n:href="test!">Změnit</a>

mi to zatím neběží..

Zkusím to přes ten firebug

JanBE

Firebug:

„nette.ajax.js: jQuery is missing, load it please“

a ještě před tim : ReferenceError: $ is not defined… jako by to nerozpoznalo zápis $(function …

Mám tedy ještě nějak načíst jQuery?

Editoval JanBE (5. 4. 2014 19:50)

Jan Mikeš

No jasne :)

JanBE

a ještě taková blbá otáka:D…

Co by v tom Jquery mělo být?

použil jsem "":https://componette.org/search/?…

ale pořád stejný chyba..Soubor to přitom načte..

Ale když načtu jquery jako "":http://code.jquery.com/…ry-1.11.0.js

tak to nepíše nikde žádnou chybu ale ajax nefunguje

Editoval JanBE (5. 4. 2014 22:36)

JanBE

Tak už mi to začalo chodit, přehodil jsem pořadí nalinkovaných scriptů

Moc díky za pomoc Lexi:-)

JanBE

Jen ještě když se vrátím k původní myšlence s formulářem.

Pokouším se takto:

presenter:

protected function createComponentFrontRegistration()
  {
    $form = new Form;
    $form->addText('username')->getControlPrototype()
              ->OnChange('loadItemTargets(this.value);');
....
....

public function handleLoadData($value) {

       $this->template->data = $value;
        $this->redrawControl();
}

}

sccitp:

function loadItemTargets(value) {
    jQuery.get('{link loadData! }', {"value": value}, function(data) {
            jQuery('frm-frontRegistration-inptutname').replaceWith(data);

   }, "html");
}

sablona:

{snippet mySnippet}{$data}{/snippet}