Dmx-class is not added when the page loads

Wappler General
#1

I double-checked the code several times. Everything seems right. However, when the page loads, the dmx-class does not add the class according to the condition. When working after loading, everything works correctly:

dmx-class1
dmx-class1940×203 379 KB

I will explain the animation. When the page loads, the first tab should be active, but the class is not added to the element, although the conditions are met.

Code used:

<dmx-value id="mess_filter1" dmx-bind:value="1"></dmx-value>

<div class="d-flex h-100">
  <nav class="navbar navbar-expand-lg navbar-light bg-light pt-0 pb-0 pr-0">
     <div class="navbar-nav h-100 align-items-center">
        <a class="nav-item nav-link h-100 cse_mess_head_button" href="#" 
 dmx-bs-tooltip="'Мои задачи'" dmx-class:active="content.mess_filter1.value == 1" 
 dmx-on:click="mess_filter1.setValue(1);mess_filter2.setValue(0);scroll1.goto('#focus_reset')">
           <i class="fa fa-tasks">
           </i>
        </a>
        <a class="nav-item nav-link h-100 cse_mess_head_button" href="#" 
 dmx-bs-tooltip="'Делегированные задачи'" dmx-class:active="content.mess_filter1.value == 2" 
 dmx-on:click="mess_filter1.setValue(2);mess_filter2.setValue(0);scroll1.goto('#focus_reset')">
          <i class="fa fa-slideshare">
          </i>
        </a>
        <a class="nav-item nav-link h-100 cse_mess_head_button mr-4" href="#" 
 dmx-bs-tooltip="'Личные сообщения'" dmx-class:active="content.mess_filter1.value == 3" 
 dmx-on:click="mess_filter1.setValue(3);mess_filter2.setValue(0);scroll1.goto('#focus_reset')">
          <i class="fa fa-comment-o">
          </i>
        </a>
        <a class="nav-item nav-link h-100 cse_mess_head_button" href="#" 
 dmx-bs-tooltip="'Архив задач'" dmx-class:active="content.mess_filter1.value == 4" 
 dmx-on:click="mess_filter1.setValue(4);mess_filter2.setValue(0);scroll1.goto('#focus_reset')">
           <i class="fa fa-archive fa-fw">
           </i>
        </a>
     </div>
  </nav>
</div>
#2

In Bootstrap, to set the class to active, adding active is all that is required

<a class="nav-item nav-link active h-100 cse_mess_head_button" href="#"

I don’t see a reason to make this more complicated.

I also notice that the URL does not change when choosing one of the other menu items. This is a pity because you could be making use of dmxBootstrap5Navigation.js to activate the chosen menu item. Is there a reason why you have chosen not to use the routing?

I also notice that the href is not being used in an anchor element. This is bad practice and you should be looking at using a button instead of an anchor.

Yes, I am a grumpy old man, not proud of it, maybe you will forgive me. :angry:

#3

Hi, Ben.

No problems. :wink: When I first started working with Wappler, many of your posts were useful to learn. That’s why I’m always happy to see your posts.

This is exactly what my code does. This binding is responsible for this: dmx-class:active="content.mess_filter1.value == 1"

If you are talking about setting the active mode manually:

nav2
nav2552×896 69.4 KB

As a result, when the page loads, the class will still be missing. But in the future, when switching, the class will be added correctly. I.e. I only experience problems when loading the page.

My app uses Bootstrap 4.

Routing is not used because the specified navigation is not associated with either pages or tabs. The task of this navigation is to manage the filter that is used in SC.

I follow the Bootstrap and Wappler guidelines. The navigation element uses anchor rather than buttons:

nav1
nav11808×859 301 KB

Note that problems only occur with adding the class active via the dmx-class when loading the page to the navigation. Other classes are added correctly.

Therefore, the question arises: is it correct to manage the class active using the dmx-class in navigation? If Not, how exactly should I do it in my case?

#4

This is unbelievable, the construction works perfectly except when the page is first loaded. Must be a Bootstrap thingy. If you use a class of text-xxx it works, even on page load.

1 Like
#5

Yes, I mentioned it above. I just wanted to understand why the class is active working incorrectly.

1 Like