Question posted in 
Issue detected:
The Request URL for in the network tab is adding an additional directory to the path in the page that is not working properly because the webform is nested inside an additional directory in the solution structure.
The home page does not add this additional directory to the Request URL because the webform is not nested inside an additional directory in the solution structure.
How do I make this an absolute path for the script in the masterpage?
Origninal question:
I am having issues with certain pages not recognizing jQuery. I am trying to figure out why the error “ReferenceError: $ is not defined” is showing up in my console, referring to the pages js file reference, in some pages and not others.
My master page is as follows:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="UseSage.SiteMaster" %>
<!DOCTYPE html>
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %></title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/wp-content/themes/sage/favicon.png" rel="shortcut icon" type="image/png" />
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery-ui-1.8.24.js"></script>
<script src="Scripts/modernizr-2.6.2.js"></script>
<link href="SageWP/Scripts/wp-content/plugins/styles-with-shortcodes/css/style.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-content/plugins/styles-with-shortcodes/editorplugin/rh_columns.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-content/plugins/styles-with-shortcodes/editorplugin/rh_columns_ver=1.0.2.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-content/plugins/styles-with-shortcodes/js/lightbox_themes_default/jquery.lightbox.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-content/plugins/Wordpress-seo%20css/adminbar.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-includes/css/admin-bar.min.css" rel="stylesheet" />
<link href="Content/wp-content/themes/roots/assets/css/app.css" rel="stylesheet" />
<link href="SageWP/Scripts/wp-content/themes/sage/style.css" rel="stylesheet" />
<script src="SageWP/Scripts/wp-content/plugins/styles-with-shortcodes/js/sws_frontend.js"></script>
<script src="SageWP/Scripts/wp-content/themes/roots_assets_js/vendor/modernizr-2.6.2.min.js"></script>
<script src="SageWP/Scripts/wp-content/themes/roots_assets_js/plugins.js"></script>
<script src="SageWP/Scripts/wp-content/themes/sage/assets_js/main.js"></script>
<script src="SageWP/Scripts/wp-includes/js/jquery/admin-bar.min.js"></script>
<asp:PlaceHolder runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.6.2.js") %>"></script>
</asp:PlaceHolder>
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<%--<form runat="server">--%>
<div>
<header class="banner" role="banner">
<div class="container">
<a class="brand" href="http://www.usesage.com/">
<img src="http://www.usesage.com/wp-content/themes/sage/assets/img/sagex2.png" alt="Sage Technologies" title="Sage Technologies" width="111px" height="40px" />
</a>
<nav class="nav-main" role="navigation">
<ul id="menu-primary-navigation" class="nav nav-pills">
<li class="dropdown menu-about-acos"><a class="dropdown-toggle" href="/About_ACOs/AboutACOs.aspx">About ACOs</a>
<ul class="dropdown-menu">
<li class="desktop-hide menu-about-acos"><a href="/About_ACOs/AboutACOs.aspx">About ACOs</a></li>
<li class="desktop-hide menu-overview"><a href="/About_ACOs/AboutACOs.aspx">Overview</a></li>
<li class="menu-aco-building-blocks"><a href="/About_ACOs/ACOBuildingBlocks.aspx">ACO Building Blocks</a></li>
<li class="menu-ideal-state"><a href="/About_ACOs/IdealState.aspx">Ideal State</a></li>
</ul>
</li>
<li class="dropdown menu-about-us"><a class="dropdown-toggle" href="/About.aspx">About Us</a>
<ul class="dropdown-menu">
<li class="desktop-hide menu-about-us"><a href="/About.aspx">About Us</a></li>
<li class="desktop-hide menu-overview"><a href="/About.aspx">Overview</a></li>
<li class="menu-our-leadership"><a href="/about-us/our-leadership/">Our Leadership</a></li>
<li class="menu-our-clientstestimonials"><a href="/about-us/our-clientstestimonials/">Our Clients/Testimonials</a></li>
<li class="menu-case-studies"><a href="/about-us/case-studies/">Case Studies</a></li>
</ul>
</li>
<li class="dropdown menu-solutions"><a class="dropdown-toggle" href="/Solutions.aspx">Solutions</a>
<ul class="dropdown-menu">
<li class="desktop-hide menu-solutions"><a href="/Solutions.aspx">Solutions</a></li>
<li class="desktop-hide menu-overview"><a href="/Solutions.aspx">Overview</a></li>
<li class="menu-clinical-integration"><a href="/solutions/clinical-integration/">Clinical Integration</a></li>
<li class="menu-case-disease-management"><a href="/solutions/case-disease-management/">Case & Disease Management</a></li>
<li class="menu-population-management"><a href="/solutions/population-management/">Population Management</a></li>
<li class="menu-business-intel-analytics"><a href="/solutions/business-intel-analytics/">Business Intel & Analytics</a></li>
<li class="menu-risk-management"><a href="/solutions/risk-management/">Risk Management</a></li>
<li class="menu-health-services-consultation"><a href="/solutions/health-services-consultation/">Health Services Consultation</a></li>
</ul>
</li>
<li class="dropdown menu-aco-implementation"><a class="dropdown-toggle" href="/ACO_Implementation.aspx">ACO Implementation</a>
<ul class="dropdown-menu">
<li class="desktop-hide menu-aco-implementation"><a href="/ACO_Implementation.aspx">ACO Implementation</a></li>
<li class="desktop-hide menu-overview"><a href="/ACO_Implementation.aspx">Overview</a></li>
<li class="menu-90-days-to-an-aco"><a href="/aco-implementation/90-days-to-an-aco/">90 Days to an ACO</a></li>
<li class="menu-customizable-scalable"><a href="/aco-implementation/customizable-scalable/">Customizable & Scalable</a></li>
<li class="menu-technical-architecture"><a href="/aco-implementation/technical-architecture/">Technical Architecture</a></li>
<li class="menu-symphony-partnership"><a href="/aco-implementation/symphony-partnership/">Symphony Partnership</a></li>
<li class="menu-custom-applications"><a href="/aco-implementation/custom-applications/">Custom Applications</a></li>
</ul>
</li>
<li class="desktop-hide menu-contact-us"><a href="/Contact.aspx">Contact Us</a></li>
<li class="desktop-hide menu-faqs"><a href="/Support.aspx">FAQs</a></li>
<li class="desktop-hide menu-news"><a href="/News.aspx">News</a></li>
<li class="desktop-hide menu-login"><a href="/Login.aspx">Login</a></li>
<li class="desktop-hide active menu-home"><a href="/">Home</a></li>
</ul>
</nav>
<div class="utility">
<ul id="menu-utility-menu" class="utility-menu" style="display: inline-block">
<li class="active menu-home"><a href="/Home.aspx">Home</a></li>
<li class="menu-contact-us"><a href="/Contact.aspx">Contact Us</a></li>
<li class="menu-faqs"><a href="/Support.aspx">FAQs</a></li>
<li class="menu-news"><a href="/News.aspx">News</a></li>
<li class="menu-login"><a href="/Login.aspx">Login</a></li>
<li><a class="doc-link" href="https://www.usesage.com/SageWebsite/FindProvider.aspx" target="_blank">Find a Doctor</a></li>
<li>
<fieldset>
<form role="search" method="get" id="searchform" action="http://www.usesage.com">
<input type="text" value="" name="s" id="s" runat="server" style="height: 19px; width: 150px"/>
<span class="search-submit-container">
<input type="submit" id="searchsubmit" value="" class="btn" style="width:100px;margin:0 auto;display:block;">
</span>
</form>
</fieldset>
</li>
</ul>
</div>
</div>
<a class="mobile-menu-link" href="javascript:void(0)"> </a>
</header>
</div>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
</div>
</body>
</html>
In one instance jQuery DOES NOT work in this page.
HTML is as follows:
<%@ Page Title="Ideal State - Sage" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="IdealState.aspx.cs" Inherits="UseSage.About_ACOs.IdealState" %>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
<%--<script src="/PageHelpers/ideal_state.js"></script>--%>
<script type="text/javascript">
$(function () {
$('body').addClass('page page-id-125 page-child parent-pageid-124 ideal-state');
});
</script>
<div class="wrap container" role="document">
<div class="content row">
<div class="main span12" role="main">
<div class="page-header">
...
</div>
<section class="body-content">
...
</section>
<div class="page-footer-banner"></div>
<div class="subnav-container">
<div class="subnav-inner">
<ul>
<li class="page_item page-item-127"><a href="/AboutACOs/ACOBulidingBlocks.aspx">ACO Building Blocks</a></li>
<li class="page_item page-item-636"><a href="/about-acos/download-whitepaper/">Download White Paper</a>
<ul class='children'>
<li class="page_item page-item-638"><a href="/about-acos/download-whitepaper/thank-you/">Thank You</a></li>
</ul>
</li>
<li class="page_item page-item-631"><a href="/About-ACOs/Contact.aspx">Contact Us</a>
<ul class='children'>
<li class="page_item page-item-633"><a href="/about-acos/contact-us/thank-you/">Thank You</a></li>
</ul>
</li>
<li class="page_item page-item-125 current_page_item"><a href="/About_ACOs/IdealState.aspx">Ideal State</a></li>
</ul>
</div>
</div>
</div>
<!-- /.main -->
</div>
<!-- /.content -->
</div>
<!-- /.wrap -->
</asp:Content>
In one instance jQuery works properly in this page.
HTML is as follows:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="UseSage.Home" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<script src="PageHelpers/home.js"></script>
<a href="Content/Home/">Content/Home/</a>
<div class="wrap container" role="document">
<div class="content row">
<div class="main span12" role="main">
<h1>Making ACO implementation a dream, not a nightmare.</h1>
<div class="page-title-banner"> </div>
<!-- <div class="page-title-banner"></div> -->
<div class="home-element-container">
<!-- Start the Loop. -->
<article class="home-block">
<div class="text-content">
<h2>Bewilderment is exactly what you don’t need.</h2>
<p>The ceaselessly changing world of health care regulation is confusing enough without our adding to the chaos. Instead, we’re an oasis of order bringing understanding to the process. Payers are asking providers of healthcare to perform administrative – insurance type services and to be at risk for meeting quality and cost requirements.</p>
<button onclick="location.href='/aco-implementation/'">Learn about how we implement ACOs</button>
</div>
<img width="370" height="370" src="/Content/Home/art-1.png" class="attachment-post-thumbnail wp-post-image" alt="Learn about how we implement ACOs">
</article>
<article class="home-block">
<div class="text-content">
<h2>We don’t just talk about getting things done, we actually get them done.</h2>
<p>Some people talk, others do. We fall squarely in the latter camp. Rather than merely spouting the latest buzzwords and catchphrases, we come to work prepared to actually get to work on implementing solutions for all aspects of your business. Payers currently use Sage to help providers meet such requirements as cost efficiency, quality, patient information and regulatory changes.</p>
<button onclick="location.href='/solutions/'">Learn about our solutions</button>
</div>
<img width="401" height="640" src="/Content/Home/art-2.png" class="attachment-post-thumbnail wp-post-image" alt="Learn about our Soultions">
</article>
<article class="home-block">
<div class="text-content">
<h2>The clock is ticking. We help you build an ACO that fits…fast.</h2>
<p>“One size fits all” is great in theory, but a disaster the first time you try on a shoe that’s two sizes too small. The same is true of companies that try to force-fit a solution for your company with no regard for the customization that’s required to really make it right for you. Do you really want a “one size fits all” ACO?</p>
<p>We step into the shoes of what the payer or providers need to get done and implement the Sage toolbox to meet operational and regulatory requirements.</p>
<button onclick="location.href='/about-acos/'">Learn about ACOs</button>
</div>
<img width="235" height="371" src="/Content/Home/art-3.png" class="attachment-post-thumbnail wp-post-image" alt="Learn about ACOs">
</article>
</div>
</div>
<!-- /.main -->
</div>
<!-- /.content -->
</div>
<!-- /.wrap -->
<script type='text/javascript' src='SageWP/Scripts/wp-content/themes/roots_assets_js/plugins.js'></script>
<script type='text/javascript' src='SageWP/Scripts/wp-content/themes/sage/assets_js/main.js'></script>
</asp:Content>
3
Answers
You need to make your script paths relative so that they can be accessed from any content page, regardless of its path.
The path to the file that you use in your master page needs to be the path to the file as it will be in whatever page(s) uses the master page.
You need to use absolute URLs to your script files rather than the relative paths you have now. You could accomplish this in multiple ways but the easiest way is probably just to turn all those client-side
<link>and<script>elements into server-side generate ones. You could grab theSystem.Web.OptimizationNuGet and start using bundles if you wanted to get more advanced.The
"~/"gives you an absolute start path that will also take into account your app’s root location (the virtual root), but can only be used within url’s that will be processed by ASP.Net. So, generateHtmlLink‘s in the page or codebehind, turn these –into this form –
or this form –
I don’t think
<script>elements have a specific control as they expect you to use the script manager classes, but you can use a generic control from codebehind.into
I had the same problem. for home page js file are working but if application move to some inner page it was not working. I found a solution please find the below code. please vote me if it working for you.