Issue
I want to refresh the table without refreshing the whole page I am only using HTML, CSS, Js this refresh well show the user the current data in my sqlite3 I am hoping that there is a way to help
I want to change the page automatically when specific data come from my sqlite3
<table class="table table-dark">
<thead >
<tr>
<div>
<p><b><img class="small_img1" src="/static/{{team_img1}}"> {{nm_team1}} <p >75 </p></b></p>
<p ><b> 75</p> <p> {{nm_team2}}<img class="small_img1" src="/static/{{team_img2}}"></b></p>
</div>
<tr>
<th ><b>Name</b></th>
<th ><b> LEVEL </b></th>
<th></th>
<th></th>
<th style="font-size:20px"><b> LEVEL </b></th>
<th style="font-size:20px"><b>الاسم</b></th>
</tr>
</tr>
</thead>
<tbody>
{%for player in team1 %}
<tr>
<td><img class="small_img" src="/static/{{player['user_img']}}"> {{player['player']}}</td>
<td>{{player['xp']}}</td>
<td></td>
{%endfor%}
<td></td>
{%for player in team2 %}
<td>{{player['xp']}}</td>
<td >{{player['player']}} <img class="small_img" src="/static/{{player['user_img']}}"> </td>
</tr>
{%endfor%}
Solution
AJAX should do the work as with it you can update the table without refreshing the whole page. Use it to fetch the data from your database and then update the HTML of the table dynamically, anytime you want.
AJAX: https://www.w3schools.com/xml/ajax_intro.asp
Add an ID attribute to your table so that you can select it easily using jQuery and consequently insert data right into this table:
<table id="table-id" class="table table-dark">
<!-- Leave this blank as the data will be inserted with AJAX-->
</table>
Add JavaScript function to your js file that fetches the data from your database using AJAX:
function refreshTable() {
$.ajax({
url: '/path/to/your/server-side/script', // this path should be leading to server-side script
success: function(data) {
$('#table-id').html(data);
}
});
}
This function makes a call to a server-side script that fetches the data from your database. If it's successful request, it uploads the data to the table part, which is commented in HTML code earlier.
If you want to update the table, you just have to call the function. Remember that the table in HTML is blank so you have to call the function at least on page load:
window.addEventListener('load', refreshTable);
Lastly you'll also need to write a server-side script that fetches the data from your database and returns it as HTML (or JSON) to be shown on your page. This is simple showcase how it should look like:
<?php
// create a new SQLite3 database connection
$db = new SQLite3('database.db');
// query the database for the updated data
$result = $db->query('SELECT * FROM table_name');
// generate HTML table markup based on the fetched data
$html = '<thead><tr><th>Name</th><th>LEVEL</th></tr></thead>';
$html .= '<tbody>';
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
$html .= '<tr><td>' . $row['name'] . '</td><td>' . $row['level'] . '</td></tr>';
}
$html .= '</tbody>';
// send the generated HTML code as the response
echo $html;
?>
Now that you approximately know how it works, you can research it even further and deeper. Probably you can find any other answer to your question, but this is how I would do it. Hope it helps, Good Luck!
Answered By - Deborisz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.