jquery-ajax-call für mehrere button-click-events

Das folgende ist meine generierten html-code. Ich habe ein bisschen Schwierigkeiten kommen mit, was sollte die jquery-code, um das Feuer ein ajax-request auf einen Benutzer klicken auf die Schaltfläche "aktivieren".

<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>

Meine Idee ist wie folgt:

<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>

Während ich weiß, dass meine jquery funktioniert nicht, ich bin ein bisschen ratlos...jede Hilfe wäre sehr geschätzt werden. Wie ich schon sagte, ich bin versucht, senden Sie eine ajax-Anfrage aus, um den controller aktivieren, wenn ein Benutzer klickt auf die Schaltfläche aktivieren, aber ich muss auch senden Sie die versteckten Daten innerhalb der gleichen Zeitspanne so gut.

Wieder einmal vielen Dank für jede Hilfe.

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>
    FYI, dies hat sehr gut funktioniert. Vielen Dank für Ihre Hilfe.
    D - Wenn Sie, wie die Antwort, bitte akzeptieren Sie es. Klicken Sie auf das grüne Häkchen.
    Darf ich Fragen, was ist der Punkt für var button = this;? Ich sehe es nicht benutzt, sonst irgendwo in der Methode?
    Es wird benutzt, um die Erstellung der Daten-Objekt für den ajax-call.

    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. Es gibt keine Notwendigkeit, um eine Schleife über die Tasten. $(".button").click(... wird implizit befestigen Sie einen handler an alle Elemente mit dem 'button' class.
    2. Weisen Sie den Kontext einer Variablen, damit es zugänglich ist, innerhalb des callbacks/Umfang der $.ajax nennen.
    3. Idealerweise sollten Sie verhindern, dass Formular durch die Nutzung der event.preventDefault()
    4. Ihre durchqueren, ist falsch, und es gibt keine :next pseudo-Selektor, soweit ich weiß.
    Technisch funktioniert es nicht: val() muss ersetzt werden mit attr('id') arbeiten in der poster-HTML-markup. Deine Punkte 1, 3 und 4 sind richtig aber.
    guter spot. Ich hatte nur angenommen, dass die benötigten Werte wurden store in der value Attribute. Danke und +1.
    Danke für die Erklärung, das ist super hilfreich.

    InformationsquelleAutor karim79

Schreibe einen Kommentar