Databases
StackOverflow2013
Postsdbo
POPlay! Framework & Twitter Bootstrap Dropdown active
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlay! Framework & Twitter Bootstrap Dropdown active
    primarykey
    data
    text
    <p>I have a play framework application and I am using twitter bootstrap for the frontend.</p> <p>In my navigation bar I have four options shown below.</p> <pre><code> &lt;div class="nav-collapse"&gt; &lt;ul class="nav"&gt; &lt;li class="@("active".when(nav == ""))"&gt;&lt;a href="@routes.Application.index()"&gt;@Messages("playauthenticate.navigation.home")&lt;/a&gt;&lt;/li&gt; &lt;li class="@("active".when(nav == "restricted"))"&gt;&lt;a href="@routes.Application.restricted()"&gt;@Messages("playauthenticate.navigation.restricted")&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="@routes.Application.createJourney()"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option1")&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option2")&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option3")&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; @if(!Deadbolt.viewRoleHolderPresent()) { &lt;li class="@("active".when(nav == "signup"))"&gt;&lt;a href="@routes.Application.signup()"&gt;@Messages("playauthenticate.navigation.signup")&lt;/a&gt;&lt;/li&gt; } &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>When I navigate to a "Home" or "Signup" page those options become <strong>active</strong> on the navigation bar. My problem is whenever I select an option from the dropdown bar the "Home" button remains active. I want the "Journey Management" option to be <strong>active</strong> but I am not sure how to do this with a dropdown menu.</p> <p>So I have made the following modifications to the HTML.</p> <pre><code> &lt;li class="@("active".when(nav == "journeys")) dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="@routes.Application.createJourney()"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option1")&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option2")&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option3")&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>When I select an option from the Journey Management dropdown, in this case the <strong>"Create Journey"</strong> page (it is the only page that has an action) the localhost address is <code>http://localhost:9000/journeys</code> so I am calling a method in the journeys application route. But the Home link on the navbar remains active whilst the Journey Management dropdown on the nav bar remains inactive.</p> <p><img src="https://i.stack.imgur.com/67maW.png" alt="Screenshot describing problem"></p> <p>Here is the source for the loaded page: </p> <p>This is the HTML from the actual page </p> <pre><code>&lt;div class="nav-collapse"&gt; &lt;ul class="nav"&gt; &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a href="/restricted"&gt;Restricted page&lt;/a&gt;&lt;/li&gt; &lt;li class=" dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="/journeys"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;Create a Journey&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/TODO"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;View all Journeys&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/TODO"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;View saved Journeys&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;` </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPlay! Framework & Twitter Bootstrap Dropdown active
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POPlay! Framework & Twitter Bootstrap Dropdown active
      1. USMike Cialowicz
      1. VTFavorite
    1. COI tried replacing the line `<li class="dropdown">` with `<li class="@("active".when(nav == "journeys"))" class="dropdown">`. This did not work.
      singulars
      1. POPlay! Framework & Twitter Bootstrap Dropdown active
      1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload