turning off the link in displayTag

I am utilizing the displayTag table decorator in order to showcase my JSP page.

The page features a table with various columns. One of these columns is labeled Action and contains 2 hyperlinks - pay and close. Every row will consist of 5 columns, with action being the last column that includes hyperlinks.

Here is the code snippet for displaying the action in JSP

<display-el:column property="action" sortable="false" title=" "
                            class="defaultTextCentered" style="width:6%" sortName="action" />

Below is the decorator code I am using

public String getAction() {
  renderPayLink();
}

private void renderPayLink() {
  decoratedVal.append("<a href=\"javascript:newPopup('");
  decoratedVal.append(getContextPath());
  decoratedVal.append("/abc/taxPaymentInternal.html?iSeqNo=");
  decoratedVal.append(abc.getISeqNumber());
  decoratedVal.append("&iPeriod=");
  decoratedVal.append(abc.getIDate());
  decoratedVal.append("', 800, 700)\" title=\"Pay\">Pay</a>");
  decoratedVal.append("&nbsp;&nbsp;");        
}

When clicking on the link, a popup window opens where the user enters information and submits it. However, if the pay button is clicked again before submitting the info, the popup refreshes, requiring the user to re-enter the details. To prevent this, I need to disable the pay button after clicking it and opening the popup. How can I achieve this?

Instead of pay, replacing it with

  decoratedVal.append("', 800, 700)\" title=\"Pay\" ");
  decoratedVal.append("onclick=\"this.setAttribute(");
  decoratedVal.append("\'style\', \'pointer-events:none; cursor:default;\'); this.setAttribute("); 
  decoratedVal.append("\'href\', \'\')\">Pay</a>");
  decoratedVal.append("&nbsp;&nbsp;");

An error stating "Unable to get property 'setAttribute' of undefined or null reference" appears when debugging using F12.

   <a title="Pay" onclick="this.setAttribute('style', 'pointer-events:none; cursor:default;'); this.setAttribute('href', '')" href="javascript:newPopup('/mei/invoicing/launchConfirmPaymentInternal.html?invoiceSeqNo=131946&amp;invoicePeriod=02-11-2017', 800, 700)">Pay</a>

Answer №1

To prevent the <a> tag from being clickable after clicking on it, you can disable it.

A straightforward approach:

Simply replace this line:

decoratedVal.append("', 800, 700)\" title=\"Pay\">Pay</a>");

with these lines:

