Создайте приложение базы данных, и на моей странице есть радиоплеер, но каждый раз, когда я задаю новый запрос к базе данных, обновляется вся страница, и радио перестает воспроизводиться.
Только tblData должны быть обновлены.
Имейте это как код JQuery, когда я нажимаю кнопку A, я запрашиваю запрос.
// REQUEST RELOAD DATABASE
document.getElementById("selAID").addEventListener('click', function(e) {
console.log("request selection");
$.get( '/selA0', function( data ) {
$('#mydatabaseshow').load(document.URL + '#mydatabaseshow');
});
});
В результате вся страница загружается в объект div "mydatabaseshow", но мне бы хотелось только обновить таблицу базы данных
Ниже простой фрагмент моей HTML-страницы
<!DOCTYPE html>
<head>
<!--------Version 1.2 ---------->
<title>SQL Database </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
#tblData {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
padding-right: 12px;
}
#tblData td, #tblData th {
border: 1px solid #ddd;
padding: 8px;
}
#tblData tr:nth-child(even){background-color: #f2f2f2;}
#tblData tr:hover {background-color: brown; color: white;}
#tblData th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<div class="w3-bar">
<a id="selAID" href="#" class="w3-bar-item w3-button w3-hover-indigo">A</a>
<a href="/selB0" class="w3-bar-item w3-button w3-hover-indigo">B</a>
<a href="/selC0" class="w3-bar-item w3-button w3-hover-indigo">C</a>
</div>
<div id="mydatabaseshow" class="w3-container" style="overflow-x:auto;">
<table id="tblData" style="width:100%">
<tr>
<th>IDnr</th>
<th>TITLE</th>
<th>YEAR</th>
<th>JUKEID</th>
<th>TIME (s)</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>DATE/TIME</th>
<th>PLAYED</th>
<th>REMARKS....</th>
</tr>
{% for row in data %}
<tr>
{% for d in row %}
<td>{{ d }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
<script>
// REQUEST RELOAD DATABASE
document.getElementById("selAID").addEventListener('click', function(e) {
console.log("request selection");
$.get( '/selA0', function( data ) {
$('#mydatabaseshow').load(document.URL + '#mydatabaseshow');
});
});
</script>
</body>
</html>