IDs in repeat region

Wappler General How To
#1

i have setup a repeat region and inside the repeat i have tabs with their nav

now the issue is that repeat region will repeat the ID for the tabs for each record.

using Action Toggle in the tab link will effect the tabs in first record in my repeat region only

#2

I got around this by using the $index property of a repeat where the $index counts each time it repeats the element by increments of 1.
So in your tabs go to the ID field and if it is mytabnav make it id="'mytabnav'+$index"
Make sure to change the ID to the same in both places.

1 Like
#3

@psweb
That did not work since it doesn’t evaluate $index value.
so i add it like this and it works

dmx-bind:id="'Detail'+$index"

with this you can make any element in a repeat have unique ID not just tabs if any one find this later

2 Likes
#4

Haha. Quite correct sorry I always forget to mention the dmx-bind parameter.

#5

Hi mrbdrm! thanks for the solution, i have the exact same issue with some tabs nav link and tab content in a repeat region.
Could you detail the steps with more detail?
Which value should I insert on id of a tab_nav_link?
which vaile should I insert on the id of the tab_content?
is dmx:id=" ‘Detail’+ $index an attribute to paste on the html or there’s a field on the properties panel of the elements?
Thanks for the help.

#6

Have a play around with:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />

    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
</head>

<body is="dmx-app" id="index">
    <dmx-value id="varTab" dmx-bind:value="0"></dmx-value>
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist" is="dmx-repeat" dmx-bind:repeat="5">
                    <li class="nav-item">
                        <a class="nav-link active" dmx-bind:id="'navTabs1_'+$index+'_tab'" data-bs-toggle="tab" href="#" dmx-bind:data-bs-target="#navTabs1_{{$index}}" dmx-on:click="varTab.setValue($index)">Tab {{$index + 1}}</a>
                    </li>
                </ul>
                <div class="tab-content" id="navTabs1_content">
                    <div class="tab-pane fade show active" dmx-bind:id="'navTabs1_'+varTab.value" role="tabpanel">
                        <p>Content {{varTab.value + 1}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>
2 Likes
#7

This is a tutorial:

#8

i saw it and solved it! thanks!!

1 Like