B4J Question Update only one table with webserver

[birnesoft]

I have 2 tables on my website and want to refresh only on table by click

but my code delete both tables by click

Sub Process_Globals
    Public const Port As Int = 3001    'after running access the port with http://localhost:3001
    Public staticFolderPath As String
    Private srvr As Server
    Dim test1LastClicked =True As Boolean
    Dim test2LastClicked=True As Boolean
 
    Dim tableBodyIdtest1 As String = "tablebody1"
    Dim tableBodyIdtest2 As String = "tablebody2"
 
End Sub

Sub AppStart (Args() As String)
 
    staticFolderPath = File.Combine(File.DirApp, "www")
 
    srvr.Initialize("srvr")
    srvr.Port = Port 'set the server port
    srvr.StaticFilesFolder = staticFolderPath 'set the static folder to allow access to css file/images/files
 
    srvr.AddWebSocket("/testserver/ws", "testserver") 'add the websocket
    srvr.AddHandler("/test1", "test1", False) 'add test handler http://localhost:3001/test will call the test handler event
    srvr.AddHandler("/test2", "test2", False) 'add handler to get req from the form element via POST request
    srvr.Start
    StartMessageLoop
End Sub

'WebSocket class
Sub Class_Globals
    Private ws As WebSocket
End Sub
Public Sub Initialize

End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    ws = WebSocket1
    If Main.Test1LastClicked Then loadtest1
    If Main.Test2LastClicked Then loadtest2
    Main.Test2LastClicked=False
    Main.Test1LastClicked=False
End Sub

Private Sub WebSocket_Disconnected
    Log("disconnected testsocket")
End Sub

Sub loadtest1
    For i=0 To Rnd(1,5)
        addTableRow1(i)
    Next
    ws.Flush
End Sub
 
Sub addTableRow1(pos As Int)
    Dim jsFunction As String = $"
    var table = document.getElementById('${Main.tableBodyIdTest1}');
    var row = table.insertRow(${pos});
    row.insertCell(0).innerHTML = '<form action="test1" method="post"><button id="testbutton" type="submit" name="${pos}" value="">${pos}</button></form>';
    "$
    ws.Eval(jsFunction,Null)
End Sub


Sub loadtest2
    For i=0 To Rnd(1,5)
        addTableRow2(i)
    Next
    ws.Flush
End Sub
 
Sub addTableRow2(pos As Int)
    Dim jsFunction As String = $"
    var table = document.getElementById('${Main.tableBodyIdTest2}');
    var row = table.insertRow(${pos});
    row.insertCell(0).innerHTML = '<form action="test2" method="post"><button id="testbutton" type="submit" name="${pos}" value="">${pos}</button></form>';
    "$
    ws.Eval(jsFunction,Null)
End Sub

'Handler class

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Main.test1LastClicked=True
    resp.SendRedirect("/")
End Sub

'Handler class

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Main.test2LastClicked=True
    resp.SendRedirect("/")
End Sub

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>evoloo2</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body id="body">
Top
<br>
<div style='left:11%;top:5%; width: 20%; height: 445px;position:absolute;' id='divID7' class='divClassTMain'>
mytable1
    <table id="mytable1" class="table table-striped">
      <thead>
        <tr>
          <th scope="col">List1</th>
        </tr>
      </thead>
      <tbody id="tablebody1">
      </tbody>
    </table>
</div>

<div style='left:51%;top:5%; width: 20%; height: 445px;position:absolute;' id='divID7' class='divin'>
mytable2
    <table id="mytable2" class="table table-striped">
      <thead>
        <tr>
          <th scope="col">List1</th>
        </tr>
      </thead>
      <tbody id="tablebody2">
      </tbody>
    </table>
</div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- jQuery -->
  <script src="b4j_ws.js"></script>
  <script src="jquery.form.min.js"></script>
  <script>
    $(document).ready(function() {
      b4j_connect("/testserver/ws");
    });
  </script>
</body>
</html>

 

[Erel]

Why are the two handlers needed? Have you seen this example: https://b4x.com:51041/dbutils/index.html ?