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

Deleting identical string objects from two arrays or lists in Java

My first question here is regarding Java programming. I want to implement a specific logic: I have two string Arrays (or Lists of strings). One array named asu includes elements M1, M2, M3 ... The other array called rzs consists of elements M1, M2, M3 ...

Tips for implementing PHP Instagram Signature using AJAX

I'm facing a challenge with the latest Instagram API, which now requires an Enforced Signed request that includes both an Access Token and Client Secret to generate a Signature. If anyone could spare some time to help me out, I would greatly apprecia ...

What could be the reason for the undefined value of my ID retrieved from the next JS router.query upon page refresh?

When using the id obtained from the next router.query to dynamically render elements, it works fine when accessing the room from next/link. However, upon refreshing the page, an error is thrown. https://i.stack.imgur.com/yEjGS.png Below is the code snipp ...

unable to display data through the web service

The functionality of this code is correct, but it seems to not be displaying records. When the record is retrieved from the file and shown in an alert, everything works fine. $j().ready(function(){ var result =$j.ajax({ ...

What is the best way to continue looping until my variable matches the user's input? JavaScript

As of now, this nested for loop continues until both i and j reach 3. How can I reset the variables once they have reached their maximum value so that the loop can continue running? Alternatively, is my current approach incorrect? for (i=1; i<=3; i=i+ ...

Ensure menu options are aligned to the right using material-ui

My material-ui menu currently has the following setup: <span> <Link to="/issues"> <Button style={isActive(history, "/issues")}>Issues </Button> </Link> <Link to="/users"> <Button style={isActive(his ...

Leveraging Promises in AngularJS to create a chain between two separate controllers

I've developed a provider called MyRestServices to handle my REST-Services: app.provider('MyRestServices', function() { this.baseUrl = null; this.setBaseUrl = function(_baseUrl) { this.baseUrl = _baseUrl; }; this.$get = [' ...

Preventing Cross-Site Request Forgery with Zend_Form for Ajax Requests

My method of adding CSRF protection to the form is as follows: $this->addElement('hash', 'csrf', array('ignore' => false)); After the session is created, any AJAX requests from the user are validated by checking the va ...

Is it possible in Java to convert a JSONObject to a JSONStringer and vice versa?

I'm feeling a bit puzzled about how to navigate through the apparent limitations of the JSONStringer class. I am aware that JSONStringer is designed to link together JSON rather than create it as a whole, but when a function only returns a JSONStringe ...

Obtaining various values for checkboxes using dynamic data in a React application

Retrieve all checkbox values dynamically import * as React from "react"; import Checkbox from "@mui/material/Checkbox"; import FormControlLabel from "@mui/material/FormControlLabel"; import axios from "axios"; expor ...

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...

Tooltipster fails to function with elements that are dynamically created

I've been struggling with this issue for several days now, but I can't seem to find a solution. In my JavaScript code, I have a function that generates HTML after an Ajax call is completed. I call this function in the following manner: $(documen ...

What is the best way to arrange the keys within a nested object in JavaScript?

Question: { "foo": "bar", "bar": "baz", "baz" : { "nestedKey": "foo" } } In order to sign this request using the Hmac512 algorithm, I must first stringify the object. I am concerned that if the key order is not preserved, the generated signature on the ...

console rendering duplication in React

Why am I seeing duplicate log entries in the console? While working on another project, I noticed that the number of HTML elements being added using jQuery was twice as much as expected (specifically while building a notification framework). To investigate ...

Utilizing Javascript or XUL windows without the use of iframes offer

I'm in the process of creating a multitab website for my bookmarks, but I've run into some issues. Here is the JavaScript version of what I'm trying to achieve: Unfortunately, there are obstacles with this method. The websites in the tabs ...

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

I’m struggling with a simple code where I want to store an array of arrays containing FFT audio data. It seems like there might be a JavaScript issue because when I try to push the array into another array called spectrums, all the values inside spectr ...

Encountering a CORS policy exception: The requested resource does not have the 'Access-Control-Allow-Origin' header. ReactJS/SpringBoot involved

Here is the exception I encountered in the browser: Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass acces ...

Author Names Missing from Book List in Locallibrary Tutorial

After spending several years working on front-end development, I've decided to delve into back-end development to expand my skill set. Following the Basic Node and Express course from FreeCodeCamp Curriculum, I am now following the MDN Express Localli ...

The Facebook SDK's function appears to be triggering twice

I am currently in the process of integrating a Facebook login button into my website and have made progress, but I have encountered a problem. The Facebook SDK JavaScript code that I am using is as follows: function statusChangeCallback(response) { ...

Why does android.text.BoringLayout have several JSON fields with the same name, mPaint?

Does anyone have any idea what is happening here? 02-06 09:51:41.609: E/ACRA(15955): com.goosesys.dta_pta_test fatal error : Unable to start service com.goosesys.dta_pta_test.BGCollectorProc@4232c178 with Intent { flg=0x4 cmp=com.goosesys.dta_pta_test/.BG ...