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.