B4J Question WebSocket jQuery SetHTML ?

Ganiadi · Jul 19, 2022

Hi All,

I tried to set html using jqueryelement into an index.html file using below scenario

B4j WEBSOCKET:

'WebSocket class
Sub Class_Globals
    Private ws As WebSocket
    Private wspgName As String = "wspgBS"
    Private wspgID As String
    '====================================JQUERY=====================================
    Private jqm 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(wspgID)

    SetPage
End Sub

Private Sub SetPage
    Dim cHTML As String
    cHTML = $"
    <div>
        <input type="date" value="2022-07-19"
        min="2022-07-19" class="form-control validate-text" placeholder="Arrival"
        style="width: 100%; align-items: center;">

    </div>
 
    "$
    jqm.SetHtml(cHTML)
    ws.Flush
    
End Sub

Private Sub jqm_Click(Params As Map)
    Log("CLICK")
End Sub
Private Sub WebSocket_Disconnected
    Log(wspgName & " Disconnected !")
End Sub

INDEX.HTML

B4j WEBSOCKET:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/template/styles/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/template/styles/style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="/template/scripts/bootstrap.min.js"></script>
     <script type="text/javascript" src="/template/scripts/custom.js"></script>
 
     <script src="/js/b4j_ws.js"></script>
    
</head>
<body class="theme-light" data-highlight="highlight-red" data-gradient="body-default">
  
    <div id="jqm">
    </div>
 
    <script>
        $(document).ready(function () {
            b4j_connect("/wspgBS");
        });
    </script>
</body>
</html>

When i click the calendar icon it doesnt display the calendar popup, is there anything false that i did
please advise and help

If i Change the index.html directly whithout jQueryElement it works

B4j WEBSOCKET:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/template/styles/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/template/styles/style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="/template/scripts/bootstrap.min.js"></script>
     <script type="text/javascript" src="/template/scripts/custom.js"></script>
 
     <script src="/js/b4j_ws.js"></script>
    
</head>
<body class="theme-light" data-highlight="highlight-red" data-gradient="body-default">
  
    <div>
        <input type="date" value="2022-07-19" 
        min="2022-07-19" class="form-control validate-text" placeholder="Departure"
        style="width: 100%; align-items: center;">
    </div>
 
    <script>
        $(document).ready(function () {
            b4j_connect("/wspgBS");
        });
    </script>
</body>
</html>

Works without jQUERY

Tks For Helping......

Erel · Jul 19, 2022

Check the browser development tools console. Are there any messages?

Ganiadi · Jul 20, 2022

Erel said:
Check the browser development tools console. Are there any messages?

Hi Erel,
Yes i did with below screenshoot, both scenarios using jquery or not will result the same message
but using direct without jquery scenario still working fine ( popup calendar when icon clicked ) except if i use jquery element

teddybear · Jul 20, 2022

Ganiadi said:
Hi All,

I tried to set html using jqueryelement into an index.html file using below scenario

Tks For Helping......

I have tested the class wspgBS, it works, what is your Main router such as srvr.AddWebSocket(Path, class)?

Ganiadi · Jul 20, 2022

teddybear said:
I have tested the class wspgBS, it works, what is your Main router such as srvr.AddWebSocket(Path, class)?

i use this

srvr.AddWebSocket("/wspgBS", "wspgBS")
while when i tried to create another element like <a>, <h1>, etc works fine except that input date

Tks

teddybear · Jul 20, 2022

Ganiadi said:
i use this

srvr.AddWebSocket("/wspgBS", "wspgBS")
while when i tried to create another element like <a>, <h1>, etc works fine except that input date

Tks

It seems the bootstrap.min.js is wrong in your html, try again after remove it

B4X:

  <!--<script type="text/javascript" src="/template/scripts/bootstrap.min.js"></script> -->

Ganiadi · Jul 21, 2022

teddybear said:
It seems the bootstrap.min.js is wrong in your html, try again after remove it

B4X:



Hi Teddy & Erel,

Thanks for your direction, i dont know and it's weird, but anyway it's working now when i try creating with a new page

[SOLVED]

Best Regards

Alexis Arauz · Dec 16, 2022

Ganiady, your problem was this code, It happens because there is a conflict between your sub jqm_Click and the click event of the calendar, only one of the two will be executed, but not both. This also happens with checkboxes and other elements that require a click to be executed.

B4J Code:

Private Sub jqm_Click(Params As Map)
    Log("CLICK")
End Sub

B4J Question WebSocket jQuery SetHTML ?

Ganiadi

Active Member

Erel

B4X founder

Ganiadi

Active Member

teddybear

Well-Known Member

Ganiadi

Active Member

teddybear

Well-Known Member

Ganiadi

Active Member

Alexis Arauz

Member

Similar Threads