B4J Question [ Jserver ] JQueryElement invalidates event listener when using : .SetHtml()

[Waldemar Lima]

Hello guys, I'm currently working on a website that uses jserver with websocket, however, I'm trying to set the Html of >

Private listaindicadores As JQueryElement
Private indicatorbtn As JQueryElement
listaindicadores.SetHtml($"
   
                <tr>
                    <td class="col-8">${Nome}</td>
                    <td><a id="indicadorbtn" class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" ><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Abrir indicador</a></td>
                </tr>
           
            "$)

in html : panel.html >

<div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Lista de indicadores disponíveis :</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Gerar Relatório</a>
                    </div>
                    <div class="row">
                        <div class="col col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="col-8">Indicadores</th>
                                                    <th>*</th>
                                                </tr>
                                            </thead>
                                            <tbody id="listaindicadores">
                                                <tr>
                                                    <td class="col-8"></td>
                                                    <td><button class="btn btn-primary" type="button"></button></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Is there something I'm doing wrong?

 

[OliverA]

You're replacing everything in the TBODY element with the ID of listaindicadores.

Try this:

<tbody >
  <span id="listaindicadores"></span>
  <tr>
    <td class="col-8"></td>
    <td><button class="btn btn-primary" type="button"></button></td>
  </tr>
</tbody>

Now it will place the HTML between the SPAN tags
Note: DIV should also work

 

[Waldemar Lima]

I'm confused, it's injecting inside the tag
I will send an example of how it works..

 

[Waldemar Lima]

here

 

[tummosoft]

Catch event click on button inside ahtml page:

listaindicadores.SetHtml($"
  
               <tr>
            <td>Ted</td>
            <td><button id="indicadorbtn" class="btn btn-primary" type="button">sdasdasd</button></td>
        </tr>
           <script>
           $('#indicadorbtn').on('click', function(e) {
                   b4j_raiseEvent('indicadorbtn_Click', {id:'hello world'});
           });           
           </script>
            "$)

 

[Waldemar Lima]

But why doesn't it directly work?

When replacing the html manually after the page is loaded, does it invalidate?

 

[tummosoft]

Because DOM has not yet updated.
Your event (id) must registered before, it can empty: <div id="indicadorbtn"></div>

 

[OliverA]

The bad:
@Erel:

The "automatic events" will not be created for elements added dynamically.

Link: https://www.b4x.com/android/forum/t...-that-was-added-in-runtime.131244/post-826893

The good:
@Erel:

You can create elements at runtime and later access them with ws.GetElementById or GetElementBySelector.
Check this example: https://b4x.com:51041/dynamic/index.html

The code is in Dynamic class in the server example: [WebApp] Web Apps Overview

Link: https://www.b4x.com/android/forum/threads/jserver-jqueryelement.130372/post-820567

In your case, you intercept the click event of listaindicadores (a parent container):

Sub listaindicadores_Click (Params As Map)
    Dim target As String = Params.Get("target")
    If target.EqualsIgnoreCase("indicatorbtn") Then
        Log("indicatorbtn has been clicked!!!!!")
        indicatorbtn = ws.GetElementById("indicatorbtn")
        indicatorbtn.SetText("PUSHED")
    End If
End Sub

Note: At minimum, you have to have one non-dynamic element with an id containing any of your "dynamic" created elements.

 

[Waldemar Lima]

aesome guys, it works