decoratedVal.append("', 800, 700)\" title=\"Pay\");
decoratedVal.append("onclick=\"this.setAttribute(\');
decoratedVal.append('style\', \'pointer-events:none; cursor:default;\'); this.setAttribute(\');
decoratedVal.append('href\', \'\')\">Pay</a>");

Keep in mind that refreshing the page will make the link active again. If you prefer a different method to re-enable it, manual intervention will be necessary.

An improved solution:

If you have a CSS stylesheet, you could define this class there:

.disabledLink{
    pointer-events: none;
    cursor: default;
}

Then, in the onclick event of your link tag, use addClass('disabledLink') instead of setAttribute. This also simplifies removal by using removeClass('disabledLink').

Answer №2

autolink feature test <display:column autolink="false">

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

Create a separate server session specifically for handling an ajax request?

Currently, I am working with a collection of PHP server-side scripts that manage user session state by utilizing PHP sessions extensively for authenticated users. For the client side within a mobile application and using Jquery ajax, I am striving to esta ...

IE is experiencing performance issues with Jquery's for loop

I have a situation where my Jquery foreach loop is taking significantly longer to execute in IE compared to Chrome. In IE it takes 15.8ms while in Chrome it only takes 1.164ms. I'm looking for suggestions on what changes I can make to improve the perf ...

Struggling to fix the npm install pre-gyp error

I'm currently in the process of setting up this application on my m1 MacBook Air > Github - Todoist Clone When I run npm install in the terminal, I encounter the following error. Please refer to the log below: 10630 verbose node v16.13.2 10631 ver ...

Is it advantageous to combine socket.io with express for seamless communication in web applications? If the answer is yes, what is the best approach to integrating

Embarking on my journey into back-end development, I am currently delving into the task of creating a simulated money poker website. Leveraging Node.js along with socket.io, express-session, and passport, I initially relied heavily on express with an HTTP ...

How can PHP be used to access every element within an array that has been passed through an AJAX call?

I am having trouble accessing elements within an array from my PHP file after passing the array through an ajax call. Here is the code for the ajax call: var data = ['test1', 'test2', 'test3']; $(document).ready(function () { ...

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

I have a webpage that automatically updates a section using jQuery AJAX every 10 seconds. Whenever I modify the CSS or JavaScript of that page, I would like to include a script in the content fetched via AJAX to trigger a full page reload. The page is ac ...

JavaScript - AngularJS HTML parser

I am working with an array that contains content along with HTML tags, and here is the code snippet: for (car in cars.parking[0]){ content.push('<br />'); for (token in cars.parking[0].now) { content.pus ...

Utilizing Java to extract JSON path values and assign them to variables

I'm facing an issue with my code for parsing a JSON string into an object. Previously, I had the following code: public AgentStrategy parseJsonToObject(String jsonString) { Gson gson = new Gson(); AgentStrategy agent = gson.fromJson(jsonString ...

Sharing JavaScript code between Maven modules can be achieved by following these steps

My Maven project has a unique structure that includes: "Base" module -- containing shared Java files -- should also include shared JavaScript files Module 1 -- using shared Java files as a Maven dependency -- should utilize shared JavaScript files throug ...

Encountered an issue while attempting to set up the grunt

After successfully installing Grunt with the code below: npm install -g grunt-cli I tried to check the version by running grunt --version, which returned: grunt-cli v0.1.13 However, when I navigated to my project directory and ran npm install, a series ...

The function jasmine.addMatchers is not defined and is throwing a TypeError

I am encountering an error in my Node application when using "jasmine":"^2.5.2". The error message states: TypeError: jasmine.addMatchers is not a function This error occurs when running jasmine-node spec from the terminal, even with a simple example li ...

Condition-triggered Jquery Sticky navigation dynamically enables scrolling functionality

After successfully implementing a sticky navigation that works flawlessly, I am now looking to make it activate only when the browser width is less than or equal to 770px. This is my current code: $j = jQuery.noConflict(); $j(document).ready(function() ...

Conceal table cells using jquery depending on the input value

Is there a way to hide the td elements when the input value is set to 0? I've been struggling to make it work. http://jsfiddle.net/zxpsd8x6/1/ <td><input type="radio" name="hideifvalue0" value"0"></td> <td><input type="rad ...

Arrange objects within nested arrays by their specific properties and then add a particular object to the end of the outer array within an object containing

I have an Object containing nested Arrays of Objects that I need to sort alphabetically by the "label" property and move the object with the label "other" to the end of each Array. I have a working solution, but I'm looking for a more streamlined appr ...

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

Is a fresh connection established by the MongoDB Node driver for each query?

Review the following code: const mongodb = require('mongodb'); const express = require('express'); const app = express(); let db; const options = {}; mongodb.MongoClient.connect('mongodb://localhost:27017/test', options, fu ...

What is the purpose of having a boolean value if it is not going to be

I've noticed a pattern in several functions where the developer is returning a boolean value, despite it not being utilized: function getUserLoggedIn() { return true; } <a onclick="getUserLoggedIn();"><img src="/profile-image. ...

Does calling XmlSuite.SetFileName(XXX) result in the creation of a real file?

Is it possible to convert a virtually created XML file into a physically one? For example, let's say I am generating the testng.xml file programmatically and then running my test scripts accordingly. I have attempted the following code but it seems t ...

What types of applications are compatible with Java Web Start?

I'm curious about the UI framework used by Java Web Start and how I can start developing with it. I use Netbeans but I find Java Web Start quite confusing. Can anyone explain it to me? ...

Issue with Selenium WebDriver: Loop continues even when two matching values on the same row are detected

I wrote a function that loops through a table twice to find two input values on the same row. However, it's not exiting the loop when rowNo2 and rowNo are equal. What am I missing here? Thanks for your help! WebElement table = oWebDriver. ...