CODEWITHSUNDEEP
jquery
Jason Millington
Jason Millington

Reputation: 691

Jquery conditional button click

I have a group of Buttons on my page some I want to make a certain Ajax call and the other buttons a different Ajax call, should I use the data type and put a if statement on that.

$("button").click(function () {
    //SOME BUTTONS AJAX THIS CALL
    //This Ajax toggles device on and off
    var $x10Device = $(this).parent().attr("class");
     $.ajax({
        type: 'GET',
        url: "http://192.168.0.34:81/tenHsServer/tenHsServer.aspx",
        data: {
            t: "ab",
            f: "ToggleDevice",
            d: $x10Device
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
    //OTHER BUTTONS THIS AJAX CALL
    //This Ajax checks the current on/off status of the passed X10 code
    $.ajax({
        url: "urlencode.php",
        data: data,
        type: "POST",
        success: function (data) {
            myd = $('<span />').html(data).find("#Result").text();
            console.log(myd);
            if (myd == 'C5:2;') {
                $('img').attr('src', 'lightbulbon.png')
            } else {
                $('img').attr('src', 'lightbulboff.png')
            };
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });

});

Upvotes: 0

Views: 1623

Answers (3)

psdpainter
psdpainter

Reputation: 666

Try adding a class to each button (like Thomas mentioned). You could also loop through your buttons checking for their class names, and upon finding a match call the ajax function. Maybe something like: 

var btn = $("button");
$.each(btn, function (index) {
    var ctx = $(this);
    if (ctx.hasClass("firstButton")) {
        // call appropriate ajax function here
    }
    if (ctx.hasClass("secondButton")) {
        // call appropriate ajax function here
    }
});

Upvotes: 0

Thomas Langston
Thomas Langston

Reputation: 3735

Add semantic css classes to your button markup. Place the different AJAX requests in the corresponding click event handler.

$("button.toggleStatus").click(function() {
  // ajax request for toggling
});

$("button.checkStatus").click(function() {
  // ajax request for updating status
});

Upvotes: 4

Andy Brudtkuhl
Andy Brudtkuhl

Reputation: 3652

Use the id of the button and put each ajax request in their respective click events...

$("button#button1").click(function() {
 // ajax request for button 1
});

$("button#button2").click(function() {
 // ajax request for button 2
});

Upvotes: -1

Related Questions