jquery ajax call for multiple button click events

Question

The following is my generated html code. I'm having a bit of trouble coming up with what should be the jquery code to fire an ajax request upon a user clicking the activate button.

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

My idea, is as follows:

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

While I know my jquery doesn't work, I'm a bit stumped...any help would be greatly appreciated. As i said, I'm attempting to send an ajax request off to the activate controller whenever a user clicks the activate button, however I also need to send the hidden data within the same span as well.

Once again thanks for any help.

Andrew Cooper · Accepted Answer · 2011-05-27 06:39:13Z

8

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

edited May 27, 2011 at 6:39

answered May 27, 2011 at 4:41

Andrew Cooper

32.7k5 gold badges86 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Cooper Over a year ago

@Mark D - If you like the answer, please accept it. Click on the green tick.

Austin A Over a year ago

Can I ask what is the point for var button = this;? I don't see it used anywhere else in the method?

Andrew Cooper Over a year ago

@AustinA It's used to build the data object for the ajax call.

karim79 · Accepted Answer · 2011-05-27 04:47:29Z

3

$(".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();
        }
    });
});

There is no need to loop over the buttons. $(".button").click(... will implicitly attach a handler to all elements with the 'button' class.
You need to assign the context to a variable in order that it is accessible within the callbacks/scope of the $.ajax call.
Ideally you should prevent form submission by making use of event.preventDefault()
Your traversing is incorrect, and there is no :next pseudo-selector as far as I know.

edited May 27, 2011 at 4:47

answered May 27, 2011 at 4:40

karim79

343k67 gold badges420 silver badges409 bronze badges

2 Comments

emfurry Over a year ago

Technically, this won't work: val() needs to be replaced with attr('id') to work in the poster's HTML markup. Your points 1, 3, and 4 are right on though.

karim79 Over a year ago

@emfurry - good spot. I had just assumed that the needed values were store in the value attributes. Thanks and +1.

Collectives™ on Stack Overflow

jquery ajax call for multiple button click events

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related