Odesílání formulářů přes AJAX

Jde to nyní řešit nějak jinak? Udělal jsem patřičné úpravy, ALE jakmile odešlu formulář, NIC se neprovede .. :( Stránka se nemění ..

Nefunguje, mám stejnej problém jako když sem si to ubastlil sám :-/ Formulář se prostš neodešle potom, co tam přidám nette.js … bez něj se odešle, ale překreslí se celá stránka .. Nějakej větší sample by nebyl? Mam pocit, že prostě něco dělám blbě .. :/

EDIT: VŠE VYŘEŠEŠNO, MOC DÍKY!

Editoval Ola (12. 11. 2008 22:20)

Byla tam chyba, ze se neaktualizovala jeedna promenna v template ;-)

Editoval Ola (12. 11. 2008 22:55)

VYŘEŠENO:

Po přečtení vlánka Odeslani formulare pomoci selectu? mě trochu osvítilo a zkusil jsem následující konstrukci:

<?php
// PREPARE FORM
$form = new Form('selectForm');
$form->addSelect('name', 'label', $records)
	//->controlPrototype->onChange('submit();');
	->controlPrototype->onChange('this.form.onsubmit();');

$form->addSubmit('submit_name', 'submit_label')
	->setValidationScope(FALSE);

// SUBMIT
$form->onSubmit[] = array($this, 'handleSelectNode');

// CUSTOM RENDERING
$form->setRenderer(new AjaxRenderer());
?>

Díky tomu, že se nad formulářem nezavolá klasický submit, ale kód, který je v atributu onsubmit:

<form onsubmit="return !nette.formAction(this, event);" method="post" action="">

tak se celý form odešle AJAXově při změně na SELECTu.

Editoval krajaac (19. 1. 2009 13:01)

Ešte doplním: v Internet Exploreri nefunguje JavaScriptové iterovanie prvkami formulára:

for (var i in form.elements) {

takže daný riadok z kódu (v buildFormQuery) treba nahradiť nasledujúcim:

for (var i = 0; i < form.elements.length; i++) {

Řeším teď podobný problém – mám select box, v něm seznam měsíců a v komponentě metodu handleMonth, která určuje, jaký měsíc se vykreslí a invaliduje oblast se články z minulého vybraného měsíce. Potřebuji tedy AJAXově odeslat ten formulář – do jeho události onsubmit nějak dostat {ajaxlink}, který odešle signál, jaký měsíc si uživatel vybral. A zároveň v případě nepřítomnosti Javascriptu, přidat k tomu selectboxu nějaké submitovací tlačítko, které zařídí, že při klasickém submitování formuláře se dojde k tomu samotnému výsledku jako přes AJAX (pro což bude hádám stačit dát do action formuláře správný link a správně pojmenovat <select> – aby se při odeslání methodou post vytvořil stejný link na výsledek jako v případě odeslání signálu přes AJAX).

Zatím mám toto:

<form class="monthinator" action="{link month ?}" onsubmit='{ajaxlink month '?vybraný option?'}' method="post"><fieldset>
<legend>Výběr měsíce</legend>
  <select name="monthinator" onchange="this.form.onsubmit();">
  {foreach $months as $month}
    <option value="{$iterator->getCounter()}">{$month}</option>
  {/foreach}
  </select>

</fieldset></form>

On se mi po změně odešle, v tom není problém, ale nevím, jak mám předat komponentě signál – value vybraného <option> z toho selectu…

Problém je, že já netuším jak. Přece když dám <form onsubmit=„{ajaxlink month}“ …>, tak se nezavolá handleMonth se správným předaným parametrem…

Co se týče Javascriptu, potřebuju úplně dovést za ručičku k cíli :( Ajax v PHP a snippety jsem pochopil, vytvořil jsem si na tom už dvě funkční komponenty, ale v tomhle případě si nevím rady. Potřebuji zkrátka zavolat handleMonth($month) v komponentě, kde $month bude value z vybraného <option>.

Nepochopil jsem, jak mi s tím má pomoct „nette.js s jQuery“. Nebo je to „řešítko“ právě na tenhle případ? Ale stejně nevím, jak ho implementovat a s jakými ho volat parametry…

LastHunter napsal(a):
Co dělám špatně? :)

Form zadne signaly sam o sobe nezpracovana. Pokud mu chces vnutit signal do tveho controlu, tak mu jen nastav do action pres $this->link(‚signal‘)
V metode handleAddComment() mas pristup ke vsem FormControlum a jeho hodnotam. Nekde predtim ale musis zavolat $form->isSubmitted(), aby si formular nacetl hodnoty z requestu.

LastHunter napsal(a):

Nemůžu to přece dávat do action, když to chci odesílat AJAXově.

Muzes ;)

nette.formAction(this, event) bere URL, kam se ma ajaxove poslat, prave z action. A obecne pokud funkce uvnitr onSubmit vraci false, tak k normalnimu odeslani formulare nedojde.

LastHunter napsal(a):

Kam tedy nacpat definici toho formuláře, aby ho ten handleComment už znal + to samé s $article?

Ja definici formulare davam do konstruktoru. Ale kdyby David udelal nejaky zivotni cyklus pro komponenty, tak bych se nezlobil :) Viz. https://forum.nette.org/…iewtopic.php?…

Neni mi jasne kde definujes $this->article, pravdepodobne ho predavas z presenteru, takze k dispozici musi byt. (v handleComment mas preklep, ma tam byt $this->article)

Editoval Ondrej (15. 2. 2009 14:03)

A máš v šablone onen magický zavináč? ,)

A máš ho aj v layoute v @{include $content} ? ,)

ahoj, potřeboval bych poradit s problémem při odesílání formuláře ajaxem. Upravil jsem všechny soubory a třídy dle návodů – AjaxAppForm, AjaxRenderer, nette.js

Problém mám ten, že se mi formulář postne 2x – když koukám na firebug konzoli, tak tam v nette.js vyskočí výjimka. Bohužel se hned potom odešle form klasicky, takže se konzola vyčistí pro novou stránku (nepřišel jsem na to, jak ve firebugu trasovat) nicméně se mi podařilo chybu vyfotit a hlásí to následující:

[Exception... "Component returned failure code: 0x80040111(NS_ERROR_NOT_AVAILABLE)
[nsIXMLHttpRequest.statusText]" nsresult: "0x80040111(NS_ERROR_NOT_AVAILABLE)"
location: "JS frame :: http://.../nette.js :: anonymous :: line 186" data: no]

- this.onError(this.ajax.status + " " ...Text + "\n\n" + this.ajax.responseText);

řádek funkce formAction: function(form, event) v nette.js, který vyvolal výjimku obsahuje:

<script>
try {
                var url = action + '-r=' + Math.random();
                var query = this.buildFormQuery(form, sender);

                this.ajax.open("POST", url, true);
                this.ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                this.ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                this.ajax.onreadystatechange = function() { nette.ajaxHandler(); }
tady to padne-> this.ajax.send(query);
                this.processing = 1;
                return true;

        }
</script>

hlásí to sice chybu, ale požadavek se odešle a událost handleAddItem() se provede a následně v důsledku chyby při ajaxu se provede klasicky, tudíž se mi položka přidá 2×.

Budu moc vděčný, když mi někdo dokáže poradit.

pro další informace přidávám i zdrojáky:

komponenta

<?php
class TDList extends Control
{

	/** @var bool */
	public $useAjax = true;

	/** @persistent */
	public $showAddForm = FALSE;

	protected $tddata;


	public function __construct()
	{
		parent::__construct();
		require_once dirname(__FILE__) . '/../models/TDData.php';
		$this->tddata = new TDData();
	}

	public function handleShowAddForm()
	{
		$this->showAddForm = $this->showAddForm ? false : true; //zobrazeni nebo skryti formuláře
		$this->invalidateControl('addForm');
	}

	public function handleMoveUp($item_id){
		$this->tddata->moveItemUp($item_id);
		$this->invalidateControl('itemsList');
	}

	public function handleAddItem(){
		$form = $this->getComponent("addItemForm");
		if ($form->isSubmitted()) {
			$formVals = $form->getValues();
			$this->invalidateControl();
			$this->handleShowAddForm();
			$this->tddata->createItem(array("subject"=>$formVals["subject"]));
		}
	}

	public function renderToDoList(){

		$td_list = $this->tddata->getItemsList();

		$template = $this->createTemplate();
		$template->useAjax = $this->useAjax;
		$template->setFile(dirname(__FILE__) . '/TDList.phtml');
		$template->showAddForm = $this->showAddForm;
		$template->td_list = $td_list;
		$template->addItemForm = $this->getComponent("addItemForm");

		$template->render();
	}

	protected function createComponentAddItemForm()
		{
				$form = new AjaxAppForm($this, $name);
				$renderer = new AjaxRenderer();
				$form->setRenderer($renderer);

				$form->addText("subject", "Subject: ")
						->addRule(Form::FILLED, 'Please enter a subject.');
				$form->addSubmit('submit1', 'Add Item');

				$form->onSubmit[] = array($this, 'handleAddItem');
	}
}
?>

šablona komponenty

<?php
{snippet addForm}
{if !$showAddForm}<a href="{link ShowAddForm}"{if $useAjax}onclick="return !nette.action(this)"{/if}>Přidat položku</a>{/if}
{if $showAddForm}
	{!$addItemForm}
{/if}
{/snippet}
{snippet itemsList}
	<ul>
	{? $pos = 0;}
	{foreach $td_list as $id=>$item}
	<li>
	{$id}&nbsp;{$item} {if $pos>0}<a href="{link MoveUp $id}"{if $useAjax}onclick="return !nette.action(this)"{/if}>&uarr; UP</a>{/if}
	</li>
	{? $pos++;}
	{/foreach}
	</ul>
{/snippet}
?>

@ v template view i layoutu mám.

