B4J Question [SOLVED]B4J WebSocket - JQuery Does Not Triggerred In SetHTML()

[Ganiadi]

Dear All,

I tried to create a dynamic HTML through JQuery SetHtml and it works, but it doesn't responded when i clik each jquery button
If i create inside the HTML it works !
Please anyone may help what's wrong

Below is the B4J Coding

'WebSocket class
Sub Class_Globals
    Private ws As WebSocket
    Private wspgName As String = "wspgGMHome"
    Private wspgID As String
    '====================================JQUERY=====================================
    Private jqhome As JQueryElement
    Private jqbook As JQueryElement
    Private jqstay As JQueryElement
    Private jqaccount As JQueryElement
    Private jqpage As JQueryElement
    '================================================================================
       
End Sub

Public Sub Initialize
    Log(wspgName & " Initialize")
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    ws = WebSocket1
    wspgID = ws.Session.Id

    Log(wspgName & "#" & wspgID & " Connected")

    SetPage
   
    ws.Flush

End Sub

Private Sub SetPage
    Dim cHTML As String
   

    cHTML = $"
      <div id="page">
        <div class="header header-fixed header-logo-center">
            <img src="/images/Logo.png">
        </div>

        <div id="footer-bar" class="footer-bar-1">
            <a href="#" id="jqhome" class="active-nav"><i class="fa fa-home"></i><span>Home</span></a>
            <a href="#" id="jqbook"><i class="fa fa-calendar"></i><span>Booking</span></a>
            <a href="#" id="jqstay"><i class="fa fa-check"></i><span>Stay</span></a>
            <a href="#" id="jqaccount"><i class="fa fa-user"></i><span>Account</span></a>
        </div>

        <div class="card card-style bg-transparent shadow-0 no-click" data-card-height="390"></div>
    </div>
    "$  
    jqpage.SetHtml(cHTML)

End Sub

Private Sub WebSocket_Disconnected
    Log(wspgName & " Disconnected !")
End Sub

Private Sub jqhome_Click(Params As Map)
    Log("Home")

End Sub

Private Sub jqbook_Click(Params As Map)
    Log("Book")
End Sub

Private Sub jqstay_Click(Params As Map)
    Log("Stay")
End Sub

Private Sub jqaccount_Click(Params As Map)
    Log("Account")

End Sub

Below is the Index HTML

<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fontawesome-all.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/b4j_ws.js"></script>
</head>

<body class="theme-light" data-highlight="highlight-red" data-gradient="body-default">
    <div id="jqpage">

    </div>

    <!-- End of Page Content-->

    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="custom.js"></script>

    <script>
        $(document).ready(function () {
            b4j_connect("/wspgGMHome");
        });
    </script>
</body>

</html>

Tks in advance for helping..

 

[alwaysbusy]

Do you see errors in the browsers console? (F12 - console)

 

[Ganiadi]

@alwaysbusy
I can not find any error raised, just no respond and no log found. But it print any log button if I set the cHTML into the index.html

 

[Erel]

When a ws connection is made, the server sends the client a setAutomaticEvents message that is handled by b4j_ws.js and adds the declared events to the relevant elements.
This will not work in your case.

You should instead do as done in the "dynamic" example (https://b4x.com:51041/dynamic/index.html). Handle the click event of the parent element and find the actual target:

Sub MainDiv_Click (Params As Map)
    'find the target element
    Dim target As String = Params.Get("target")
    If target.StartsWith("btn") Then
        plog.SetHtml(WebUtils.ReplaceMap("Button <i>$TARGET$</i> was clicked", CreateMap("TARGET": target)))
        Dim btn As JQueryElement = ws.GetElementById(target)
        'get the current value from the map.
        Dim counter As Int = buttonsText.Get(target)
        counter = counter + 1
        btn.SetText(counter)
        buttonsText.Put(target, counter)
        btn.SetCSS("background-color", RandomCSSColor)
    End If
End Sub