Načítání poznámek ke článkům pomocí AJAX

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Klainer
Člen | 42
+
0
-

Dobrý den,
řeším menší problém, zatím neúspěšně. Mám výpis článků, po kliknutí na ikonu u jakého koli článku chci aby se mi načetli k němu vázené komentáře. Komentáře mají v DB cizí klíč na článek.

Aktuálně jsem se pokoušel to udělat tohle cestou:

Po kliknutí na tlačítko kometáře se mi mají zobrazi ke článku vázané komenty a formulář pro přidání dalšího komentu, který se rovněž přidá dynamicky.

Já to řeším tak, že neprve si v presenteru uložím do proměnné šablony (vouchers) všechny články, v šabloně je pomocí latte makra všechny projdu. Chci však ještě načíst ty komenty, tak tam mám tlačítko při jehož kliknutí se má odeslat ajax dotaz na presenter ke kterému článku komenty chci a komenty by se mi měli vrátit jako response dotazu např v JSON. Bohužel tohle se mi nepodařilo zprovoznit a myslím si, že to v nette jde podstatně jednodušeji. Nenapadá mě ale jakou lepší cestou se vydat.

AJAX, který volá handler v presenteru pro získání komentářu ke článku:

<script>

jQuery( document ).ready(function($) {

    function myCallback(payload) {
    //toto vypisuje NULL a melo by vypisovat id!!! :)
        alert(payload.ajax_number_id);
    };

    $(".showComments").on("click", function() {
            console.log("tr.comment");

            var number = $(this).attr('id');
          //  var sendInfo = { id: number };


            $.get("{link getNotes!, id = number}, function (data) {
                myCallback(data);
            });

             $("tr."+number).toggle();
        });
});

</script>

Volaná metoda Presenteru:

public function handleGetNotes($id)
{

   $this->template->comments = $this->commentRepository->findByVoucherId($id);

  if ($this->isAjax())
      //$this->invalidateControl('articles');
      $params = $this->getRequest()->getParams();
      $this->payload->ajax_number_id = $params['id'];
      //$this->sendResponse(new JsonResponse(array('key' => 'value')));
}

Metoda pro vypis článků:

	public function renderDefault()
	{
if (!$this->getUser()->isLoggedIn()) {
    $this->redirect('Sign:');
} else {

    $vp = new \VisualPaginator($this, 'vp');
    $paginator = $vp->getPaginator();
    $paginator->itemsPerPage = 15;
    $paginator->itemCount = $this->voucherRepository->count();

}


$this->template->vouchers = $this->voucherRepository->getItemsPaginate($paginator->getLength(), $paginator->getOffset());

	}

Šablona pro zobrazení článku – zatím tam není žádný výpis komentářů jen ukázkově nakodované komentáře:

{foreach $vouchers as $voucher}
          <tr>
              <td>

                  <button type="button" id="{$voucher->IdentityNumber}" class="btn btn-primary btn-xs showComments"><span class="glyphicon glyphicon-comment"></span></button>
                  <button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-print"></span></button>
              </td>
              <td>{$voucher->IdentityNumber}</td>
              <td>{$voucher->DateStart|date:'j. n. Y'}</td>
              <td>{$voucher->Name}</td>
              <td>{$voucher->Surname}</td>
              <td>{$voucher->Price}</td>
              <td>{$voucher->users->username}</td>
              <td><button type="button" class="btn btn-primary btn-xs">Přidat komentář</button></td>
          </tr>
          <tr class="comment {$voucher->IdentityNumber}" style="display: none;">
              <td  colspan="8">
                      <div class="list-group">
                          <a href="#" class="list-group-item">
                            <h4 class="list-group-item-heading">List group item heading</h4>
                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. List group item heading</p>
                          </a>
                          <a href="#" class="list-group-item ">
                            <h4 class="list-group-item-heading">List group item heading</h4>
                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. List group item heading</p>
                          </a>
                      </div>
                      <div>
                          {form commentForm-$voucher->id class => ajax}
                              <!-- Jednoduché vykreslení chyb -->
                              <ul class="errors" n:if="$form->hasErrors()">
                                      <li n:foreach="$form->errors as $error">{$error}</li>
                              </ul>

                              <fieldset>
                                <div class="form-group">
                                  <label for="exampleInputEmail">Text</label>

                                  <textarea n:input="text" class="form-control" id="cZprava" placeholder="Zpráva"></textarea>
                                  <input n:input="itemId" type="hidden" id="idOfVoucher" value="{$voucher->id}">

                                </div>

                                  {input send}
                              </fieldset>
                          {/form}
                      </div>
              </td>
          </tr>
      {/foreach}

