clicking on a link with the symbol "#" in the href attribute in Firefox prevents the setter

Question

clicking on a link with the symbol "#" in the href attribute in Firefox prevents the setter

Good morning everyone,

It's early Monday morning and I'm having trouble understanding why this particular line works in Internet Explorer but not in Firefox.

<a class="button" href="#" onclick="setMaintenanceMode(false);">disable</a>

When you hover over the button in both IE and FF, the URL displayed is...

http://localhost:8080/mainapp/secure/gotoDevice.action?hardwareId=1&storeCode=2571#

Upon clicking the button, the following method is invoked...

function setMaintenanceMode(enabled) {
    var url = '<s:url action="secure/setMaintenanceMode"/>' + '&ModeEnabled=' + enabled;
    document.location.href = url;
}

The URL that the document is directed to is the same in both browsers...

/mainapp/secure/gotoDevice.action?hardwareId=1&amp;storeCode=2571&ModeEnabled=false

The issue here is that in IE, the 'setSetCode()' method in the struts action is executed, but not in FF! Removing the hash mark in the 'ahref' tag makes FF work, but it breaks IE (href="#").

I've attempted to change '&ModeEnabled=' to '&ModeEnabled=', but to no avail. I've searched on Google and the struts forum, but haven't found a solution.

I'm considering replacing all 'ahref' with Dojo buttons to see if that resolves the issue, but before I do, I'd like to understand why.

My suspicion is that 'ahref' might not be the correct element to use, but I'm unsure why.

If anyone can shed some light on this issue, I would greatly appreciate it.

Thank you, Jeff Porter

EDIT: Adding 'return false' seems to be part of the solution. The problem appears to be the URL...

/mainApp/secure/setMaintenanceMode.action?hardwareId=5&amp;storeCode=2571&ModeEnabled=true

contains '&' internally. If I visit this URL as is, it works in IE but not in FF.

If I change both instances to '&', it works in both IE and FF.

If I change both instances to '&', it still works in IE but not in FF.

Any thoughts?

Note:

It seems that struts 2.0.9 does not support the 'escapeAmp' property on the '<s:url' tag:

By default, request parameters are separated using escaped ampersands (i.e., '&'). This is necessary for XHTML compliance. However, when using the URL generated by this tag with the '<s:property>' tag, the 'escapeAmp' attribute should be used to disable ampersand escaping.

Solution: Add 'return false' to the 'onclick' and upgrade to a newer version of struts + set the 'escapeAmp' parameter. Alternatively, use 'url = url.replace("&", "&");'.

java javascript internet-explorer firefox struts2

Answer 1

Answer №1

One way to prevent the javascript onclick event from reaching the browser is to simply return false from the javascript method.

function setMaintenanceMode(enabled) {
    var url = '<s:url action="secure/setMaintenanceMode"/>' + '&ModeEnabled=' + enabled;
    document.location.href = url;
    return false;
}

<a class="button" href="#" onclick="return setMaintenanceMode(false);">disable</a>

By using this approach, the javascript onclick event will be stopped before it can affect the browser.

Answer 2

One way to prevent the javascript onclick event from reaching the browser is to simply return false from the javascript method.

function setMaintenanceMode(enabled) {
    var url = '<s:url action="secure/setMaintenanceMode"/>' + '&ModeEnabled=' + enabled;
    document.location.href = url;
    return false;
}

<a class="button" href="#" onclick="return setMaintenanceMode(false);">disable</a>

By using this approach, the javascript onclick event will be stopped before it can affect the browser.

Answer 3

Answer №2

setAttribute("onmousedown", "enableUpdate(); return false;")

While the onmousedown event is being triggered successfully, the default action is still carried out immediately. To prevent this, ensure that the event handler includes a return false statement to indicate that the default action should not be executed.

Internet Explorer may misinterpret the intended behavior and perform the incorrect action.

Answer 4

setAttribute("onmousedown", "enableUpdate(); return false;")

While the onmousedown event is being triggered successfully, the default action is still carried out immediately. To prevent this, ensure that the event handler includes a return false statement to indicate that the default action should not be executed.

Internet Explorer may misinterpret the intended behavior and perform the incorrect action.

Answer 5

Answer №3

There is a peculiar issue with the URL containing the & character. It seems to function correctly in Internet Explorer but fails in Firefox.

This issue is not browser-specific but rather server-dependent. The problem arises from the way the server framework parses parameters. The use of & as a parameter separator is required by Servlet. Therefore, a string like a=b&c=d will result in a=b and amp;c=d. The application, expecting c, will not recognize the latter parameter.

