B4J Question How to get li index inside nested ul

Chris Guanzon · Jul 12, 2022

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 · Jul 12, 2022

Chris Guanzon said:
If I clicked the li inside ul id = second, The output was

What comes into the log if you click the 1st one?

(MyMap) {which=0, metaKey=false, pageY=137, pageX=189, target}

?

Chris Guanzon · Jul 12, 2022

DonManfred said:
What comes into the log if you click the 1st one?

?

Hello, thank you for answering my question

this is the log

B4X:

(MyMap) {which=1, metaKey=false, pageY=232, pageX=86, target=}

Chris Guanzon · Jul 12, 2022

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.

B4J Question How to get li index inside nested ul

Chris Guanzon

Active Member

DonManfred

Expert

Chris Guanzon

Active Member

Chris Guanzon

Active Member

Similar Threads

B4J Question How to get li index inside nested ul

Chris Guanzon

Active Member

DonManfred

Expert

Chris Guanzon

Active Member

Chris Guanzon

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency