CODEWITHSUNDEEP
javascriptjquery
user3277023
user3277023

Reputation: 87

Jquery POST sending multiple variables

I've been trying to figure out this issue with my website for a while now--I have a bunch of "stars" a user can click on.

clicking on a star loads a file into a div with information regarding that star. It also loads a button for the players to click and "Take over" the planet. That all is working well and fine, however--I've recently discovered an issue that I'm not quite sure how to handle.

IF a player clicks on multiple stars before reloading the page for whatever reason--when the click to attack/whatever the star--it'll send multiple requests across the server. I at first thought this was something in my coding that was sending all information regarding all the stars, however I've come to realize that it's only the stars that the player has clicked on.

Now--Here is the code:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});
    function loadStatus()
{
        $.ajax(
        {
            url:'world1.php', error: function () { }, dataType:'json',
            success: function(data)
            {
                denial = false;
                $('#credits').html(data.credits);
                $('#fuelleft').html(data.fuel);
                $('#energyleft').html(data.energy);
            }
        }); 
}
function currentStarMapURL(URL)
{
        $('#starmap').load(URL, {},
        function()
        {
            $('#loader').hide();
            fullStarInformation(URL);
            starInformation();
            setInterval(function() { $('.unknown').effect("highlight",{color:"#800000"}, 1500)});
            return false;   
        }
        );
}

/*
    purhcase upgrades
*/
/*
    Retriever Better Star Info 
*/
function fullStarInformation()
{
    $(".star").click(
        function()
        {
            $('#planet-bar').empty();
            val = this.id;
            url = "planet.php?sid="+val;
            $('#planet-bar').load(url, {'sid':val},
                function()
                {
                    colony(url);
                }
            );
        }
        );
}
function colony(url)
{
    $('#planet-bar').on("click", "button",
    function() {
        event.preventDefault();

        name = 0;
        $(this).hide();
            name = $(this).attr('sid');
            $.post('purchase.php?mode=planet', {sid: name}, 
                function () 
                { 
                    $('#planet-bar').load(url, {}, function () { currentStarMapURL(URL2); })
                }
                );  
        $(this).prop('disabled', true); 
         });

}

I figured at first that the issue was a caching issue, so I added the $.ajaxSetup to the first line, but that didn't seem to change anything. Then I figured, maybe it's the way the code was being called--I originally had two seperate functions; one for attack, one for colonizing. both of which were being called in the fullStarInformation function, So I moved it all down to one function, i'm still getting the issue.

AFAIK, right now, i may have to rewrite this entire block of code so that the colony function and the starInformation function are separate and not acting upon one another. But I wanted to get a second, third maybe even fourth set of eyes on the code before I go about doing that.

Upvotes: 0

Views: 68

Answers (1)

dave
dave

Reputation: 64725

If you are getting multiple ajax calls, chances are you are setting up multiple event handlers. Just quickly glancing through the code, I would think you should change

function colony(url)
{
  $('#planet-bar').on("click", "button", function() { ... } );

To

function colony(url)
{
  $('#planet-bar').off("click", "button"); //unbind old event handlers
  $('#planet-bar').on("click", "button", function() { ... } );

Upvotes: 1

Related Questions