how can I trigger javascript css action?

Question

I have a memory game code, using javascript, php and css.

I would like to register somehow the event when the game is finished by php so that I can save the results in database.

In other words I would like to place php code inside <div id="player_won"> </div> and trigger that winning event properly.

css
```
#player_won{
display: none;
}
```

javascript

$(document).ready(function(){
$(document).bind("game_won", gameWon);
}

function gameWon(){
$.getJSON(document.location.href, {won: 1}, notifiedServerWin);
var $game_board = $("#game_board");
var $player_won = $("#player_won");
$game_board.hide();
$player_won.show();
$game_board = $player_won = null;
};

You should try to narrow down your problem and only post the relevant code. — jeroen
– jeroen, Commented Dec 6, 2016 at 14:52
You could fire an ajax function in your games won function and then place the result in the element you want — Pete
– Pete, Commented Dec 6, 2016 at 14:54
I have narrow down the code. Can you show in an example how can I fire ajax function, placing the result in the element? — chejnik
– chejnik, Commented Dec 6, 2016 at 15:01

li x · Accepted Answer · 2016-12-06 15:22:57Z

1

You'll want to create an ajax call that sends some information from the page and tells the php file below if the player has won or lost. After which you can deal with the logic needed for the player inside foo.php and send back Json to the success function inside the ajax call and update your page accordingly.

index

   $(document).ready(function () {
   //look for some kind of click below
            $(document).on('click', '#SomeId', function () {

       //Get the information you wish to send here
       var foo = "test";
                $.ajax({
                    url: "/foo.php",
                    type: 'POST',
                    cache: false,
                    data: {Info: foo},
                    dataType: 'json',
                    success: function (output, text, error)
                    {

                    //here is where you'll receive the son if successfully sent
                   if(ouput.answer === "yes"){
                        $("#player_won").show();
                    } else { 
                       // Do something else
                    }

                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                       //Error handling for potential issues.
                        alert(textStatus + errorThrown + jqXHR);
                    }
                })
            })
        });

foo.php

<?php

    if(isset($_POST['Info'])){
        //figure out if what was sent is correct here.

        if($_POST['Info'] === "test"){
        $data['answer'] = "yes";

        echo json_encode($data);

        exit;
      } else {
        // do something else

       }
   }
?>

answered Dec 6, 2016 at 15:22

li x

4,0612 gold badges34 silver badges52 bronze badges

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

2 Comments

chejnik Over a year ago

It helped me a lot. There is a small typo - output.answer, the edit too small to be corrected. Thank you

li x Over a year ago

I wrote most of the code from memory in the writer on here so it came out a little mangled, Not a problem :-)

Collectives™ on Stack Overflow

how can I trigger javascript css action?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related