Volání modelu nebo php souboru skrze AJAX

Rndoom04
Člen | 72
+
0
-

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ě:

  1. Klikl jsem na tlačítko
  2. Spustil se jquery, který skrze ajax odkazoval na /data/zasilkovna-load.php
  3. Tam se to přihlásilo k databázi, spustilo čtení a vrátilo to array zpět do ajaxu
  4. 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 | 796
+
+1
-

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 | 72
+
0
-

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 | 796
+
+1
-

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);
	});
});
Rndoom04
Člen | 72
+
+1
-

Zlatého bludišťáka pro tebe!

Strašně moc děkuju! :)