How can I update the highscore of a game with a database without reloading the page?

Question

I made a JS snake game using HTML5 canvas. If the user loses the game, the score is sent to the database using AJAX. The PHP script compares it to the current value and saves it if it is larger. Now, I am struggling to find a way to update the score inside the game because the page never gets reloaded(and i don't want it to). Here is my PHP script:

$query = "SELECT * FROM shighscore";

    $result = mysqli_query($link, $query);

    $score = mysqli_fetch_array($result)[0];//this is the highscore

    if(array_key_exists("jsscore", $_POST)){//if AJAX posted the var

        if($_POST["jsscore"] > $score){

            $query = "UPDATE shighscore SET score = ".mysqli_real_escape_string($link, $_POST['jsscore']);

            mysqli_query($link, $query);

            $score = $_POST["jsscore"]; //score var is updated

            echo "<p id = 'dbvalue'>".$score."</p>";//this is echoed with the new score value

        }

    }

In my JS, I do this:

$.ajax({

        method: "POST",

        data: {jsscore : score}//variable with the current score

    }).done(function(data){

        var dbscore = document.getElementById("dbvalue").innerHTML;//gets value of the <p> that was echoed by php

        alert(dbscore);//it never alerts

        $("#dbvalue").remove();//remove the unneeded <p> tag

        if(dbscore == score){

            $("#worldscore").html("World High <br>Score: " + score);//updates html

        }

    });

I used other methods like making a function where:

var db = Number("<?php echo $score;?>");

I think that the line of code is only updated when the page first opens. Since I do not reload the page, the new value of score never goes to the JS variable. What can I do? The error in the console is "cannot read property of innerHTML if null". Why is the paragraph with the id of 'dbvalue' null if it is echoes right before the js accesses it?

Can I do all this in the same file("index.php") or do I have to make another one as shown here?

You can simply make another AJAX call when the game ends to obtain the current best score. You would need to create a php script which would read the value from the database and then return the result as a number — Vasil Dininski, Oct 12 '16 at 18:15
@VasilDininski That is what I am trying to do. I need PHP to return me a number, but I have no idea how to do it and the code I posted does not work. — shurup, Oct 12 '16 at 18:35

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

I think to specify the url in the $.ajax call

$.ajax({
 url: "test.html",
 cache: false,
 success: function(html){
    $("#results").append(html);
 }

});

Take a look at this link:

AJAX url sample

edited May 23 '17 at 12:33

Community

1
1

answered Oct 12 '16 at 18:17

Neo

3,309
7
35
44

I know for sure that if the score is higher than the previous high score, the database is getting updated. There is no problem with that part -- just the part where I need to get that variable from PHP to JS. – shurup Oct 12 '16 at 18:19
I am not sure how the code you posted would know where to send the HTTP POST without a URL. – Neo Oct 12 '16 at 18:20
I am also not sure, but it works. Adding url: "index.php" makes no difference. – shurup Oct 12 '16 at 18:31

score -2 · Answer 2 · answered Oct 12 '16 at 18:16

-2

You can manually do a XMLHttpRequest to your php script without using JQuery, it's more understandable. Here is some information about it: http://www.w3schools.com/xml/ajax_intro.asp

answered Oct 12 '16 at 18:16

Seregedhel

7
3

3

sure..until you start adding all the error handling needed that $.ajax handles internally for you and exposes convenient methods to access – charlietfl Oct 12 '16 at 18:18

How can I update the highscore of a game with a database without reloading the page?

2 Answers2