2009-09-10 10 views
0

J'ai une série d'icônes Supprimer affiche en tant que tels:obtenir un des éléments id cliqué avec jquery

echo '<img id="'.$items['id'].'" src="images/delete.png" />'; 

$items['id'] est une référence à l'ID de l'élément DB je voudrais que l'icône à supprimer.

Comment puis-je accéder à cet identifiant dans jquery lorsque l'élément est cliqué, je peux alors appeler:

$.get('ajax/delete.php', { id: $('#id').val() },  
function(data) {} 

Ou quelque chose du genre.

+3

Notez que les actions de suppression sont mieux effectuées via POST, car elles modifient les données. Et bien sûr, méfiez-vous de la suppression des araignées. –

+0

Supprimer des araignées? Scurrryy. Tout cela devrait être derrière une connexion, donc devrait être sans araignée. Si vous faites référence à un robot d'indexation Web en suivant tous les liens et en activant l'un d'entre eux? – ian

+0

Google Web Accelerator avait (a?) Tendance à mettre en cache tous les liens. http://www.signals.com/svn/archives2/google_web_accelerator_hey_not_so_fast_an_alert_for_web_app_designers.php –

Répondre

5

Le code suivant va vous aider. Ajoutez la classe "delete" à chacun de vos img.

$('.delete').onclick(function() { 
    var id = $(this).attr('id'); 
    $.post('ajax/delete.php', { id: id } function(data) { 

    ... 
    }); 
}); 
+0

Alors .. onclick de classe .delete obtenir l'ID de n'importe quel élément est cliqué et le mettre dans le $ .get()? – ian

+0

oui. vous pouvez essayer alert (id) pour voir ce que vous obtenez également. –

+0

Veuillez également utiliser POST pour ces tâches. –

0
$("#imageID").click (function() { 
    alert ($(this).attr ("id")); 
}); 

si vous avez un nom de classe

$(".yourclassname").click (function() { 
    alert ($(this).attr ("id")); 
}); 
+1

C'est une façon très inefficace de faire les choses. Vous devrez ajouter explicitement un gestionnaire d'événement à chaque élément. –

+0

Doit être dynamique mais j'ai l'idée ... Je peux faire un $ ("class_name").cliquez plutôt à droite? – ian

0

je gérer cela un peu différemment. J'aurais chaque icône de suppression suivie d'une entrée cachée qui contient la valeur de l'élément correspondant à l'identifiant de l'élément à supprimer. J'utiliserais alors jQuery pour extraire l'attribut de valeur du champ caché. De cette façon, vous n'aurez pas à manipuler de chaîne magique pour utiliser des identifiants numériques.

En outre, jamais utiliser une requête get pour faire une suppression. Tout ce que quelqu'un a à faire est de taper une URL dans le bon format, avec les informations d'identification appropriées pour contourner tout traitement côté client que vous avez ajouté pour valider votre suppression. AJAX vous permet d'envoyer d'autres types de demandes et vous devriez préférer une demande POST ou DELETE pour les suppressions.

echo '<img class="deleteIcon" src="images/delete.png" />'; 
echo '<input type="hidden" value="' + $item[id] + '" />'; 

$('.deleteIcon').click(function() { 
    var id = $(this).next('input[type=hidden]').attr('value'); 
    $.ajax({ 
      url: 'ajax/delete.php', 
      type: 'delete', 
      data: { id: id }, 
      dataType: 'json', // get back status of request in JSON 
      success: function(data) { 
       if (data.status) { 
        // remove row, or whatever 
       } 
       else { 
        // handle deletion error 
       }, 
      ... other parameters/callbacks ... 
    }); 
}); 
+0

Donc, vous utilisez $ this(). Pour obtenir l'ID de l'élément d'entrée caché qui suit l'élément cliqué. Quel est l'avantage ici de ('.class_name'). Click getid de cette méthode? – ian

+1

L'avantage est que vous pouvez stocker les données en tant que valeur à l'entrée quel que soit son format. Si vous avez des identifiants numériques, vous devez leur ajouter une chaîne pour qu'ils soient des identifiants d'éléments HTML valides, puis vous devez extraire la chaîne lorsque vous voulez l'utiliser. En outre, vous ne pouvez pas réutiliser des identifiants non numériques ailleurs sans avoir recours au préfixe de chaîne magic. En utilisant la traversée de DOM relative et en stockant des données comme des données plutôt que codées dans un ID, vous pouvez inclure les données (id) une fois et rechercher les différentes actions liées à ces données. – tvanfosson

+0

Nice. Bon à savoir. On dirait que cela rendrait les choses plus propres. Pas besoin de créer des choses comme echo 'del _'. $ Row ['value'] '; et puis se débarrasser de del_ à nouveau et tout ce type de tracas. – ian

0

personnellement je vais pour Hijax et de la dégradation gracieuse en enveloppant le <img> s avec un < >. Plus vous ne devriez probablement pas supprimer/supprimer des opérations avec GET. Mais ici vous allez;

$('img[src=images/delete.png]').click(function(e) { 
    $.get('ajax/delete.php', { id: this.id }, function() { 
    // complete, perhaps get rid of the <img> now? 
    }); 

    return false; 
}); 
Questions connexes