disabling hyperlink in displayTag

Question

I am using displayTag table decorator to display my JSP page.

The page has a table with columns. One of the columns is Action which has 2 hyperlinks displayed. One is pay and the other is close. Each row will have 5 columns action being the last columns with hyperlinks.

This is the action display code in JSP

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

Below is my decorator code

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;");        
}

So the link when clicked will open a popup window and have the user enter couple of details and submit. While this popup is open I can still go to the main browser and click the pay again which refreshes the popup and make me resubmit the info again. I have to stop this happening by disabling the pay button once I click in the browser and then open the popup. How can I achieve this?

Replaced pay 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;");

Getting "Unable to get property 'setAttribute' of undefined or null reference" error from f12 debug.

   <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

One way is to disable the <a> tag when you click on it.

Simple solution:

You could replace this line:

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

with those:

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>");

Please note that the link will be available again on page refresh. If you need another way to activate it, you would need to do it manually.

More elegant solution:

If you have a stylesheet, like a CSS file, you could create this class there:

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

And in the onclick event of your link tag, replace the setAttribute with addClass('disabledLink'). That also makes it easier to remove, with a removeClass('disabledLink')

Answer 2

try autolink <display:column autolink="false">