CODEWITHSUNDEEP
javascriptajax
NicklasF
NicklasF

Reputation: 921

AJAX: Passing Variable Along Specific Button Click

I have two buttons where each button do the same function but one variable. I'm using ajax to handle some PHP. I'm thinking the problem is that the ajax is being run before the js function.

Do you have any solutions for passing a parameter along the specific button click?

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

function setResource(resource) {
    var upgResource = resource;
}

<input type="submit" class="button" name="upgGold" value="Upgrade" onclick="setResource('gold')" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" onclick="setResource('metal')" />

Upvotes: 3

Views: 12257

Answers (4)

bloodyKnuckles
bloodyKnuckles

Reputation: 12079

In the jQuery ajax method, under data, change:

resource: upgResource

...to:

resource: $(this).attr('name')

And lose the setResource function, and both button onclick handlers.

Then either update your PHP script to handle the values "upgGold" and "upgMetal" instead of "gold" and "metal", OR change the button name attributes to "gold" and "metal".

JSFiddle me

All together:

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('name')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" />

Upvotes: 0

babaorum
babaorum

Reputation: 316

This is what is recommand you. Remove you're function setResource() and the onclick attribute on the inputs. And instead, just fill an attribute with the value you want to pass. Here I am using data-resource. You can access any jquery element attribute by using the .attr() jquery method. And in this watcher $(this) is the element you click on. So he will have the good value for the attribute. This method is saving you for a function and a variable assignation.

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('data-resource')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" data-resource="gold" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" data-resource="metal" />

In the case you prefer to keep your onclick and you're function, you can pass your ajax call into that function and remove the jquery watcher. the same job will be done. My method just use jQuery resources.

Upvotes: 1

Pedro Silva
Pedro Silva

Reputation: 263

Maybe ajax execute them assyncronous and you have to call just the function. Have you tried using the code on the (.button).click() on the function setResource() ? Maybe that way it will work... Give me some feedback on the result

Upvotes: 0

imtheman
imtheman

Reputation: 4843

You can only have 1 onclick event handler per element. Try putting the ajax call inside of the function you are calling then get rid of the $('.button').click(); handler.

function setResource(resource) {
    var upgResource = resource;
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
}

Upvotes: 5

Related Questions