How to include tab contents in spring when using tabbed form - spring

I am trying to create a registration page that is using a tabbed view.
It was working perfectly fine when I tried to include all the tab contents inside respective tabs in single page.
Later I wrote the contents of each tab to different jsp pages specifically for each tab and tried to include the jsp pages using
But now all the jsp pages' contents are being listed under a single tab. I mean each tab is displaying contents of other tabs too.
<div class="panel-body">
<div class="reg-panel">
<ul id="breadcrumbs-one" class="nav nav-tabs" role="tablist">
<li class="active"><a data-toggle="tab" href="#main">Basic
Details</a></li>
<li><a data-toggle="tab" href="#tab1">Grade Details</a></li>
<li><a data-toggle="tab" href="#tab2">Facilities</a></li>
<li><a data-toggle="tab" href="#tab3">Awards</a></li>
<li><a data-toggle="tab" href="#">Documents</a></li>
<li><a data-toggle="tab" href="#preview">Preview</a></li>
<li><a data-toggle="tab" href="#submit">Submit</a></li>
</ul>
<div class="tab-content">
<div id="main" class="tab-pane fade in active">
<jsp:include page="/WEB-INF/views/basic_details.jsp" />
</div>
<div id="tab1" class="tab-pane fade">
<jsp:include page="/WEB-INF/views/grade_details.jsp" />
</div>
<div id="tab2" class="tab-pane fade">
<jsp:include page="/WEB-INF/views/grade_details.jsp" />
</div>
....... and so and so ......
The problem here is that the contents of all the tabs basic details, grade details, awards and all such is being displayed under one tab itself.
Please help me resolve this. Which method should I actually have used? Is it better to use jstl or spring url instead?

First get the list in spring controller.
#RequestMapping(value = { "/registration" }, method = RequestMethod.GET)
public ModelAndView registration(ModelAndView model)
{
List<Registration> regList = regService.regList();
model.addObject("regList ", regList);
model.setViewName("registration");
setBreadCrumb(model);
return model;
}
Now the list is added using model.addObject("regList ", regList);
Use the regList in jsp using JSTL you can do
<c:if test="${regList.grade=="something"}">
show this
</c:if>
<c:if test="${regList.facilities=="something-else"}">
show that
</c:if>

Related

Using Laravel blade syntax for Bootstrap tabs and routing

I have already read some links regarding Bootstrap tab in Laravel but none of them is working for me.
I have 3 views (movies, scheduled_movies, group_movies) each view has its respective controller. Now I want to show all these views using bootstrap tab component. I tried a lot, but tabs don't work properly or sometimes all the data of three view shown in the first tab and sometimes only tabs are shown but not the data.
Here is my code-
app.blade.php
#include('components.navbar')
#yield('base')
base.blade.php
#extends('layouts.app')
#section('base')
<div class="container-fluid">
<div class="row">
<div class="col-2 d-none d-md-block bg-light sidebar" >
#include('components.sidebar')
</div>
<main id="main" class="col-10 ml-sm-auto col-lg-10 px-3">
#yield('content')
</main>
</div>
</div>
#endsection
I have separate tab.blade.php where all my bootstrap tab code is written. and I have included all 3 views using #include
tab.blade.php
#extends('layouts.base')
#section('content')
<div class="p-3">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies"
aria-selected="true">All movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheduled-movies-tab" data-toggle="tab" href="#scheduled-movies" role="tab"
aria-controls="scheduled-movies" aria-selected="false">Scheduled Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="group-movies-tab" data-toggle="tab" href="#group-movies" role="tab" aria-controls="group-movies"
aria-selected="false">Group Movies</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show" id="movies" role="tabpanel" aria-labelledby="movies-tab">
#include('movies.all_movies.index')
</div>
<div class="tab-pane fade" id="scheduled-movies" role="tabpanel" aria-labelledby="scheduled-movies-tab">
#include('movies.scheduled-movies.index')
</div>
<div class="tab-pane fade" id="group-movies" role="tabpanel" aria-labelledby="group-movies-tab">
#include('movies.group-movies.index')
</div>
</div>
</div>
#endsection
MoviesController
class MoviesController extends Controller
{
public function index()
{
$movies = Movie::all();
return view('movies.all_movies.index')->with('movies', $movies);
}
}
The same code is written in ScheduledMoviesController.
This is my web.php file
Route::get('movies', 'MoviesController#index');
Route::get('scheduled-movies', 'ScheduledMoviesController#index');
Route::get('group-videos', 'GroupMoviesController#index')->middleware('verified');
Till now I have figured out some cases
Maybe my blade syntax #yield or #include is wrong.
Maybe routing is wrong (because of the first page of the tab showing data from all three).

