Načtení nových dat do bloku po události onclick

Why?! napsal(a):

Bez použití nette, bych to řešil jednoduše, že např. na ajaxovej odkaz v jednom bloku bych dal do onclicku nějakou funkci, která by 1) vykonala JS a za 2) pomocí jQuery pluginu funkcí ajax_loadcontent bych si zavolal skript s parametrama přes get, kterej chci vykonat a jeho výsledek by se vložil do požadovanýho bloku.

S použitím nette, bych to řešil jednoduše: bloky bych obalil do snippetů, na ajaxovej odkaz v jednom bloku bych dal do onclicku nějakou funkci, která by 1) vykonala JS a za 2) pomocí jQuery a AJAX Nette Framework pluginu for jQuery, bych si ajaxově zavolal skript, kterej chci vykonat, ve skriptu bych invalidoval pojmenované snippety k aktualizaci a výsledek se vloží do požadovaných snippetů.

1. Pokud to chceš mít v externím souboru tak musíš zpracovávat JS skripty WebLoaderem nebo něčím podobným, protože LatteFilter se tam nedostane…
2. V JSONu se jednak posílá HTML a jednak i stav snippetů…

Tak jsem si s tím hrál, a nevím si pořád rady :( Kód je níže… Potřebuji, když kliknu na odkaz <a href="#" onclick="ajaxrefresh(1);">atualizuj snippet s id 1</a>, aby se aktalizoval snippet a to tak, aby se znovunačtená akce v presenteru function handleLoadFiltry_ulozene($id) zavolala s parametrem 1, jenže nevím, jak to v tom externim js souboru poslat do presenteru, aby se to vykonalo, navíc se mi zdá, že to vůbec nic nedělá

Presenter WallPresenter.php:

<?php
class WallPresenter extends BasePresenter
{
    private $wallModel;

    function startup()
    {
        parent::startup();
        if (!$this->user->isLoggedIn()) {                // kontrola, jestli je přihášenej
            $this->flashMessage('Abyste mohl sledovat zeď, musíte se přihlásit.');
            $this->redirect('Sign:in');
        }
    }
    public function handleLoadFiltry_ulozene($id) {

      if ($this->presenter->isAjax()) {
                      if ($id==1) $filtry_ulozene=0;
                      else $filtry_ulozene=array(1=>"první položka", 2=>"druhá položka");
                      $this->invalidateControl('filtry_ulozene');
                      $this->presenter->terminate();
      } else {
              $this->presenter->redirect('this');
      }
      $this->presenter->sendPayload();
    }
}

Šablona:

{block content}
          <h2>Uložené filtry</h2>
          {snippet filtry_ulozene}
            {if empty($filtry_ulozene)}
                <div class="info2" id="rychlyfiltr">Nemáte uložený žádný filtr. Uložení stavu filtru vám umožní tento stav později jediným klikem vyvolat. Pokud například označíte všechna políčka filtru, můžete si vytvořit rychlý filtr "vše", po jehož stisknutí se na zdi zobrazí všchny kategorie. Začněte kliknutím na ikonku pro uložení.</div>
            {else}
                <ul id="rychlyfiltr">
                {foreach $filtr as $id => $nazev}
                <li><a href="#zpr">{$nazev}</a><span class="ikonyvpravo"><a onclick="spanner{$id}" title="settings" class="ico_settings"></a><a href="#" title="drag" class="ico_drag"></a></span></li>
                {/foreach}
                </ul>
            {/if}
          {/snippet}
          <a href="#" onclick="ajaxrefresh(1);">atualizuj snippet s id 1</a>
          <a href="#" onclick="ajaxrefresh(2);">atualizuj snippet s id 2</a>

V nalinkovaném js sobor mám:

function ajaxrefresh(id)
{
    event.preventDefault();
    $.get(link loadFiltry_ulozene);    // a jak si předám ten parametr ID?
}

Díky za trpělivost, jsem ještě lama :)

Editoval Why?! (28. 10. 2010 14:02)

Nepomáhá… Tu stránku už jsem několikrát pročet a pomocí ní jsem udělal ten kód, co je výše, průběžně h aktualizju podle toho co se dovim. Mám to tam nalinkovaný a jediný co jsem se v tom manuálu dozvěděl je, že tam mám dát někam $.get("someUrl"); – ale kam a jak, jak tam dám link na presenter a akci (už jsem to udělal jak jsi říkal ale pořád to nefunguje), jak pošlu parametry, třeba to ID? Nevím, a to už jsem tam nenašel :(

Tady všichni předpokládaj, že takový „jednodchosti“ jsou každýmu zřejmý, ale já s tim nikdy nedělal, js umim okrajově a nette trochu ze školení, jenže tam už na ajax nebylo moc času… Já ten princip asi chápu, bez nette jsem ajax přes jquery normálně úplně jednodše používal…

Jen prostě nevim, jak to mam zapsat syntaxí, potřeboval bych nějakou ukázku kde to takhle funguje, nebo přesně upravit ten kód výše, co mám napsat jinak… Ta tvoje ukázka je sice hezká a tak nějak bych si to představoval, jenže k čemu mi je, když nevidím do její vnitřní struktury.. :)