Děkuji za nápady a postřehy !

mkoubik
Člen | 728
+
0
-

{link getNotes!, id = number} ti pochopitelně v javascriptu fungovat nebude (URL se generuje na serveru a number je proměnná z javascriptu). Ostatně generovat javascript pomocí latte bych ti ani moc nedoporučoval.
Místo toho tlačítka s classou showComments si tam dej link na signál presenteru:

<a n:href="getNotes! id => $voucher->IdentityNumber">

pak si v javascriptu odchyť ten json a dělej si s ním co chceš, i když lepší by mi přišlo použít snippety (funguje to pak i bez javascriptu).

Editoval mkoubik (12. 8. 2013 9:45)

Klainer
Člen | 42
+
0
-

Jasně, díky. Já jsem o snippetech přemýšlel a hledal jsem všude možně, bohužel mě nenapadá jak to přes ně realizovat. Jak přes ně načítat komentáře pouze ke konkrétnímu článku, když jich na stránce bude ve výpisu např 15 ? Asi jsem špatně hledal ale nikde jsem nenašel, podobné řešení, které určitě existuje.

Napadá mě udělat dynamický snippet, s id článku jako parametr. Po kliknutí na tlačítko napsané jak jsi zde uvedl, se načtou data do nějaké proměnné comments a požádal bych o invalidaci snippetu. Podobně něco jako v tomhle tutoriálu: Tutorial

Dík za radu.

Edit:

Snažím se to udělat přes snippety, tady je upravený presenter:

{foreach $vouchers as $voucher}
           <tr>
               <td>
             <a class="btn btn-primary btn-xs showComments ajax" id="{$voucher->IdentityNumber}" n:href="GetNotes! $voucher->IdentityNumber"><span class="glyphicon glyphicon-comment"></span></a>

                   <button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-print"></span></button>
               </td>
               <td>{$voucher->IdentityNumber}</td>
               <td>{$voucher->DateStart|date:'j. n. Y'}</td>
               <td>{$voucher->Name}</td>
               <td>{$voucher->Surname}</td>
               <td>{$voucher->Price}</td>
               <td>{$voucher->users->username}</td>
               <td><button type="button" class="btn btn-primary btn-xs">Přidat komentář</button></td>
           </tr>
           <tr class="comment {$voucher->IdentityNumber}" style="display: none;">
               <td  colspan="8">

                   {snippet comments-$voucher->IdentityNumber}

                       {ifset $comments}

                           {foreach $comments as $comment}
                               <p>{$comment->Text}</p>
                                                           <div class="list-group">
                               <a href="#" class="list-group-item">
                                 <h4 class="list-group-item-heading">List group item heading</h4>
                                 <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. List group item heading</p>
                               </a>
                               <a href="#" class="list-group-item ">
                                 <h4 class="list-group-item-heading">List group item heading</h4>
                                 <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. List group item heading</p>
                               </a>
                           </div>
                           {/foreach}

                           {dump $comments}




                          {else}

                              <p>Nejsou komentáře</p>

                        {/ifset}

                   {/snippet}

                       <div>
                           {form commentForm-$voucher->id class => ajax}
                               <!-- Jednoduché vykreslení chyb -->
                               <ul class="errors" n:if="$form->hasErrors()">
                                       <li n:foreach="$form->errors as $error">{$error}</li>
                               </ul>

                               <fieldset>
                                 <div class="form-group">
                                   <label for="exampleInputEmail">Text</label>

                                   <textarea n:input="text" class="form-control" id="cZprava" placeholder="Zpráva"></textarea>
                                   <input n:input="itemId" type="hidden" id="idOfVoucher" value="{$voucher->id}">

                                 </div>

                                   {input send}
                               </fieldset>
                           {/form}
                       </div>
               </td>
           </tr>
       {/foreach}

A zde pak handler v presenteru který by to měl vše aktualizovat:

public function handleGetNotes($id)
{

        if (!$this->isAjax()) {
               $this->redirect('Homepage:default');

           } else {
               // Také vymaži odeslané hodnoty ve formuláři pomocí volání setValues.

               //$this->invalidateControl('comments-' . $id);
               $this->template->comments = $this->commentRepository->findByVoucherId($id);
               $this->invalidateControl('voucherTable');

               $this->flashMessage('Nový voucher byl vložen do databáze!');
               $this->invalidateControl('flashMessages');
           }


      //
      //$this->sendResponse(new JsonResponse(array('key' => 'value')));
}

Bohužel se mi žádné komentáře nevypíšou.. Nevíte co dělám špatně ?

Editoval Klainer (12. 8. 2013 13:30)