Jen pro představu, co to má dělat. Snažím se udělat seznam položek, u kterých mohu měnit pořadí přesouváním položky o jednu výš a přidávat další položky pomocí jednoduchého formuláře, který se zobrazí až po kliknutí na odkaz pro zobrazení formu. Vše funguje hezky ajaxově, kromě přidání položky formulářem.

A ještě jedna a poslední záhada, kterou pozoruji. Při načtení formuláře je sice připojen js pro validaci formuláře, ale js ho nezvaliduje. Když odešlu prázdný formulář, validuje až server, ale když se pokusím o znovuodeslání špatně vyplněného formu, tak už vyskočí js alert. Je to zkrátka samá záhada :).

• PHP 5.2.6
• Nette Framework 0.8 (revision 220 released on 2009/02/25 19:45:34)

díky za tip! sice to úplně nepomohlo, ale aspoň jsem se kousek pohnul a našel jsem zdroj problému.

1. když jsem zaimplementoval jquery, tak se to stále ukládalo 2×, ale když jsem nejprve zkusil odeslat prázdný form, server provedl validaci, vypsal hlášku a znovu zobrazil formulář. Pak už to takhle jednou zvalidovaný formulář odesílalo pouze ajaxově, ale nevyskakoval alert o prázdném poli. Když jsem něco zadal, položka se ajaxově 1× přidala a formulář zmizel – tudíž očekávané chování, ale teprve u servervem zvalidovaného formuláře :(
2. to mě přivedlo k tomu, abych z formuláře zkusil odebrat validační pravidlo a hle – formulář funguje ajaxově jak má. Jak přes jquery, tak i klasicky jen s nette.js.

Otázkou však zůstává, jak zaonačit, aby fungovala validace před odesláním formuláře? Poradí, prosím, někdo?

jako ve tvých projektech s ajaxem nebo jsi zkoušel rozchodit ten můj příklad?

Editoval Jarda (10. 3. 2009 11:13)

hurrá, tak se mi to podařilo rozchodit… po celodenním seznamování se s jQuerry to lítá jak má vč. validace formuláře pomocí js.

Nakonec jsem skončil u následující sestavy:
Pro generování formuláře používám standardní AppForm a defaultní renderer, tak jak je v distribuci.
Pro vytváření ajaxových odkazů v šabloně používám pouze {if $useAjax}class="ajaxlink"{/if}
Pro zajaxovatění používám jQuery plugin od Honzy M. Díky za něj!

K tomu jsem si vytvořil (tedy spíše vykombinoval) tidyUp fci, která se volá při načtení dokumentu a po výměně snipetů, což je důležité, aby případně nově došlé klasické formuláře a odkazy zase zajaxovatěly.

<script>
var tidyUp   = function(){
	$(function () {
        // přiřaď všem současným i budoucím odkazům s třídou ajaxlink po kliknutí tuto funkci
        $("a.ajaxlink").live("click", function () {
                $.netteAjax(this.href);
                return false;
        });
	});

	$(function () {
        // odeslání na formulářích
        $("form").submit(function () {
                $(this).netteAjaxSubmit();
                return false;
    	});

        // odeslání pomocí tlačítek
        $("form :submit").click(function () {
                $(this).netteAjaxSubmit();
                return false;
        });

	});

	//tohle je taková moje vybastlenost pro zobrazení selectového
	//formuláře a jeho odeslání po změně hodnoty
	//nemá to obecné použití, nechávám pro inspiraci
        //takto mi funguje odesílání při změně selectboxu
	$("a.status").click(function(){
		$(this).hide();
		$($(this).attr("href")).show();
		$($(this).attr("href")+" select").change(function () {
			// ajaxové odeslání formuláře
              			 $(this.form).netteAjaxSubmit();
	 		});
	});

	//ostatní drobnosti, které potřebuji udělat při úklidu
	$('.hidden').hide();
	$("table tr:even").addClass("evenrow");
}
</script>

Omluvte, prosím, tento zápis. Mám takové tušení, že to není úplně jQuery košér,
že tam možná i něco přebývá, nebo je tam zbytečné. V jQuery jsem dneska dělal proprvé.

Nicméně tuto fci volám při načtení dokumentu a při dokončení ajaxového požadavku:

<script>
$(function () {
        $(document).ajaxStop(function () {
                tidyUp();
        });
});
</script>

Tak třeba to někomu pomůže, tak jako mně zde uvedené příklady, ze kterých se mi podařilo postupně vyzobat fungující řešení. Díky všem!

PS: nevím, v čem je chyba, že texy uvedlo oba kody v jednom bloku a zařadilo do toho i text, který do toho nepatří…

máš pravdu… na to tvé řešení jsem koukal… ale v jQuery zatím dost plavu a nepodařilo se mi to funkčně naimplementovat, i když je to určitě čistší řešení, než jsem použil…

Na fuknci live() jsem také koukal, že má umět obstarat i následně vytvořené elementy, ale právě bohužel neumí obsloužit vše, no časem to snad trochu učešu a případně postnu… ted jsem rád, že jsem rád :) když se mi to po celodenním úsilí podařilo zprovoznit, prostě euforie :D