B4J Question How to get li index inside nested ul

Chris Guanzon

Active Member
Licensed User
Longtime User
Hello, how can I get the <li> index inside nested <ul>?

HTML:
<ul id="first">
    <li> <!-- I want to get the index of this li -->
        <a>Item here</a>
    </li>
    <ul id="second">
        <li> <!-- I want to get the index of this li also -->
            <a>Item here</a>
        </li>
    </ul>
</ul>

Here's my code

B4X:
Private sub First_Click (Params as Map)
    Dim target As String = Params.Get("target")
    
    log(target)
End Sub

If I clicked the li inside ul id = second, The output was:
JSON:
(MyMap) {which=1, metaKey=false, pageY=137, pageX=189, target}
 

DonManfred

Expert
Licensed User
Longtime User
Upvote 0

Chris Guanzon

Active Member
Licensed User
Longtime User
Here's my code:

HTML:
<ul id="sidebar" class="nav nav-main">
    <li id="lidashboard" class="">
        <a id="dashboard" class="nav-link" href="#">
            <i class="fas fa-home" aria-hidden="true"></i>
            <span>Dashboard</span>
        </a>
    </li>
    <li id="libuyload" class="nav-parent">
        <a id="buyload" class="nav-link" href="#">
            <i class="fas fa-desktop-alt" aria-hidden="true"></i>
            <span>Buy Load</span>
        </a>
        <ul id="buyloadchild" class="nav nav-children">
            <li> <!-- i want to get the index of this li -->
                <a class="nav-link" href="ecommerce-dashboard.html">
                    Smart Prepaid
                </a>
            </li>
            <li> <!-- i want to get the index of this li -->
                <a class="nav-link" href="ecommerce-dashboard.html">
                    Globe Prepaid
                </a>
            </li>
            <li> <!-- i want to get the index of this li -->
                <a class="nav-link" href="ecommerce-dashboard.html">
                    Sun Prepaid
                </a>
            </li>
            <li> <!-- i want to get the index of this li -->
                <a class="nav-link" href="ecommerce-dashboard.html">
                    DITO
                </a>
            </li>
            <li> <!-- i want to get the index of this li -->
                <a class="nav-link" href="ecommerce-dashboard.html">
                    Others
                </a>
            </li>
        </ul>
    </li>
    <li id="lipaybills" class="">
        <a id="paybills" class="nav-link" href="#">
            <i class="fas fa-cash-register" aria-hidden="true"></i>
            <span>Pay Bills</span>
        </a>
    </li>
</ul>


B4X:
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    ws = WebSocket1

    ws.Eval($"$('#sidebar').on('click', 'li', function () {
          b4j_raiseEvent("sidebar_Click", {index: $(this).index()});
        });"$, Null)
  
    If ws.Session.HasAttribute($"access_token"$) = False Then
        WebUtils.RedirectTo(ws, "/users/login/index.html")
        Return
    Else
        myaccesstoken = ws.Session.GetAttribute($"access_token"$)
        ws.Session.SetAttribute("selected_sidebar", "0")
    End If
  
    Wait For (getUserProfile) Complete (Success As Boolean)
    If Success Then
        menuitem.SetHtml(Controls.createMenuItem(ws))
        sidebar.SetHtml(Controls.createSidebarItem)
        Sleep(0)
        lidashboard.SetProp("class", "nav-active")
    End If
  
    ws.Flush
End Sub

Sub sidebar_Click (Params As Map)
    Dim target As String = Params.Get("index")
  
    Log($"Clicked on item ${Params.Get("index")}"$)
  
    If target = "null" Then
        Return
    End If
  
    selected_item = target
  
    Select Case selected_item
        Case 1
            If isExpanded Then
                libuyload.SetProp("class", "nav-parent")
                isExpanded = False
            Else
                libuyload.SetProp("class", "nav-parent nav-expanded")
                isExpanded = True
            End If
          
        Case Else
            If selected_item = ws.Session.GetAttribute("selected_sidebar") Then
                Return
            Else
                WebUtils.RedirectTo(ws, Controls.side_bar(target))
            End If
    End Select
  
    ws.Flush
End Sub

I can get the index of li under ul id="buyloadchild" but it's the same index with li id="dashboard" which is 0.
 
Last edited:
Upvote 0
Top