Split views in different tabs

I have a page where I want the data to be showed in multiple tabs (and the data may only be loaded when clicked on the tab):
View
#model project.Models.AdminModels.Module
#{
ViewBag.Title = "Module";
}
<h2>#ViewBag.Title: #Model.Name</h2>
<div class="ui secondary pointing menu">
<a class="item" asp-controller="Module" asp-action="Details" asp-route-id="#Model.ID">
Details
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Menus
</a>
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Other tabs
</a>
</div>
<div class="ui segment" id="content">
</div>
Is their a way that I can load the data in the content div, without reloading and redefining the whole page?

Making the Dropdown title in the nav clockable option

I'm using the getbootstrap code for default navbar.
I want the title name of Drop-down (Test2) also to link to a html page. I added the linkage for the href, however when I'm running the page and clicking on the Drop-down text (Text2) nothing happened
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand">Test</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-header" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>test1</li>
<li class="dropdown">
Test2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test21</li>
<li>Create Test22</li>
<li>Test23</li>
</ul>
</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>

Sitecore Cache Issue

I set "cacheHtml=true" in web.config file and set sublayout's (ascx file) cache setting.
Whenever I reflash the page, I can see the increasing "From Cache" count in admin page. However, the sublayout(.ascx) doesn't get all its template field values on the page.
Suppose that there is CSS class name, like "nav-list", in its template field and HTML result should look like this.
<div class="nav-list">
something
</div>
But, if I check "cacheable", it shows like this. Otherwise, it shows correct style.
<div class=" ">
something
</div>
I checked:
Checked - Cacheable
Checked - Vary by Data
Checked - Vary by Parameters
Checked - Vary by Query String
What is the issue?
=================== Update ====================
This is the result when I DIDN'T check "Cacheable". (Correct Layout)
<div id="cloud-header">
<div class="navtacular-cover"></div>
<nav class="navtacular navtacular-theme-simple navtacular-variant-dark container block-center">
<h1 class="navtacular-label">
<i class="icon-reorder"></i>
</h1>
<ul class="navtacular-list">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
</ul>
</nav>
This is the result when I DID check "Cacheable". All class values which are from datasource are empty.
<div id="cloud-header">
<nav class="">
<h1 class="">
<i class=""></i>
</h1>
<ul class="">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
</ul>
</nav>
This is the code for all class names which show empty.
<asp:View ID="viewNormalMode" runat="server">
<nav class='<% Response.Write(myDataSourceItem.Fields["Nav Bar Class"]); %>'>
<h1 class='<% Response.Write(myDataSourceItem.Fields["Label h1 Class"]); %>'>
<i class='<% Response.Write(myDataSourceItem.Fields["Label i Class"]); %>'></i>
<% Response.Write(myDataSourceItem.Fields["Nav Bar Label"]); %></h1>
<ul class='<% Response.Write(myDataSourceItem.Fields["ul Class"]); %>'>
<asp:Literal ID="linkObjects" runat="server"></asp:Literal>
</ul>
</nav>
</asp:View>
The class name is from another item which has different template fields, called NavBarLinkItem.
In the NavBarLinkItem templates, there are fields (url, li Class, a Class, li Id, etc...).
Again, the original nav sublayout uses datasource to get those values.

Gumby CSS framework parent anchor in dropdown on mobile

Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>

Resources