href link with HTML id does not link to the expected URL

Question

I am working on a plugin to modify a URL and update a page. The goal is to get the parent URL, modify it and then offer up a link that the user can click to go to the new URL. I am able to get the URL and display it, then modify the URL and display it. However, when I try to create a link using the ID, the link URL is to the index.html for the iframe, not the newURL id that I am referencing. I know I am overlooking something but I have been through a ton of HTML documentation and can't solve it. Any help would be greatly appreciated. Image of bad URL Thanks, Scott

<!DOCTYPE html>
<html>
<body>

<p id="currentURL"></p>
<p id="newURL"></p>
<a href="newURL">Click this link to update sort</a>

<script>
var myAssetsServer = "http://localhost:8080"
var startingURL = parent.document.location.href;
var myCustomSort = "imageSupplierImageID,assetType,filename";
var endingURL = myAssetsServer + "/app/#/search//" + myCustomSort + "/?" + startingURL.split("?")[1];

document.getElementById("currentURL").innerHTML = 
"The original URL of this page is:<br>" + startingURL;

document.getElementById("newURL").innerHTML = endingURL;

</script>


</body>
</html>

I tried that. I just get this instead... http://localhost:8080/plugins/elvis_MultiField_Sort/#newURL — Scott Griswold, Apr 24 '21 at 03:42
It's a modification of the existing URL with multiple sort options added. I am able to do that and copy and paste it in and it works. I just can't get it to be a link. This is what I want as the correct link... http://localhost:8080/app/#/search//imageSupplierImageID,assetType,filename/?path=%22%5CWork%20Zone%5CArtStore%5CWorking%22&enableAssetsOfCollections=false&showAssetsOfSubfolders=true — Scott Griswold, Apr 24 '21 at 04:15
Can you share code details of what "modify a URL " requires in the document, and could you explain what ithe purpose of the '#' mark in ` myAssetsServer + "/app/#/search//"...` is? (Hash marks usually introduce a fragment component of the URL which won't be sent to the server as part of an HTTP request.) — traktor, Apr 24 '21 at 04:23
All the code is above. It's just a starting proof of concept. Where you see the var myCustomSort inserted is the extent of the change that needs to happen. The insertion of those fields causes the server to return the results in that order. The existing interface only offers single field sorting options. It was suggested by the developer to write a plugin to modify the URL and call the page with the new sort fields. It works if I copy and paste the newly created URL into the address bar. I just cant get it to be a link. I do not know the purpose of the # portion of the URL. — Scott Griswold, Apr 24 '21 at 04:55

score 0 · Answer 1 · edited Oct 07 '21 at 13:39

The two main issues to address were

Update the href value of the link element (from comment not an issue in actual code), and
Percent encode the # character as %23 in the URL to send it and what follows to the server:
- Hash marks in a URL that are part of identifying a a resource on the server must be percent encoded.
- By contrast, fragment identifiers at the end of an URL, e.g.
```
  htpp://www.example.com/page.html#element-id
```
  are used by browsers to request a page from the server and, after rendering the response, scroll down the page to the element with the same id as the fragment identifier.
- The first raw hash mark (not the last occurrence) in a link's 'href` string introduces a fragment identifier.
- Neither the fragment identifier nor its preceding '#' character are sent to the server as part of a request: they terminate a URL without forming part of it.
- See also
  - Related What are fragment URLs and why to use them?
  - The description of unsafe characters in section 2.2 of RFC1738
  The character "#" is unsafe and should always be encoded because it is used in World Wide Web and in other systems to delimit a URL from a fragment/anchor identifier that might follow it.

Additional issues may need addressing, depending on how the server application is written - or whether the posted code is final:

the double slash // in the URL looks strange but could be by design.
Comma characters in a URL are meant to be encoded as %2C unless being used as separators in the query component. They may work anyway, due to there being no assigned meaning of commas placed before the beginning of the query component, and server code may or may not impose a requirement for their usage (check with the developer).

When running the snippet on Stack Overflow, a dummy page location had to be set (example.com), which then generated undefined in the query component of the generated href value.

Example code snippet with fixes for 1 and 2:

"use strict";
var myAssetsServer = "http://localhost:8080"
var startingURL = "http://www.example.com"; //parent.document.location.href;
var myCustomSort = "imageSupplierImageID,assetType,filename";
var endingURL = myAssetsServer + "/app/#/search//" + myCustomSort + "/?" + startingURL.split("?")[1];

//Fix 1: escape the '#' in the URL 
endingURL = endingURL.replace('#', "%23");

document.getElementById("currentURL").innerHTML = 
"The original URL of this page is:<br>" + startingURL;
document.getElementById("newURL").innerHTML = endingURL;

//Fix 2: change the URL in the link
var anchorElement = document.querySelector("a[href=newURL]");
anchorElement.href = endingURL;

//Prevent link action on Stack Overflow:
anchorElement.addEventListener("click", function (event) {
    console.log("href= %s", this.href)
    event.preventDefault();
});

<p id="currentURL"></p>
<p id="newURL"></p>
<a href="newURL">Click this link to update sort</a>
<p style="border-left: medium solid #DDD; padding-left: 2rem;">
Link deactivated in code snippet - hover over or click to see href value.

Thanks for your post. Fix 2 definitely made a difference. But with Fix 1 in place the URL is invalid. I get a "The requested resource does not exist or is not available." error. If I edit the URL in that new window to have the "#" then it works. BUT, if I remove Fix 1 then when I click the link, nothing happens. The full URL looks correct in the bar at the bottom of the window but clicking it does nothing. — Scott Griswold, Apr 25 '21 at 19:39
Please ignore my last comment. It is working. I was overlooking which URL I was starting with when I loaded the page. So Fix 1 is not needed but Fix 2 is. Thank you for the help. Would you please elaborate on what exactly Fix 2 is doing? I have some idea but clarification would be really helpful. — Scott Griswold, Apr 25 '21 at 20:38
@ScottGriswold I've updated the post - feel free to delete any comments that no longer apply. — traktor, Apr 26 '21 at 00:13

href link with HTML id does not link to the expected URL

1 Answers1