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>

0 ответов

Другие вопросы по тегам