Volání modelu nebo php souboru skrze AJAX
- Rndoom04
- Člen | 75
VYŘEŠENO
Zdravím nettaři :)
Rád bych si nechal poradit, jakým šikovným způsobem můžu skrze ajax spouštět databázový model?
Abych řekl o co jde. Rád bych si nechal načíst data ze Zásilkovny. Aktuálnost dat momentálně neřeším. Data mám zapsané v databázi a rád bych, aby při kliknutí na tlačítko „Načíst Zásilkovnu“ se data načetla a vypsala.
V klasickém prodedurálním programování jsem to řešil následovně:
- Klikl jsem na tlačítko
- Spustil se jquery, který skrze ajax odkazoval na /data/zasilkovna-load.php
- Tam se to přihlásilo k databázi, spustilo čtení a vrátilo to array zpět do ajaxu
- Z vrácených dat se vyrenderovalo <ul><li>..
A jelikož má nette nějaký životní cyklus, přijde mi toto řešení tak trochu nelegální.
Děkuji za každou pomoc a přeji hezký den. :)
Editoval Rndoom04 (3. 2. 2019 16:49)
- uestla
- Backer | 799
Postup je podobný, jen ho zasadíš do MVP:
1. vytvoříš presenter a akci, ve které si načteš data a pošleš formou JSONu:
final class ZasilkovnaPresenter extends \Nette\Application\UI\Presenter
{
public function actionLoadData()
{
$data = ...; // načíst z modelu
$this->sendJson($data);
}
}
2. v jQuery uděláš AJAX request na danou akci
$.get({link Zasilkovna:loadData}, function (payload) {
console.log(payload);
});
- Rndoom04
- Člen | 75
Super, děkuji za radu. :) Vypadá to strašně jednoduše, ale zasekl jsem se u kroku č. 2.
v @layout.latte mám
<script src="{$basePath}/js/nette.ajax.js"></script>
<script src="{$basePath}/js/main.js?v={$version}"></script>
a v main.js toto:
$("a#load-zasilkovna").click(function() {
console.log($.nette.init());
var url = {link Zasilkovna:loadData};
$.get(url, function (payload) {
console.log(payload);
});
});
To mi ale hlásí chybu.
"Expected: but found Zasilkovna
var url = {link Zasilkovna:loadData};
The global variable „loadData“ is not declared."
Co se týče kroku 1, to jsem udělal tak, že jsem vytvořil ZasilkovnaPresenter.php a něm toto:
<?php
namespace App\Presenters;
final class ZasilkovnaPresenter extends \Nette\Application\UI\Presenter
{
public function actionLoadData()
{
$data = "Toto jsou data";
$this->sendJson($data);
}
}
Konzole v prohlížeči hlásí:
SyntaxError: missing : after property id – na řádku 52, což je řádek var
url = {link Zasilkovna:loadData};
Kde mohu dělat chybu? :)
- uestla
- Backer | 799
Je to proto, že main.js
se neprohání přes Latte, a tedy
makro {link Zasilkovna:loadData}
se nezpracuje.
Řešením je si danou URL adresu předat přes nějaký atribut daného
elementu – ať už href
nebo vlastní data-
atribut.
Jelikož řešíš AJAXový scénář, možná bych místo elementu
<a />
použil <button />
:
<button type="button" data-ajax-url="{link Zasilkovna:loadData}" id="load-zasilkovna">Načíst data</button>
A v main.js
potom
$(window.document).on('click', '#load-zasilkovna', function (event) {
var url = $(this).attr('data-ajax-url');
$.get(url, function (payload) {
console.log(payload);
});
});