Using Spring MVC and Thymeleaf to dynamically load new HTML pages on ajax calls

Hello there, I'm looking to dive into using thymeleaf for my web application. My goal is to create a simple website with HTML pages. Below is the URL of my landing page controller that returns the index.html page:

@RequestMapping("/index")
public String index() {
    return "index";
}

On my index.html page, I have a button that when clicked triggers the following controller call, which should return a different onclick.html page:

@RequestMapping("/web/onclick/{onclickvar}")
public String onclick(Model model, @PathVariable("onclickvar") String onclickvar) {
//do something with onclickvar
    return "onclick";
}

If anyone could provide some sample code, I would greatly appreciate it.

Answer №1

Instead of using a button, you can opt for an anchor link to achieve the same result.

<a href="onclick.html" th:href="@{/web/onclick/${someValueForClickVar}">Click here to navigate to onclick.html</a>

When the above link is clicked, it will interact with the controller and pass the value "someValueForClickVar" as

@PathVariable("onclickVar") String onclickVar
.

Please keep in mind that

/web/onclick/${someValueForClickVar}
represents the desired path variable value, so make sure to adjust the variable name accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

The text box's word limiter is malfunctioning when writing code on a child page of the master

Encountering an unexpected problem that I never thought would happen. I wrote a word limiter code for a text box on a single page and it was working perfectly fine. The word limiter worked and the remaining words were displayed by a label named "remaining6 ...

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

Organize elements with jQuery, remove, detach, clone, and append without worrying about memory leaks

I am facing a challenge with a parent div that contains approximately 300 child divs, each one containing an image and some text. I have an array with the necessary information to reorder these divs using references. However, whenever I loop through the a ...

Pop-up confirmation dialog in JQuery following an AJAX request

In order to validate on the server side whether a person with a specific registration number already exists in the database, I have implemented a process. If the person is found registered, the program flow continues as usual. However, if the number is not ...

How can we prevent the continual overwriting of Object values?

I'm currently working on extracting data from the USDA Food Data Central API. Specifically, I'm interested in retrieving the "name" and "amount" values under the "nutrient" section. The excerpt below shows the information retrieved: Input- repor ...

Unable to show the Ajax data

I am facing an issue with my ajax code as it is unable to display data from the database. Controller public function rating() { $rating = $this->db->select_avg('hasil_rating') ->get('tb_rating')->row_a ...

Game-Monitor.com provides a user-friendly server browsing experience similar to no

I am looking to create a server browser similar to . Can you assist me in finding answers to the following inquiries? Should I start with PHP or Java? Is it feasible to display Latency/Ping along with servers? Can it be developed using GWT (Googl ...

Tips for customizing the selection tip of a custom cursor using CSS

I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

I need help with setting the input value dynamically using data from my API. Once I click send, I want it to be saved in the database. However, I am struggling to dynamically populate the input field. Can someone guide me on the right approach to achieve t ...

Accessing website using Facebook credentials

I'm currently in the process of integrating Facebook Login on my website and have a few questions. I've encountered a problem where, upon receiving user permission, I need to create a new account in my database in order to utilize certain functio ...

Utilizing JQuery's ajaxComplete method to handle all Ajax requests on the webpage

I am working with a Java Script file and I need to perform an action after each Ajax request/response is completed. However, since I have multiple Ajax requests/responses, I want the action to be triggered only after all of them are completed. $(document) ...

Undefined scope

angular.module('CrudApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { templateUrl: 'assets/tpl/lists.html', controller: ListCtrl }). when('/add-user&apos ...

Setting up routes in VueJS and NodeJS Express for API integration: a comprehensive guide

My API routes always return HTML instead of JSON, despite trying numerous solutions that have all failed. Here is my current setup: // app.js const express = require("express"); const app = express(); const history = require("connect-history-api-fallback ...

Is there a way to efficiently process multipart/formdata, application/json, and text/plain within a single Express handler?

Operating an express demo server that mirrors the client's POST requests back to it is a part of an educational practice. In this exercise, the client makes a POST request using the fetch API, like so: fetch('http://localhost:5000/', { m ...

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...

Using Node and Mongoose to link documents that rely on each other for reference

Is there a way to add a document after another document has been successfully inserted using node and mongoose? For example, I initiate the creation of a document with mongoose, and once it is successfully added, I want to trigger the insertion of another ...

Can an EJS variable be transferred to an Angular ng-repeat filter?

I am currently working on a profile page where I need to display a user's name in plain text using <%= user.local.name %>. This requires querying the database through Mongoose. My issue now is figuring out how to pass that value to an Angular ng-repea ...

Performing a cross-domain JSON Get request with JQuery

Struggling with a simple JSON get request to an API on a domain that I don't have control over. Here's the code I'm using: $(document).ready(function () { $.ajax({ type: 'GET', url: 'http://pu ...

Providing Node-server with Vue.js Server Side Rendering

I've been attempting to deploy the Hackernews 2.0 demo on my Digital Ocean droplet but have hit a roadblock. npm run start starts the server on port :8080. npm run build is used for production builds. The specific build tasks can be found below: ...