The HTML specification suggests allowing the use of ; as a separator. In that case, the server would interpret the string as a=b, a meaningless amp, and c=d, allowing the URL to still function despite the mis-encoding of the ampersand. Unfortunately, Servlet does not follow this recommendation.

Request parameters are typically separated using escaped ampersands (&).

It is advised not to escape ampersands when joining parameters into a URL. Instead, parameters should be joined with a single ampersand, and the entire URL should be HTML-encoded if necessary. Struts's default behavior in this regard is incorrect.

In your scenario, the URL is being written into a string literal within a script block. HTML-escaping is not required in a script block in traditional HTML, but JavaScript escapes should be considered to prevent syntax errors.

To ensure the URL is properly formatted for JavaScript and does not contain any breaking characters, consider using a JSON encoder. This will handle Java values and escape characters like < and & for JavaScript, avoiding parsing issues in XHTML.

Consider replacing the <a> tags with buttons.

If the element is not a hyperlink but rather triggers a script action, using a <button> or <input type="button"> is more semantically correct. CSS can be used to style the button as needed.

However, replacing links with buttons may not be necessary. Simply adjusting the link's structure could suffice:

<a href="/mainApp/secure/setMaintenanceMode.action?hardwareId=5&amp;storeCode=2571&amp;ModeEnabled=false">disable</a>

Answer 6

There is a peculiar issue with the URL containing the & character. It seems to function correctly in Internet Explorer but fails in Firefox.

This issue is not browser-specific but rather server-dependent. The problem arises from the way the server framework parses parameters. The use of & as a parameter separator is required by Servlet. Therefore, a string like a=b&c=d will result in a=b and amp;c=d. The application, expecting c, will not recognize the latter parameter.

The HTML specification suggests allowing the use of ; as a separator. In that case, the server would interpret the string as a=b, a meaningless amp, and c=d, allowing the URL to still function despite the mis-encoding of the ampersand. Unfortunately, Servlet does not follow this recommendation.

Request parameters are typically separated using escaped ampersands (&).

It is advised not to escape ampersands when joining parameters into a URL. Instead, parameters should be joined with a single ampersand, and the entire URL should be HTML-encoded if necessary. Struts's default behavior in this regard is incorrect.

In your scenario, the URL is being written into a string literal within a script block. HTML-escaping is not required in a script block in traditional HTML, but JavaScript escapes should be considered to prevent syntax errors.

To ensure the URL is properly formatted for JavaScript and does not contain any breaking characters, consider using a JSON encoder. This will handle Java values and escape characters like < and & for JavaScript, avoiding parsing issues in XHTML.

Consider replacing the <a> tags with buttons.

If the element is not a hyperlink but rather triggers a script action, using a <button> or <input type="button"> is more semantically correct. CSS can be used to style the button as needed.

However, replacing links with buttons may not be necessary. Simply adjusting the link's structure could suffice:

<a href="/mainApp/secure/setMaintenanceMode.action?hardwareId=5&amp;storeCode=2571&amp;ModeEnabled=false">disable</a>

clicking on a link with the symbol "#" in the href attribute in Firefox prevents the setter

Answer №1

Answer №2

Answer №3

Similar questions

Looking for advice on successfully implementing createMultiMaterialObject in THREE.js version r62?

Acquiring POST parameters within Laravel's Controller from JavaScript or Vue transmission

having trouble retrieving 200 status code from Angular server response

Ways to troubleshoot and fix issues with executable paths

Problems with Key Presses in Form Verification

How can I extract an array of objects from a response in Angular?

Tips for increasing the size of Material-ui Rating icons

What is the most efficient way to retrieve a document from pouchdb that includes the revision attribute?

Navigate through JSON data to uncover the tree structure path

What steps should be followed to effectively utilize the "showPreview" feature of NetExport in an automated script with Webdriver, Firebug, and NetExport?

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

Contrasting images showcasing Headless vs Non Headless settings in Puppeteer

Enhance your HTML audio player with added timeline functionality

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

What is the best way to navigate a LinkedList in Java and append elements to it?

execute a function upon selecting a radio button

Manipulating specific elements within a MongoDB document's array using index values in a Node.js environment

Font destruction in IE occurs when content is loaded via AJAX

Tips on pairing elements from a ngFor processed list with another list using ngIf

Remove redundant records from Hibernate tables involving one-to-many relationship references