jquery ajax appel à de multiples événements click de bouton

Voici mon code html généré. Je vais avoir un peu de mal avec ce que doit être le code jquery pour le feu d'une requête ajax sur un utilisateur en cliquant sur le bouton activer.

<span class="vId">
    <input type="hidden" name="id" id="7" />
    <input type="hidden" name="ClientID" id="026CC6D7-34B2-33D5-B551-CA31EB6CE345" />
    <input class="textbox" type="text"   name="key" />
    <input class="button"  type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Bartlett-White</span>             
<span class="vId">
    <input type="hidden" name="id" id="2" />
    <input type="hidden" name="ClientID" id="000214EE-0000-0000-C000-000000000046" />
    <input class="textbox" type="text" name="key" />
    <input class="button" type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Landingham Bends</span>             
<span class="vId">
    <input type="hidden" name="id" id="8" />
    <input type="hidden" name="ClientID" id="049F2CE6-D996-4721-897A-DB15CE9EB73D" />
    <input class="textbox" type="text" name="key" />
    <input class="button" type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Russell River</span>

Mon idée, est comme suit:

<script type="text/javascript">
$().ready(function(){
    $.each($(".button")
      .click(function() {
            $.ajax({
                url:  '{site_url}index.php/activate',
                type: 'POST', 
                dataType: 'html',
                data: {
                    key: $(this).sibling(':first'),
                    idclient: $(this).sibling(':first:next'),
                },
                success: function(result) {

                }
            });
        });
    )
});
</script>

Alors que je sais que mon jquery ne fonctionne pas, je suis un peu perplexe...toute aide serait grandement appréciée. Comme je l'ai dit, je suis d'essayer d'envoyer une requête ajax off pour activer le contrôleur à chaque fois qu'un utilisateur clique sur le bouton activer, cependant j'ai aussi besoin d'envoyer les données cachées dans le même laps ainsi.

Encore une fois merci pour toute aide.

InformationsquelleAutor Mark D | 2011-05-27
  1. 7
    <script type="text/javascript">
$().ready(function(){
    $(".button").click(function() {
        var button = this;
        $.ajax({
            url:  '{site_url}index.php/activate',
            type: 'POST', 
            dataType: 'html',
            data: {
                key: $(button).siblings('[name="id"]').attr("id"),
                idclient: $(button).siblings('[name="ClientId"]').attr("id"),
            },
            success: function(result) {

            }
        });
    });
});
</script>
    • Pour info cela a très bien fonctionné. Merci pour votre aide.
    • D - Si vous avez la réponse, merci de l'accepter. Cliquez sur la coche verte.
    • Puis-je vous demander quel est le point de var button = this;? Je ne vois pas utilisé n'importe où ailleurs dans la méthode?
    • Il est utilisé pour générer les données de l'objet de l'appel ajax.
    InformationsquelleAutor Andrew Cooper
  2. 1
    $(".button").click(function(e) {
    e.preventDefault();
    var that = this;
    $.ajax({
        url: '{site_url}index.php/activate',
        type: 'POST',
        dataType: 'html',
        data: {
            key: $(that).prev().attr('id'),
            idclient: $(that).siblings('[name="clientID"]').attr('id'),
        },
        success: function(result) {
            alert(result);
            $(that).blahblah();
        }
    });
});
    1. Il n'y a pas besoin de boucle sur les boutons. $(".button").click(... sera implicitement attacher un gestionnaire à tous les éléments avec le "bouton" de la classe.
    2. Vous devez attribuer le contexte d'une variable afin qu'il soit accessible au sein de l'rappels/portée de la $.ajax appel.
    3. Idéalement, vous devriez éviter la soumission du formulaire en faisant usage de event.preventDefault()
    4. Votre traversant est incorrect, et il n'y a pas de :next pseudo-sélecteur pour autant que je sais.
    • Techniquement, cela ne fonctionne pas: val() doit être remplacé par attr('id') pour travailler dans l'affiche du balisage HTML. Vos points 1, 3, et 4 sont sur la même si.
    • bon spot. Je venais juste de supposer que les valeurs nécessaires ont été stocker dans le value attributs. Merci et +1.
    • Merci pour l'explication, c'est super utile.
    InformationsquelleAutor karim79