Simple ajax example
This tutorial builds on Nette 2.0.10 sandbox.
Setup
First, we download Nette and use content of sandbox
folder as base for
our tutorial.
Than we need to link Nette Ajax addon. Lets download current version of
nette.ajax.js. Place it to www/js
folder.
Templates/@layout.latte
{block scripts}
<script src="{$basePath}/js/jquery.js"></script>
<script src="{$basePath}/js/netteForms.js"></script>
<script src="{$basePath}/js/nette.ajax.js"></script> {* Nette Ajax depens on jQuery *}
<script src="{$basePath}/js/main.js"></script>
{/block}
Than we initiate Nette Ajax in main.js
:
$(function () {
$.nette.init();
});
Simple $.nette.init()
enables link and form ajaxization via class .ajax
. To get more info see usage on addon page.
In presenter
This is the most simple use of Nette Ajax. Here we go!
HomepagePresenter.php
class HomepagePresenter extends BasePresenter
{
/** @var string */
private $anyVariable;
public function handleChangeVariable()
{
$this->anyVariable = 'changed value via ajax';
if ($this->isAjax()) {
$this->redrawControl('ajaxChange');
}
}
public function renderDefault()
{
if ($this->anyVariable === null) {
$this->anyVariable = 'default value';
}
$this->template->anyVariable = $this->anyVariable;
}
}
To change value in template we need to use special property $anyVariable
. If we would use
$this->template->anyVariable = '...'
both in handle*
and render*
, only
render*
would matter, see life cycle of
presenter.
Homepage/default.latte
<div id="content">
{snippet ajaxChange}
{$anyVariable}
{/snippet}
<a n:href="changeVariable!" class="ajax">Change variable!</a>
</div>
Now just go and click on Change variable! link. default value should change to “changed value via ajax”.
In component
If you want to use ajax in component, you can check ajax in documentation.