I have 2 tables on my website and want to refresh only on table by click
but my code delete both tables by click
but my code delete both tables by click
main:
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
testserver:
'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
test1:
'Handler class
Sub Handle(req As ServletRequest, resp As ServletResponse)
Main.test1LastClicked=True
resp.SendRedirect("/")
End Sub
test2:
'Handler class
Sub Handle(req As ServletRequest, resp As ServletResponse)
Main.test2LastClicked=True
resp.SendRedirect("/")
End Sub
index.html:
<!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>
Last edited:
