Mazanie s jQuery AJAX

HTML

Naše príspevky budú mať jednoduchú štruktúru, ukážme si teda akú, aby sme mohli prispôsobiť náš kód.

<div class="prispevok" id="id_prispevku"> <div class="meno">autor_prispevku</div> <div class="text">text_prispevku</div> <a href="#" class="zmazat">zmazať</a> <div class="clear"></div> </div>

jQuery

Našim cieľom v jQuery bude reakcia na stlačenie odkazu zmazat. Po stlačení nám vyskočí načítavanie, zmaže nám príspevok z databázy a odstráni nám div. Nakoniec nás ešte upozorní, že príspevok bol odstránený.

Najskôr si vytvoríme reakciu na stlačenie odkazu zmazat. Do reakcie si uložíme div element príspevku, ktorý chceme zmazať, do premennej prispevokDiv. A uložíme si ID daného príspevku do premennej id. Pridáme return false;, ktorý zabráni odkazu aby šiel na #.

$('a.zmazat').click(function() { var prispevokDiv = $(this).parent(); var prispevokId = prispevokDiv.attr('id'); return false; });

Prejdime k samotnému ajax, ktorý zavolá php script na odstránenie príspevku z databázy. Potom odstránime element, to môžeme prepojiť s mnohými animáciami, mi si ukážeme slideUp(). Po skončení animácie sa element odstráni.

$.ajax({ type: 'POST', url: 'delete.php', data: ({id : prispevokId}), success: function(){ prispevokDiv.slideUp('slow', function() { $(this).remove(); } ); } });

Ešte si pridajme nejaké upozornenie, že sa niečo deje pridaním textu “načítavam” a po skončení nech sa odstráni.

beforeSend: function(){ $('body').append('<div class="akcia">načítavam ...</div>'); } <p>Nakoniec este vylspešíme náš success, ktorý nám po spracovaní ajaxu zmení text, že príspevok bol zmazaný a upozornenie zmyzne efektom <code>slideUp()</code>.</p> <textarea name="code" class="javascript"> success: function(){ prispevokDiv.slideUp('slow', function() { $(this).remove(); } ); $('#akcia-'+prispevokId) .text('príspevok bol odstránený') .delay(800) .slideUp('slow', function() { $(this).remove(); } ); }

Úplne nakoniec ešte ešte pridáme $(document).ready, aby počkal dokiaľ sa stránka úplne nenačíta, a náš výsledný kód vyzerá takto:

$(document).ready(function() { $('a.zmazat').click(function() { var prispevokDiv = $(this).parent(); var prispevokId = prispevokDiv.attr('id'); $.ajax({ type: 'POST', url: 'delete.php', data: ({id : prispevokId}), beforeSend: function(){ $('#prispevky').append('<div class="akcia" id="akcia-'+prispevokId+'">načítavam ...</div>'); }, success: function(){ prispevokDiv.slideUp('slow', function() { $(this).remove(); } ); $('#akcia-'+prispevokId) .text('príspevok bol odstránený') .delay(800) .slideUp('slow', function() { $(this).remove(); } ); } }); return false; }); });

V tomto momente máme mazanie príspevkov hotové. Vy ešte musíte spraviť SQL príkaz, na mazanie príspevku z databázy a uložiť ho do delete.php. ID príspevku získate pomocou $_POST['id'].

Tagy: ajax mazanie odstranovanie databaza php