Using JavaScript to determine the relative path

Initially, in the first html file, I utilized a variable called categoryLinks:

var categoryLinks = {
    'Career prospects':'http://localhost/Landa/DirectManagers/511-HelenaChechik/Dim01.html',
    'Compensation':'http://localhost/Landa/DirectManagers/511-HelenaChechik/Dim02.html',....

In another html file, I am generating a chart by fetching some Json data:

$(function () {
    var chart1;
    $.get('graphdata/Dim1.txt?x='+microtime(), function(json){
    obj = eval('({'+json+'})');

Within this Json data, there is a reference to the categoryLinks variable to link it with the corresponding hyperlink:

labels: {
formatter: function () {
return '<a href="' + categoryLinks[this.value] + '">' +
this.value + '</a>';
},
style: {color: 'blue',textDecoration: 'underline',fontSize:'13px'} 
}

},

Everything is functioning correctly.

I have been attempting to define the links within categoryLinks as relative paths instead of absolute ones, but so far, my attempts have been unsuccessful.

var categoryLinks = {
    'Career prospects':'Landa/DirectManagers/511-HelenaChechik/Dim01.html',
javascriptjsonrelative-path

Answer №1

The placement of the URL within the page you're loading is crucial, as you haven't indicated it yet. It might require a leading / like this:

var categoryLinks = {
    'Career prospects':'/Landa/DirectManagers/511-HelenaChechik/Dim01.html'
// Here ----------------^

...or maybe a leading ../:

var categoryLinks = {
    'Career prospects':'../Landa/DirectManagers/511-HelenaChechik/Dim01.html'
// Here ----------------^^^

..or something similar.

In essence:

Consider having

page.html, resulting in:



foo, you could use a leading / which signifies "Start at the root of the domain":



.. indicating "go up a level":



.. multiple times. For instance, if you have the page:



http://example.com/this/is/deeply/nested.html




the relative link



../../test.html




would lead to



http://example.com/this/test.html







Remember, these links are relative to the HTML page they reside in and not the JavaScript file they're contained in.

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

What is the best way to create vertical spacing between Material UI Grid Paper components?

The spacing of the goal components is not as I would like it to be. This is how they currently appear. https://i.stack.imgur.com/jApzK.png So far, I have attempted setting the display of the Paper selector to flex. Additionally, I experimented with adjus ...

javascriptreactjsmaterial-uijss

Restangular: Avoiding empty parameter being passed

In my AngularJS application using RestAngular, I have the following controller method: $scope.findFriend = function (name, type, limit) { return FriendSearch.getList({ name: name, type: type, limit: limit ...

javascriptangularjsparametersrestangular

Leveraging the power of Jackson in Spring MVC 2.5

Apologies for the vague question, but my searches have been unfruitful. Our project uses Spring MVC 2.5, which lacks the @ResponseBody annotation. Is there a way to achieve something similar to this without it? ...

ajaxjsonspring-mvcjackson

utilizing BrowserRouter for dynamic routing in react-router-dom

I'm currently facing a challenge with creating a multi-tenant SaaS solution. Each tenant needs to be able to use a subdomain, so that I can extract the subdomain from the URL and make a call to a REST API to retrieve data specific to that tenant. For ...

javascriptreactjsfrontendreact-router-v4react-router-dom

Implementing Entity addition to a Data Source post initialization in TypeORM

The original entity is defined as shown below: import { Entity, PrimaryGeneratedColumn} from "typeorm" @Entity() export class Product { @PrimaryGeneratedColumn() id: number The DataSource is initialized with the following code: import ...

javascripttypescripttypeorm

Tips for formatting image paths

SITUATION: I have inherited a messy website from a previous web developer. The website contains thousands of images, each wrapped in an anchor tag that links to the image's own path: <a href="http://www.websitename.com/image_path.jpg"> <im ...

javascriptjqueryhtmlcss

What is the process for constructing an object to resemble another object?

After collecting input data, I have created an object based on those values. Here is an example of the generated object: var generate_fields = { name: "Mike", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d9dddf ...

javascriptjquery

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

In version 7.x of Elasticsearch.NET (NEST), I am encountering issues with deserializing my POCO JSON data

There is a noted breaking change in the internal Utf8 JSON serializer for Elasticsearch 7.x for .NET, as detailed here. Instead of resorting to Newtonsoft's Json.NET serializer, I am currently working on identifying the specific part of my JSON that ...

jsonelasticsearchserialization

Angular throws a 404 error when making a JSONP http request

I've been incorporating Mailchimp integration into an Angular application. For using it in pure JS, I retrieved the code from the embedded form on the Mailchimp site: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js ...

javascriptangulartypescriptjsonpmailchimp

Activate child component function using react-navigation before removal

Currently, I am utilizing React Navigation for a react native application in conjunction with Expo-Video-Player. My goal is to monitor the duration for which a video has been played once the screen is dismissed and then log this information in the console. ...

javascriptreactjsreact-nativeexpoparent-child

Error in the delete function on a JSF webpage

I am currently working on implementing a JSF table with a delete button. Below is the JavaScript code that triggers the dialog box: function showDialog(a){ $("<div />", { text: a }).dialog({ width: 600, ...

javajavascriptjsfjsf-2jquery-dialog

Using Socket.io in conjunction with the MEAN stack: A beginner's guide

I'm struggling to figure out how to integrate Socket.io with MEAN stack. Although I am able to run it in the latest version without any errors using the following code: var server = app.listen(config.port, config.hostname); io = io.listen(server); H ...

javascriptangularjssocketssocket.iomean-stack

Angular 2 module transpilation services

In my angular 2 application, there is a module called common. Here is how the project structure looks like: main --app /common --config //.ts configs for modules --services //angular services --models --store //ngrx store /co ...

javascriptangulartypescriptgruntjs

The jQuery method .index() can be quite perplexing when it comes to

http://learn.jquery.com/using-jquery-core/understanding-index/ After reading the article linked above, I found myself struggling to grasp the reasoning behind why the index number changes in a peculiar manner when an argument is used with .index(). Consi ...

javascriptjqueryhtmlindexing

Generate a dynamic form in Flutter for submitting new data in JSON format

One of my current tasks involves building a class to handle the consumption of REST data from a web service in JSON format. The class structure is as follows: class BuildingSiteVisits { int? id; String? name; Float? lat; Float? long; BuildingSiteV ...

jsonflutterpost

Illustrate a sphere within the canvas

I successfully declared the next square, however now I am eager to accomplish the same for a circle... Could you please provide guidance on how to achieve this? Thank you. //Create Variable var circ = new Circle(320, 380, 50); //Define the circle functi ...

javascriptfunctionoopobjectcanvas

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

javascriptjqueryqunit

Prompt Angular to deliberately reevaluate the DOM

Is there a method to prompt Angular to reassess the DOM? I am searching for a way to manually trigger Angular to reassess the entire DOM, or even more specifically, a certain ng-controller DOM element. Is it possible to achieve this? ...

javascriptangularjs

Discovered two instances of duplicate IDs within the elements

When using the same id names in two different form tags, I am encountering the following warnings: [DOM] Found 2 elements with non-unique id Below is a portion of my HTML code: <div class="modal-dialog"> <form action="" ...

javascripthtmljquerybootstrap-4html5-video