Updating webpage with real-time database value using AJAX+PHP response

Question

I’m creating a Javascript game and I’m currently trying to write some code that will show the player’s “Gold Balance” in real time on a html webpage.

The Gold amount is contained in my SQL database, so I’m using setInterval with a Javascript function that contains an AJAX call which calls a PHP script that grabs the current balance amount for the player and sends it back as “response”.

I’m able to have this amount appear as a Javascript alert, however I need to have the response appear as text on the webpage inside a <div> instead.

This is my current code:

<script>
setInterval("checkGold()",5000); 

function checkGold()
{
        $.ajax({
     url: 'scripts/checkGold.php',
    data: "",
    dataType: 'json',
    success: function(response){
                        alert(response);       
    }});
};
</script>

I have this in my html source code, I would like to place the function in a separate file and call it from there, but when I tried this I wasn't able to send the response back to the html page correctly.

I was wondering if anyone knows how to have this response appear as text on the page inside <div> </div>?

Also, I was wondering if this method will really update the div in real time (ie, will it auto-refresh the div part of the webpage, showing an up to date value (every 5000 milliseconds)?

Thanks in advance!

You may want to look at how to insert text using jQuery selectors: stackoverflow.com/questions/14278630/… — MannfromReno
– MannfromReno, Commented Apr 29, 2015 at 18:17

Iran Rodrigues · Accepted Answer · 2015-04-29 18:26:16Z

0

Since you are using jQuery, you can use text() to alter the contents of an existing div (which id is "yourDiv"):

setInterval("checkGold()",5000); 

function checkGold()
{
    $.ajax({
      url: 'scripts/checkGold.php',
      data: "",
      dataType: 'json',
      success: function(response){
        $('div#yourDiv').text(response);       
      }
    });
};

answered Apr 29, 2015 at 18:26

Iran Rodrigues

485 bronze badges

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

1 Comment

Emily Over a year ago

Hi @iran-rodrigues thanks for your reply, I'm trying your method but I think I'm making a mistake, I'm using your code, and have set the div to: <div id="yourDiv"></div> however it's not working for me, I think I'm doing something very basic wrong?

user3191753 · Accepted Answer · 2015-04-29 18:27:34Z

0

You have two questions here, so I will try to address both

1) How to append to the DOM using jQuery, instead of an alert:

in the success callback function, instead of alerting the response, you can simply call
```
$('body').append("<div>"+response+"</div>")
```

2) "Real time" Gold Balance

You should use websockets. Racthet is a good websocket PHP library to help you with this: http://socketo.me/

answered Apr 29, 2015 at 18:27

user3191753

12 bronze badges

1 Comment

Emily Over a year ago

Hi @user3191753 thanks for your reply. I'm trying your code in the success callback function but I don't think I'm doing it right. Do I need to write something in the <div> </div> tags in the html to make this method work? Also, the response from the database will be different for every player (the PHP passed contains a unique player ID), so would websockets still work for this? Or is the AJAX way a better method? I might have misunderstood the websockets link but is that only for updating multiple users with the same data value? (for example, a blog post)

Collectives™ on Stack Overflow

Updating webpage with real-time database value using AJAX+PHP response

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related