Editoval Why?! (28. 10. 2010 14:03)

No, možná se někomu bude zdát že jsem natvrdlej… :-)) ale pořád tomu nerozumím, ten js teda patří do hlavní šablony toho presenteru?

a tím $('tr.ajax').live('click', function(event) určuješ fci, co se má vykonat po kliknutí na element tr s třídou ajax? Kde si v tom kódu posíláš to ID, který se objeví jako parametr fce v presenteru?

Ta druhá část je z presenteru a říkáš tam, že template tý fce je nějaká proměnná, tu získáš z modelu? Co v ní je? A tím si nějak zalinkuješ, aby se pro ten snippet použil nějakej konkrétní template, kterej vypadá tak, jak jsi napsal?

A do templatu si ho pak vložíš normálně {include #bandetails} ?

Omlouvám se za tolik otázek, ale nemám funkční příklad, kde by fungoval odkaz posílající parametry do fce presenteru, ze kterýho bych to snad nějak vykoumal :( Nemá náhodou někdo něco takovýho? Jestli ne, tak pokud se mi to podaří vyřešit, mohl bych to tu poskytnout, protože myslím, že takový základní příklad použití by ulehčil cestu mnoha lidem :) Pak už se to dá modifikovat na všechno, třeba na akci onkeyup s tím, že jako parametr se pošle aktuální value inputu a může to bejt třeba našeptávač… zkrátka se s tim už pak dá udělat skoro cokoliv, ne? (nebo aspoň co si já dovedu představit…)

Dík za trpělivost :))

Editoval Why?! (2. 11. 2010 1:07)

Tak jsem se k tomu po delší době dostal, a chápu to zase o trochu víc, nicméně mi to pořád nejde. Tak jsem se to snažil maximálně zjednodušit a udělal jsem novej nette project, kde jsem v sandboxu změnil jen homepagepresenter a jeho template, ukázka zde: http://netteajax.whys.cz/root/

• funkčnost týhle ukázkový aplikace má být taková: nad tlačítka se implicitně načte, že není zvolen žádný parametr. Po stitku tlačítka ovoce nebo zelenina se místo tohoto textu načte seznam ovoce nebo zeleniny, který předá presenter. Kód vypadá takto:

presenter:

class HomepagePresenter extends BasePresenter
{

	public function renderDefault()
	{
		$this->template->anyVariable = 'any value';
	}
  public function handleAjax_blok($id) {
            /** Zpracovani **/
      if ($id==1) $this->template->polozky = array ('jahoda', 'banán', 'jablko');
      elseif ($id==2) $this->template->polozky = array ('mrkev', 'okurka', 'zelí' );
      $this->template->blocked = $timesBlocked;
      $this->invalidateControl('ajax_blok');
  }
}

template:

{block content}

  {snippet ajax_blok}
    @{if empty($parametr)}
        <div class="info2" id="rychlyfiltr">Nemáte uložený žádný parametr.</div>
    {else}
        <ul id="ajax_blok">
        {foreach $parametr as $nazev}
        <li>{$nazev}</li>
        {/foreach}
        </ul>
    @{/if}
  {/snippet}


  <input type="submit" class="ajax-ovocezelenina" id="polozka-1" value="ovoce">
  <input type="submit" class="ajax-ovocezelenina" id="polozka-2" value="zelenina">

  <script type="text/javascript">
  $('input.ajax-ovocezelenina').live('click', function(event) {
  	event.preventDefault();
  	if ($.active) return;

  	$.post("\/?dalsiparametr=nejakejparametr", { id: this.id.substr(8) }, function(payload) {
  		$.nette.success(payload);
  		$('#ajax_blok').hide();
  		$.fancybox($('#ajax_blok').html(), {
  			'autoDimensions': true,
  			'autoScale': false,
  			'scrolling': 'no',
  			'onComplete': function() {
  				$.fancybox.resize();
  			}
  		});
  	});

  	$.nette.spinner.css({
  		position: 'absolute',
  		left: event.pageX,
  		top: event.pageY
  	});
  });
  </script>

… jenže to zase nic nedělá… :(

Tak tady je demo AJAXu, postaveno na Nette 2.0-alpha pro PHP 5.3 a jde o skeleton s přidaným AJAXovým voláním. Doufám že aspoň tohle pomůže…

V 5.2 to funguje úplně stejně. Nainstaluj si Firebug a podívej se co je špatně, mě to včera normálně fungovalo…