using AJAX value in IF(statement)... animation

Question

I need some advice how to save or use my AJAX output in my if(statement). This is how the code looks like, so I hope you understand what I am seeking.

setInterval("yourAjaxCall()",1000);
        function yourAjaxCall() 
      {

        $.ajax({                                      
          url: 'api.php',                  //the script to call to get data          
          data: "",                        //you can insert url argumnets here to pass to api.php
                                           //for example "id=5&parent=6"
          dataType: 'json',                //data format
          success: function(data)          //on recieve of reply
          {
            var id = data[0];              //get id
            var vname = data[1];           //get name

            $("#square").css({"background-color" : vname});


          } 
        });
      };


    </script>
</head>
<body>
<div id="square" style="width:200px; height:200px; position:relative; ">
</div>  

<script>

EDIT    $color = output from ajax(background-color of square) //HOW DO I SAVE IT OR USE IT?

/* Start animation */
    setInterval("timedani()",10000);
    function timedani(){
    /* Stop animation when button is clicked */
        $("#stop").click(function(){
            $("#square").stop();

        });
    //First TR-bubble
        //$("#ball").animate({left: 'x', top: 'y'}, 1500);

   if($color == 'pink'){                     // PROBABLY WRONG
        $("#square").animate({left: 510, top: 75}, 1500);
        $("#square").animate({left: 0, top: 75}, 1500);
        }

   else if($color == 'blue'){                // PROBABLY WRONG
        $("#square").animate({left: 0, top: 475}, 1500);
        $("#square").animate({left: 0, top: 0}, 1500);
        }


    };

    $("#stop").click(function(){
        $("#kvadrat1").stop();

    });

    $("#back").click(function(){
        $("#kvadrat1").animate({left: '0px', top: '0px'}, 1500);

    });
</script>

Greatful for quick and simple answers! Best Regards

Yes, thats simple, but the main question is how i get my output from ajax to be in the IF-statement. Heard it is impossible to save as PHP-variable, but there must be another way? @Ram — Hilven, Sep 25 '13 at 11:44
This is the "chicken or egg" problem of JavaScript. Please read this: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Sergiu Paraschiv, Sep 25 '13 at 11:46

Arun P Johny · Accepted Answer · 2013-09-25T11:43:09.950

Look like you want to use $color as a global variable, so it in the ajax callback

setInterval("yourAjaxCall()", 1000);

function yourAjaxCall() {

    $.ajax({
        url: 'api.php', //the script to call to get data          
        data: "", //you can insert url argumnets here to pass to api.php
        //for example "id=5&parent=6"
        dataType: 'json', //data format
        success: function (data) //on recieve of reply
        {
            var id = data[0]; //get id
            var vname = data[1]; //get name

            $("#square").css({
                "background-color": vname
            });

            $color = vname;
        }
    });
};

then

//declar $color as a global variable
var $color;//if you want to assign a default value use var $color = 'pink'

/* Start animation */
setInterval("timedani()", 10000);

function timedani() {
    /* Stop animation when button is clicked */
    $("#stop").click(function () {
        $("#square").stop();

    });
    //First TR-bubble
    //$("#ball").animate({left: 'x', top: 'y'}, 1500);

    if ($color == 'pink') { // PROBABLY WRONG
        $("#square").animate({
            left: 510,
            top: 75
        }, 1500);
        $("#square").animate({
            left: 0,
            top: 75
        }, 1500);
    } else if ($color == 'blue') { // PROBABLY WRONG
        $("#square").animate({
            left: 0,
            top: 475
        }, 1500);
        $("#square").animate({
            left: 0,
            top: 0
        }, 1500);
    }


};

$("#stop").click(function () {
    $("#kvadrat1").stop();

});

$("#back").click(function () {
    $("#kvadrat1").animate({
        left: '0px',
        top: '0px'
    }, 1500);

});

Yes i know :P But I need a way to save $color from my output. Or i need a way to retrieve my background-color from #square to use it in my IF. — Hilven, Sep 25 '13 at 11:41

using AJAX value in IF(statement)... animation

1 Answers1