Předání proměné z AJAX do handle, nefunguje modal, ačkoliv data jsou v XHR

ragulin

Ahoj, mám takový trošku zádrhel, který se mi nedaří vyřešit.
Nejsem moc kamarád s AJAX a JS, takže o to je to pro mě složitější, pokud by Vás napadlo co je špatně, ocenil bych i trochu vysvětlení.

Mám nějakou komponentu, ve které mám tlačítko, kterým volám handle v controlu té komponenty. V control komponenty posílám předaný parametr ID do AJAX pomocí sendJson.

Šablona komponenty

<button type="button"
    class="btn btn-primary btn-sm set-modal detailModal"
    {*href="#detailModal"*}
    data-link="{link controlId!, $detailInfo['id']}"
    data="{$detailInfo['id']}">Detail</button>

Handle v controlu komponenty

public function handleControlId($detailId)
{
    $this->detailId = $detailId;
    $this->presenter->sendJson($detailId);
    $this->redrawControl();
		    }

Tak, nyní mám v šabloně Homepage Presenteru vytvořen link, který si tahám do JS. Tento link odkazuje na handle v HomepagePresenteru. Nepředává mu ale žádný parametr, protože to prostě není možné. detailId nedokážu v této šabloně získat.

Homepage Presenter šablona

<div><a n:href="HomepageId!" id="HomepageIdUrl">Test</a></div>

Nyní mám nějaký Javascriptový kód, který to celý obsluhuje. Jeho úkol je vzít proměnou poslanou z Handle v control komponenty a poslat jí do Homepage presenter do onoho handlu.

const test = document.getElementById("HomepageIdUrl").href;
       $('.detailModal').on('click', function () {
          var url = $(this).attr('data-link');
          var detailId = $(this).attr('data');
               $.ajax({
              method: 'post',
              url: test,
              data: {detailId: detailId},
              success: function (payload) {
                  $('#detailModal').modal('show');
              }

Tohle všechno proběhne v pořádku. V Homepage Presenter mohu dumpovat předanou proměnou id, bez potíží se propíše do XHR. To ID potom dál používám na to, aby se mi vytáhli data z DB v renderu, a poslali se do šablony, kde se otevřou v modalu, který je spuštěný tlačítkem z Šablony komponenty.

Ty data se vytáhnou. Snippet se překreslí v XHR. v XHR se dokonce i v tom překresleném snippetu propíšou ty data z té databáze. Ale Modal se otevře vždy prázdný, bez dat. Nerozumím tomu proč, co dělám špatně.

Pro úplnost přidávám tedy tento kod:

Homepage presenter

    public function handleHomepageId()
    {
        $detailId = $this->presenter->getHttpRequest()->getPost('detailId');
        $this->detailId = $detailId;
        $this->detailInfoId =  $this->detailModel->getdetailInfo($this->detailId)->fetch();
        if ($this->presenter->isAjax()) {
            $this->redrawControl('detailModal');
        } else {
            $this->presenter->redirect('this');
        }
    }
public function renderDetail () {
  $this->template->detailInfoId = $this->detailInfoId;
}

Modal v šabloně presenteru homepage
Ten dump zde mi vrací null, ačkoliv data v XHR jsou…

{snippet detailModal}
       <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
            aria-hidden="true">
           <div class="modal-dialog" role="document">

               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title" id="blokaceModalLabel">Detail</h5>
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">&times;</span>
                       </button>
                   </div>
                   {dump($detailInfoId['code'])}


                   <div class="modal-body">
                     </div>


           </div>
       </div>
   {/snippet}

Vím, že je to složitý problém, ale snažím se to vyřešit už zhruba dva týdny a pořád se motám od jedné zdi k druhé, snažil jsem se vysvětlit co nejlépe problém. Prostě data v XHR jsou předána, v handle v Homepage PResenteru mám předané ID, ale jak otevřu modal, data se nepropíšou a mám prázdný okno. Děkuji za radu

Editoval ragulin (22. 7. 2019 13:49)

David Matějka

volas $.ajax a nikoliv $.nette.ajax. tim padem nedojde k prekresleni snippetu.

ragulin

David Matějka napsal(a):

volas $.ajax a nikoliv $.nette.ajax. tim padem nedojde k prekresleni snippetu.

Děkuji, nyní se problém změnil. Preview v XHR mi vypisuje „Failed to load response data“ , takže jdu googlit a logovat proč, co se děje. Budu se tedy držet toho, že tam musí být ajax.nette.

David Matějka

ajax.nette tam byt nemusi, ale musis provest prekresleni snippetu v DOMu, ta zakladni implementace muze vypadat nasledovne:

for (let id in payload.snippets) {
	const target = document.getElementById(id)
	const html = payload.snippets[id]
	target.innerHTML = html
}

ragulin

David Matějka napsal(a):

ajax.nette tam byt nemusi, ale musis provest prekresleni snippetu v DOMu, ta zakladni implementace muze vypadat nasledovne:
for (let id in payload.snippets) {
	const target = document.getElementById(id)
	const html = payload.snippets[id]
	target.innerHTML = html
}

No, já si myslím, že by to šlo i s tím nette.ajax, jen tam asi posílám špatně data, nejspíš to někde nemám v JSON a proto mi to píše, že je nemohl načíst. Hledám teď kde by to mohlo být.

Editoval ragulin (22. 7. 2019 15:05)