How to display a mysql database without refreshing the page with data from GET data without clicking button

Question

My Problem is trying to display value from the database without refreshing the page.

Ok, My Code consist of value retrieve from page 1 to page 2 using GET methods, let's say the value is captured from the data-name "location" which consist of the value of 3.

The value of "location" on page 2 is then used to grab the information of the user on which location is stored and display the data that needs to display on a table on page 2 without clicking any button, basically on page load, it will display the data.

Then to make the data automatically update without refresh, I tried using a method that needs me to use Ajax that uses a GET to page 3 which supposedly have all the PHP to select database MySQL scripts.

In the PHP to select database MySQL scripts, my codes require to use the "location" data from page 2 that retrieve from page 1.

Since I need to POST using an ajax script, I added a PHP script into my Ajax script with a return value from page 3 data as well.

But it does not show the value that needs to be shown. Your help or guidance is highly appreciated. Thank You in advance.

Here are my codes for Page 2 (display page)

$locationID = @$_GET['location'];

    $sqlCheckVisitors = "SELECT * FROM visitor_list WHERE visitor_EventChooseID = '$locationID'";
    $resultCheckVisitors = $conn->query($sqlCheckVisitors);
    $calCheckResult_visitor = mysqli_num_rows($resultCheckVisitors);
        if($calCheckResult_visitor > 0)
            {
                $value_originalVisit =  $calCheckResult_visitor;
            }
        else
            {
                $value_originalVisit = 0;
            }

<div class="row">
    <div class="form-group col">
        <label class="form-control form-control-lg text-8 text-center">Live Balance : <br>
            <div id="live_totalbalance"></div>
                /
            <div id="live_totalpreset"></div>
        </label>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // Display Total Live Balance
        $.ajax({
            url: "livedata_totalbalance.php?locationID=<?php echo $locationID ;?>",
            type: "GET",
            dataType: "html",
            cache: "false",
            success: function(data)
            {
                $('#live_totalbalance').html(data);
            }
        });
    });
</script>

Here are my codes for Page 3 (livedata_totalbalance.php)

<?php
    include "database.php";
    
    $locationID = @$_GET['locationID'];


    $sqlEventList = "SELECT * FROM event_list WHERE event_id ='$locationID'";
    $resultEventList = $conn->query($sqlEventList);
    $dataEventList = mysqli_fetch_array($resultEventList);

    $event_data = $dataEventList['event_data'];

    echo $event_data;
?>

**Warning!** You're open to [SQL injection attacks](https://owasp.org/www-community/attacks/SQL_Injection)! Read [how to prevent SQL injection in PHP](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) by using prepared statements with bound parameters instead of injecting variables directly into your queries. It's not just about security. If your data contains, for example, a single quote `'`, your query will break. — M. Eriksson, Feb 09 '22 at 07:17
_"use Ajax that uses a POST to page 3"_ - how is `type: "GET"` a POST request? — CBroe, Feb 09 '22 at 07:18
So if you call `livedata_totalbalance.php?locationID=...` directly, it shows the data you are expecting. If not: Debug & fix that script. (If you don't know how, please do a bit of reading up on the basics of sensible debugging.) If it does, then go investigate what the AJAX request actually looks like, using your browser dev tools. Does it send the expected parameter value to begin with? — CBroe, Feb 09 '22 at 07:19
I tried with GET, the development console show got an uncaught error, which underlines my script functions $(document).ready(function(){ is there something I miss? — Haziman Hamzil, Feb 09 '22 at 07:33
Which part are you struggling with? Is this a JS problem, a PHP problem, or a MySQL problem? — Nico Haase, Feb 09 '22 at 07:35
should be a JS problem cause the rest works fine until I try to implement automatically update live data from the database which currently not showing the data into the console/frontend. — Haziman Hamzil, Feb 09 '22 at 07:40
"Should be" means that everything else works properly? Then remove those parts that already work as expected, and explain further which parts are not working — Nico Haase, Feb 09 '22 at 07:42
These few lines I shared is the part that is not working, which are interconnected to one another. — Haziman Hamzil, Feb 09 '22 at 07:45

score 1 · Answer 1 · answered Feb 09 '22 at 07:19

If you want to change the data in a certain period of time Or change it for example after user landed on you page without refreshing the page, you could put your ajax in a JS timer like this:

setTimeout(() => {
     $.ajax({
            url: "livedata_totalbalance.php?locationID=<?php echo $locationID ;?>",
            type: "GET",
            dataType: "html",
            cache: "false",
            success: function(data)
            {
                $('#live_totalbalance').html(data);
            }
        });
}, 2000);

this will get new data after 2 Seconds (2000 ms). or even if you want to change data in every 2 seconds, you can put this code in a for or while loop.

Hope it works :)

How to display a mysql database without refreshing the page with data from GET data without clicking button

1 Answers1