Hallo zusammen,
Ich habe 2 kleinere Probleme mit dem folgendem Code. Ich benutze event listener um durch einen click jeweils zwei Funktionen aufzurufen. Durch click auf den button suchen müsste zumindest der Tabelleninhalt vorest gelöscht werden, doch danach wird scheinbar die Seite nochmal aufgerufen, verstehe aber nicht wieso.
Meine zweite Frage ist wie kann ich diese Funktion aufrufen. Da muss noch irgendwas falsch sein :
var php_output = "<?php extern_function()?>";
damit sollen die Einträge nach preis sortiert werden. Hier nochmal der ganze Code:
<html>
<head>
<style>
th,table {
border: solid 1px
}
</style>
</head>
<form>
Preis bis: <input type="number" min="1" name="preis">
<button id="button_search">
Suche
</button>
</form>
<table>
<thead>
<tr>
<!-- <th>Objekt</th>
<th>Stadtteil</th> -->
<th>Ort</th>
<th>Preis <button id="btn_sort">sort</button></th>
<!-- <th>umlagef. Kosten</th>
<th>nicht umlagefähige Kosten</th>-->
</tr>
</thead>
<tbody id="test_table">
</tbody>
</table>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "immobilien";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM mydb";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "stadt: " . $row["Stadt"]. "<br>";
$output[]=$row;
}
} else {
echo "0 results";
}
// Json Output
print(json_encode($output,JSON_UNESCAPED_UNICODE));
$conn->close();
?>
<script type="text/javascript">
// pass PHP variable declared above to JavaScript variable
var output = <?php echo json_encode($output) ?>;
</script>
<html>
<div id="test"></div>
</html>
<script>
var button_sort =document.getElementById('btn_sort')
button_sort.addEventListener('click', function(){
test.innerHTML = "";
/*var php_output = "<php extern_function(); ?>"
for(var x=0;x<output.length;x++){
console.log(x)
console.log(output[x].Stadt)
test.innerHTML += "<tr> <td>" + output[x].Stadt +"</td><td>"+ output[x].preis + "</td> " + "</tr>"
}*/
})
const test = document.getElementById('test_table');
for(var x=0;x<output.length;x++){
console.log(x)
console.log(output[x].Stadt)
test.innerHTML += "<tr> <td>" + output[x].Stadt +"</td><td>"+ output[x].preis + "</td> " + "</tr>"
}
var button_search =document.getElementById('button_search')
button_search.addEventListener('click', function(){
test.innerHTML = "";
/* search_preis_bis = document.querySelector('input[name="preis"]')
console.log(search_preis_bis)*/
})
</script>
<?php
function extern_php()
{
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "immobilien";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$result = [];
$sql = "SELECT * FROM mydb ORDER BY preis ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "stadt: " . $row["Stadt"]. "<br>";
$output[]=$row;
}
} else {
echo "0 results";
}
// Json Output
print(json_encode($output,JSON_UNESCAPED_UNICODE));
$conn->close();
}
?>
