AJAX – skrytie a odoslanie requestu

Peppy

Mám riadok v tabuľke. Mám v ňom odkaz, po kliknutí na ten odkaz by sa mali vykonať 3 veci:

Potvrdiť akciu (window.confirm)
Poslať HTTP POST request na handler v presenteri.
Skryť daný riadok.

Robím to v jQuery (takže je k tomu aj jQuery.Nette). Ide o to, ako naformulovať ten odkaz tak, aby to robilo všetky veci. Navyše sa musia posielať POSTom dáta, špeciálne pre ten riadok. Ukážka kódu:

{foreach $infos as $info}
   <tr>
       <td class="col1"> <a href="info/view/info-{$info['id']}">{$info['name']}</a> </td>
       <td class="col2">{$info['expiredate']}</td>
       <td class="col3">
	   <a href="info/edit/info-{$info['id']}">Editovať</a> &nbsp;
	   <a n:href="">Hotové</a> &nbsp; <!-- <-- TU -->
	   <a href="info/remove/info-{$info['id']}">Odstrániť</a>
       </td>
   </tr>
{/foreach}

To isté by som chcel dosiahnuť aj pri akcii „remove“. Nie je na to nejaký obrázok, kto čo koho kedy ako volá? (Zišlo by sa to.) Ide tiež o to, že neviem ako predať to {$info['id']} JavaScriptu.

// EDIT:
To id asi šupnem na rodiča – na riadok tabuľky.

Editoval Peppy (11. 8. 2011 14:37)

Peppy

ništ? Viem, že AJAX+Nette je ešte nedotiahnuté, ale fakt ani náznak nejakého nápadu?

22

Nedotáhnuý AJAX a Nette? nono..
Jestli chceš něco dělat v Nette a to i bez AJAXu, musíš nejdřív znát žívotní cyklus presenteru, takže jsi zase něco přeskočil v dokumentaci.

Mikulas Dite

Tak Nette to v pohodě umí, ale spíš je to JS záležitost.

{foreach $infos as $info}
   <tr data-id="$info['id']">
       <td class="col1"> <a href="info/view/info-{$info['id']}">{$info['name']}</a> </td>
       <td class="col2">{$info['expiredate']}</td>
       <td class="col3">
           <a href="info/edit/info-{$info['id']}">Editovať</a> &nbsp;
           <a n:href="">Hotové</a> &nbsp; <!-- <-- TU -->
           <a href="info/remove/info-{$info['id']}">Odstrániť</a>
       </td>
   </tr>
{/foreach}

$("a.ajax[href*='/edit/']").live("click", function (event) {
    event.preventDefault();
    var id = $(this).parent('tr').data('id');

    // before edit event
    $.get(this.href, function (payload) {
        $.nette.success(payload);
        // after edit event
    }
});
$("a.ajax[href*='/remove/']").live("click", function (event) {
    event.preventDefault();
    var id = $(this).parent('tr').data('id');

    // before remove event
    $.get(this.href, function (payload) {
        $.nette.success(payload);
        // after remove event
    }
});
});

Editoval Mikulas Dite (11. 8. 2011 19:07)

Peppy

Z doc.nette.org: MVC ap & presentery ale nikdy sa nepíše o interakcii medzi Client-Side a Server-side…

Darkry

tak si to ověř pomocí javascriptu to neni těžký onClick="return confirm('...','')"

A proč to chceš poslat postem? Neni lepší pomocí makra {link} volat handle a předat mu parametr? A pokud chceš pak skrýt smazaný řádek nebo aktualizovat ten upravený tak to dej do snippetu, kterej pak invaliduješ (v tom handlu)

Mikulas Dite

@Darkry: přes snippet by to šlo. Ale rozhodně ne pomocí onClick, raději dynamicky přes ty jquery selectory $("a.ajax[href='/remove/']").live("click", function (event) {});.

Peppy

@Dite: funguje to ;), až na to, že sa musím prebojovať pomocou jQuery na druhú úroveň, tj.:

<script>
var id = $("a").parent().parent().attr('id');
</script>

Peppy

@Darky: Cez snippet to nejde.
Jediný možný zápis:

{snippet tabulka} <!-- Potom snippet obsahuje celú tabuľku, to znamená, že celá tabuľka sa musí prekresliť -->
  {foreach $u_todos as $todo}
   <tr id="note-{$todo['id']}">
	<td class="col1"> <a href="note/view/note-{$todo['id']}">{$todo['name']}</a> </td>
	<td class="col2">{$todo['expiredate']}</td>
	<td class="col3">
	   <a href="note/edit/note-{$todo['id']}">Editovať</a> &nbsp;
	   <a href="#done-todo">Hotové</a> &nbsp;
	   <a href="#remove-todo">Odstrániť</a>
       </td>
   </tr>
   {/foreach}
{/snippet}

Peppy

Á, už to ide. Už tomu chápem. Stačí len praktizovať. No, Nette ma čím ďalej, tým viac fascinuje…zaslúži si darček…aký? nechajte sa prekvapiť.

// EDIT: jQuery:

<script>
	$("a[href*='?do=Done']").live("click", function(event){
	    event.preventDefault();

	    var id = $(this).parent().parent().attr('id');
	    var $row = $(this).parent().parent();

	    $.get(this.href, { nid: id}, function() { $row.hide(400); });
	    return false;
	});

	$("a[href*='?do=Remove']").live("click", function(event){
	    event.preventDefault();
	    var $row = $(this).parent().parent();
	    var id = $(this).parent().parent().attr('id');

	    $.get(this.href, { nid: id}, function(){ $row.hide(400); });
	    return false;
	});
</script>

Editoval Peppy (11. 8. 2011 19:27)