Return new thymeleaf page from controller

See more:

Java

Ajax

Spring

I have a web app built using Spring boot and thymeleaf. I have used only the index page so far which has different models in it and it work just fine.

Now I want to add a new page. By new page I mean in the url it says http://localhost:8081/app/index

Now I have added a dropdown on the page Let's say About Us. When I try to do that it stays on that page and don't do much or it takes me to logout page, here is my code:

In Thymeleaf index page:

<pre> <div class="navbar-text navbar-right">
        <div class="btn-group dropdown" style="color:#003d71;">
            <span id="menu1" class="fa fa-align-justify dropdown-toggle hoverIcon" data- 
            toggle="dropdown"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1" 
            style="background:#003d71;">

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data- 
                toggle="modal" data-target="#changePasswordModal" data-backdrop="false" 
                data-keyboard="false">Change Password</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data- 
                 toggle="modal" data-target="#whatsNewModal" data-backdrop="false" data- 
                 keyboard="false">What's New</a></li>
                <li role="presentation" sec:authorize="isAuthenticated()">
                    <a role="menuitem" tabindex="-1" th:href="@{/logout}">Sign Out</a>
                </li>
                <li><a role="menuitem" href="#" th:onclick="'loadAboutUs()'">About Us</a> 
                </li>
                <!-- <li><a role="menuitem" th:href="@{th_aboutUs.html}">About Us</a></li>-- 
                  >
                <!-- Using above taking to logout-->
            </ul>
        </div>

In javascript:

<pre lang="Javascript">function loadAboutUs() {
  $.ajax({
    type: "GET",
    url: "/app/aboutUs/",
    cache: false,
    timeout: 100000,
    success: function (result) {
     console.log("Success",result);
         $("#mainBody").html(result);

    // Trying below takes me to logout page
        window.location.href = "/app/aboutUs";

    },
    error: function (e) {
        window.location = "/app/login";
        console.log("ERROR: ", e);
    },
    done: function (e) {
        console.log("DONE");
    },
   });
  }

In my controller:

<pre><pre lang="java"> @RequestMapping(value = "/aboutUs", method = RequestMethod.GET)
 public ModelAndView aboutUs(HttpServletRequest request, Model model, HttpServletResponse 
  response) throws Exception {
    session = request.getSession(false);
    return new ModelAndView("th_aboutUs");
  }

I have a SecurityConfiguration file which has the below function and I added the Url pattern in it if in case it is effecting it:

<pre lang="java">@Override
     public void configure(WebSecurity web) throws Exception {
        web.ignoring()
            .antMatchers("/","/images/**", 
         "/login**","/callback/","/**/*.js","/**/*.css","/**/*.scss","/**/*.map");
      }

    @Bean
public FilterRegistrationBean<SessionFilter> loggingFilter(){
    FilterRegistrationBean<SessionFilter> registrationBean
            = new FilterRegistrationBean<>();

    registrationBean.setFilter(new SessionFilter());
    registrationBean.addUrlPatterns("/index/*");
    registrationBean.addUrlPatterns("/aboutUs/*");

    return registrationBean;
}

What I have tried:

I have tried returning specific status code from controller and then redirecting to the new page: window.location.href = "/app/aboutUs";