.js file paths in nested web pages using .net MVC4

I'm facing an issue with my MVC4 application. I have set up a masterpage with "bundleconfig" to manage CSS and JS files. Everything seems to be working fine, for example when I access "localhost1234:/Admin/Index" everything displays correctly. However, the problem arises when I visit the page "localhost1234:/Admin/Edit/2" (where 2 is the user id for updating) as it fails to find references in the main.js file.

The content of main.js is as follows:

head.js("../assets/js/skin-select/jquery.cookie.js");
head.js("../assets/js/skin-select/skin-select.js");
head.js("../assets/js/clock/date.js");

The browser's error console reports that the references are not found: 

404 Not Found - localhost:1234/Admin/assets/js/jquery.cookie.js"
jquery.cookie.js
404 Not Found - localhost:1234/Admin/assets/js/bootstrap.js"

Why is the view name (Admin) being added in front of the path in the main.js file??? Any assistance would be greatly appreciated.

javascriptasp.netasp.net-mvcasp.net-mvc-4

Answer №1

To ensure the correct path is generated from a relative path, utilize the Url.Content helper in this manner:

head.js('@Url.Content("~/assets/js/skin-select/jquery.cookie.js")');

At the moment, the script is attempting to locate jquery.cookie.js within the Admin folder under assets--> js.

Once Url.Content() is implemented, it will reference the RootDirectory, resulting in an address like: 

http://localhost/assets/js/skin-select/jquery.cookie.js

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

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

javascriptphphtmlcss.htaccess

Inserting a string containing & into the database via asp.net code is not allowed

Review the following portion of my code: cmd.CommandText = "INSERT_ACS_STUDIES_DATA"; cmd.Parameters.AddWithValue("@mrn", mrn); cmd.Parameters.AddWithValue("@log_id", crid); cmd.Parameters.AddWithValue("@panel_id", panel_id); cmd.Parameters.AddWithValue( ...

asp.netdatabasestringc#-4.0

WebVR - lack of orientation and position data from PositionSensorVRDevice

I'm attempting to enable Oculus Rift DK2 orientation input for WebVR, using either Three.js' VRControls (examples/js/controls/VRControls.js) or directly from the PositionSensorVRDevice. However, the values of orientation and position in the Posi ...

javascriptthree.jsoculusvirtual-realitywebvr

The steps to dynamically change the mute setting of an Audio element in the DOM

I'm looking for assistance with updating the DOM audio in real time. My goal is to allow users to mute and unmute the audio based on their preferences. The recorded audio file is stored in the public folder. Initially, the audio works fine when loa ...

javascriptreactjsdomnext.js

Solving Problems with Inline Tables using Angular, Express, and Mongoose's PUT Method

For the past few days, I've been struggling to figure out why my PUT request in my angular/node train schedule application isn't functioning properly. Everything else - GET, POST, DELETE - is working fine, and I can successfully update using Post ...

javascriptangularjsnode.jsmongodbexpress

Ensuring that the image perfectly fills the entire screen on an iPhone X using React Native

Looking for a solution to make my image fit the entire screen on the iPhone X simulator. I've tried adjusting the imageContainer width to "100%" and the container that encompasses everything, but haven't had any luck. Would appreciate any suggest ...

javascriptcssreactjsreact-native

Preserve Text Selection While Utilizing DIV as a Button

I wonder if this issue is specific to the browser I'm using? Currently, I'm using Chrome... My goal is to enable users to save any text they've highlighted on the page with their cursor. I've set up the javascript/jQuery/ajax and it w ...

javascriptjqueryselectiontextselection

Steps for creating an npm package from the /build folder of Create React App

Hello! I am currently working on an app developed using the create-react-app boilerplate. After compiling and building it with npm run build, I now want to transform the /build folder into an npm package for easy use in other projects as a micro app. Can ...

javascriptreactjsnpmdeploymentcreate-react-app

In the React application, there seems to be a discrepancy between the date and date format displayed in the API preview and the console

In my React-Node application, there is a discrepancy in the date-time format when I call a node API. The Developer's Network tab shows the correct datetime format in the preview, but when I console log the API response, it displays the datetime in a l ...

javascriptreactjsnode.jsdatetimezone

Ways to invoke a class method by clicking on it

My initialization function is defined as follows: init: function() { $("#editRow").click(function() { <code> } $(".removeRow").click(function() { <code> } } I am trying to find a way to call the class method removeRow directly in the onc ...

javascriptjquerytreegrid

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...

javascripthtmlcsssvgsmil

A guide to implementing infinite scrolling with vue-infinite-loading in Nuxt.js (Vue.js)

Currently, I am working on developing a web application using Nuxt.js (Vue.js). Initially, to set up the project, I used the command: vue init nuxt/express MyProject ~page/help.vue <template> <div> <p v-for="item in list"> ...

javascriptnode.jsvue.jsnuxt.jsserver-side-rendering

Having trouble grasping the problem with the connection

While I have worked with this type of binding (using knockout.js) in the past without any issues, a new problem has come up today. Specifically: I have a complex view model that consists of "parts" based on a certain process parameter. Although the entire ...

javascriptmvvmknockout.js

How can I ensure that a nested v-for loop in vuejs operates effectively?

I am dealing with a types variable that holds an array of objects, each containing two properties: name and content. In the content property, there is another array of objects with only one property: name. Upon template display using {{types}}, I am seein ...

javascriptvue.js

Activating the click event on the Bootstrap-select plugin through coding

Is there a way to programmatically trigger the on-click event for the second option (select TV) in bootstrap-select plugin? I want to replicate the behavior as if the user clicked on the "TV" option themselves. You can view my code here: https://jsfiddle. ...

javascriptjquerybootstrap-select

Utilizing Boolean Operators in JavaScript with Thymeleaf: A Guide

When incorporating Boolean conditions in JavaScript with Thymeleaf using th:inline="javascript", an exception is thrown which appears as follows: org.xml.sax.SAXParseException; lineNumber: 14; columnNumber: 22; The entity name must immediately follow the ...

javajavascriptexceptionthymeleaf

Hide one dropdown when another dropdown is expanded in React

I am struggling to implement multiple dropdown menus in React. Do I need to create a separate function for each dropdown? I feel like there should be a more concise way to handle this. My main goal is to have other open dropdowns close automatically when ...

javascriptreactjs

Angular 2 component stays static despite changes in route parameters

So, I am in need of a way to refresh my component after the URL parameter's id has been altered. The following code is from my player.component.ts: import {Component, OnInit, AfterViewInit} from '@angular/core'; import {ActivatedRoute, Rout ...

javascriptjqueryangularangular2-routing

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

javascripthtmlcssfirefox-addonfirebug

Element in array not being deleted in the Mongoose validation system

Currently, I am in the process of developing a validation system using Node, Express, and Mongoose. I have encountered an issue where I am unable to delete the verificationId once it is no longer needed. In my Schema, I have a verificationId linked to each ...

javascriptnode.jsmongodbvalidationmongoose