websocket работает, но не обновляет мою HTML-таблицу
У меня есть 2 файла. index.php - это моя таблица, сгенерированная в php из базы данных, которая отлично работает. Затем отредактируйте страницу, которая обновляет базу данных, также работает нормально. Оба файла имеют JavaScript для веб-сокета, которые работают нормально. однако после отправки формы редактирования я хочу обновить таблицу index.php с помощью websocket, но она не обновляет таблицу. Ниже мои два файла
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<table width="100%" class="table table-striped table-bordered table-hover mytables" id="dataTables-example">
<thead>
<tr>
<th> name</th>
</tr>
</thead>
<tbody >
<?php
if(!empty($table_data)){
foreach($table_data as $key=> $value){
$name = $value['name'];
?>
<tr class="odd gradeX">
<td><?php echo $name; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
// connection is open
websocket.onopen = function(ev) {
console.log('socket is open');
}
// Message received from server
websocket.onmessage = function(ev) {
$('#dataTables-example').load ('index.php', '#dataTables-example');
};
websocket.onerror = function(ev){
console.log('socket is error');
};
websocket.onclose = function(ev){
console.log('socket is closed');
};
</script>
</body>
</html>
edit.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<form accept-charset="UTF-8" role="form" id="search" name="search" action="edit.php" method="post">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control">
</div>
<center><button class="btn btn-success btn-md" type="submit" name="submit" id="submit">Save</button></center>
</form>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(){
send_message();
});
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
});
function send_message(){
websocket.send('update tables');
console.log('sending to message to index');
}
</script>
</body>
</html>