Ajax – wywołanie funkcji po kliknięciu

Powiedzmy, że mamy funkcję, której wywołanie powoduje ukrycie zadanego wpisu (funkcja spełniająca takie zadanie jest podpięta w IPB pod guzik umieszczony pod każdym wpisem):

<div id="wpis10"><p>#10: przykładowy tekst</p></div>

<script type="text/javascript">
function ukryj_wpis( id ) {
 $.ajax({
   type: "POST",
   url: "ukryj.php",
   data: "id="+id,
   success: function(msg){
    // odpowiednie operacje
   }
 });
return false ;
}
</script>

Aby wywołać taką funkcję należy doczepić się do zdarzenia onclick. Można to zrobić dopisując onclick do obiektu. W przypadku linków trzeba będzie zadbać o zablokowanie przejścia pod wskazany adres. Innym sposobem jest podczepienie się przy pomocy jQuery do zdarzenia .click lub .live (to drugie zadba o prawidłowe działanie zdarzeń w przypadku, gdy na stronie będą dodawane nowe elementy).

Przykłady z użyciem onclick:

<a href="adres_dla_ludzi_bez_js" onclick="return ukryj_wpis( 10 )">ukryj wpis #10</a>

<span onclick="ukryj_wpis( 10 )">ukryj wpis #10</span>

(return umieszczony przed ukryj_wpis odeśle wynik funkcji, czyli false, dzięki temu przeglądarka zrezygnuje z przejścia na adres_dla_ludzi_bez_js).

Przykłady z użyciem jQuery:

<div class="ukrywacz" rel="10"><p>ukryj wpis #10</p></div>

* .click

<script type="text/javascript">
$("div.ukrywacz").click( function() {
  id = $(this).attr( 'rel' ) ;
  ukryj_wpis( id ) ;
}) ;
</script>

* .live

<script type="text/javascript">
$("div.ukrywacz").live('click', function() {
  id = $(this).attr( 'rel' ) ;
  ukryj_wpis( id ) ;
});
</script>

Pozostaje jeszcze kwestia odpowiedniej reakcji na odebraną odpowiedź. Kod wywoływany w bloku success nie będzie widział wartości zmiennej id. Jednym ze sposobów na ominięcie tego problemu jest odesłanie przez php odpowiedniej informacji. Przykładowo:

<?
 // łączenie z bazą
 // sprawdzenie uprawnień itp.
 $id = $_POST['id'] ;
 // wykonanie zapytania do bazy zmieniającego widoczność wpisu, zapisanie wyniku do $result 
 $wynik['id'] = $id ;
 $wynik['result'] = (int)$result ;
 echo json_encode( $wynik ) ;
?>

Funkcję ukryj_wpis zmieniamy na:

<script type="text/javascript">
function ukryj_wpis( id ) {
 $.ajax({
   type: "POST",
   url: "ukryj.php",
   data: "id="+id,
   dataType: "json", 
   success: function(msg){
    // odpowiednie operacje
    // msg.id - id obiektu
    // msg.result - wynik działania skryptu php
    if( msg.result == 1 ) {
     $("#wpis"+msg.id).hide() ;
    }
   }
 });
return false ;
}
</script>

• Tweet
• Pin It