javascript identifying a variable within location.href

Within my JavaScript code, there is a variable that holds a value:

var selectedItemId = null; // the value is assigned by another function

Next, there is a function defined like this:

function editLink() {
    location.href = /*[[@{/supplycontracts/edit/}]]*/'';
}

Now, I aim to include the value of the variable in the href, resulting in a link like:

http://localhost:8080/myApp/supplycontracts/edit/?contractId=4

Here, the '4' represents the value of selectedItemId.

I attempted different approaches such as:

location.href = /*[[@{/supplycontracts/edit(${selectedItemId})}]]*/'';

However, these attempts were unsuccessful.

When I used:

location.href = /*[[@{/supplycontracts/edit(selectedItemId)}]]*/'';

The resulting link was:

http://localhost:8080/supply-app-0.0.1-SNAPSHOT/supplycontracts/edit?selectedItemId

How can I correctly pass the value of selectedItemId to the href in order to generate the desired link?

javascriptthymeleaf

Answer №1

Despite following Nikola Lukic's advice to add the parameter in the same line, it didn't work for me. However, after trying various approaches, I found a solution that worked:

function updateLink() {
    var baseUrl = /*[[@{/supplycontracts/edit}]]*/'';
    window.location.href = baseUrl + "?contractId=" + selectedItemId;
}

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

Guide to altering the color of the row that is clicked in a table using css and jquery

Is there a way to change the text color of a row in a table when it is clicked, similar to an example like this but without changing the background color? The code I have tried is not working for me. Below is a snippet of the code I am using: $("#myTab ...

javascriptjqueryhtmlcsshtml-table

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

javascripttypescriptzod

What is the recommended element for managing data in React?

Let's consider a scenario where we have 2 main components: class App extends React.Component { state = { comments: [1, 2, 3, 4] } render() { return ( <Comments /> ) } } class Comments extends React.Component { rende ...

javascriptreactjs

Changing the dataURL of jqGrid dynamically after loading the Edit Form

Currently, I am working with jqGrid version 4.15.6-pre, which is the free version of jqGrid. Within my edit form, I have two dropdown lists that are being populated from the server using setColProp in the onSelectRow function. My objective is to reload t ...

javascriptjavajqueryfree-jqgrid

Sort through an array using various prefixes and suffixes as filtering conditions

I have come across various questions and answers related to this particular issue, but most of them involve using the includes or indexOf methods. The problem at hand is how to filter an array (names in this scenario) using two different arrays - one with ...

javascript

Employing an angular ng-model expression

Inside a controller: $scope.bar = {'label': 'user_label', 'bindTo': 'user.name'}; Next, in the HTML: <label for="user_label">User Label</label> <input name="{{bar.label}}" type="text" class="form-co ...

javascriptangularjs

Displaying the URL of a link on the screen using jQuery

I am looking for a solution to add a link address after the link itself in a table containing reference links for our staff. I have used CSS to achieve this in the past, but the address was not copyable by users. Instead, I am interested in using jQuery&ap ...

javascriptjqueryhtml

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubles arise when attempting to bind or watch a service variable that is shared between two

I'm really struggling to understand what's happening here. I grasp the basics of Angular's $digest cycle, and according to this Stack Overflow post, I seem to be correctly assigning a scoped variable to a service's property (an array in ...

javascriptangularjsangularjs-scopeangularjs-service

Error in React Native JS: Cannot call the `map` function on variable `l`

Recently diving into the world of Js and React, I am tasked with creating an application for Macronutrients in my second semester project. The challenge I'm facing is incorporating a Pie Chart that displays the values from my state. To implement the ...

javascriptiosreactjsreact-nativepie-chart

Mastering the art of looping and implementing logic in JavaScript using Regular

Unsure if it is possible to achieve this using regex under JavaScript, but I found the concept interesting and decided to give it a try. I wanted to clean up some HTML code by removing most tags completely, simply dropping them like <H1><img>& ...

javascriptregex

What is the process for extracting data from latitude and longitude in order to generate a marker on Google Maps using a script

I have an HTML input text and want to pass coordinates to create a marker on Google maps. Check out the code here: jsfiddle.net/#&togetherjs=r3M9Kp7ff7 What is the best way to transfer this data from HTML to JavaScript? <label for="latitude">L ...

javascripthtml

Puppeteer gathers data on page loading - including a comprehensive list of files loaded and their respective sizes

Is it feasible to compile a complete list of all files loaded on a webpage using Google's Puppeteer? This would include scripts, styles (excluding inline), images, videos, and audio, along with their respective sizes. If Puppeteer cannot provide this ...

javascriptnode.jsnpmpuppeteer

How to toggling array object value in React or Redux state using Javascript/ES2015

If we have a structure like this: export default class Questions extends Component { state = { questions: [ {value: 'value one, required: true}, {value: 'value two, required: true}, {value: 'value two, required: tru ...

javascriptreactjs

issue with integrating promise in angular 4

I'm currently learning about promises and how to implement them in Angular. I have written the following code in StackBlitz. My goal is to display the array whenever it contains a value by using promises in Angular. This is my HTML code: <h2>A ...

javascriptangularecmascript-6promise

Eliminate the excess padding from the Material UI textbox

I've been struggling to eliminate the padding from a textbox, but I'm facing an issue with Material UI. Even after setting padding to 0 for all classes, the padding persists. Could someone provide guidance on how to successfully remove this pad ...

javascripthtmlcssreactjsmaterial-ui

What is the process for exporting data from MongoDB?

Recently, I created a web application for fun using Handlebars, Express, and Mongoose/MongoDB. This app allows users to sign up, post advertisements for others to view and respond to. All the ads are displayed on the index page, making it a shared experie ...

javascriptnode.jsmongodbexpressweb-applications

Troubleshooting TextField malfunctioning after button click within Dialog on Material UI

My main objective is to focus on a Material UI TextField after closing a Dialog by clicking a button inside the Dialog. The code snippet below successfully accomplishes this task when triggered from a button that is not within a dialog component: focusOn ...

javascriptreactjsmaterial-ui

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

After removing the async function, I encountered an error stating that the Promise property finally is missing when changing from an async function to a regular function. Any thoughts on why this would happen? handler.ts export class AccountBalanceHandle ...

javascriptangularreactjstypescriptasync-await

The alignment of the first and second steps in Intro.js and Intro.js-react is off

There seems to be an issue here. Upon reloading, the initial step and pop-up appear in the upper left corner instead of the center, which is not what I anticipated based on the Intro.js official documentation. https://i.stack.imgur.com/ICiGt.png Further ...

javascriptreactjstypescriptnext.jsintro.js