1

I am using a routing javascript plugin and am having a problem. When I click on a link to load a partial page, I get the error:

JavaScript runtime error: '$' is undefined

I'm trying to use the HTML5 pushState method from Path.js https://github.com/mtrpcic/pathjs

Can someone show me where I've messed up my page and am losing my reference to jQuery when I click a link to load a partial view? The jQuery that throws an error is on the index page that correctly loads the first time.

It looks like the error is happening because my index page is reloading and I thought having the preventDefault() in the click event stops a page from reloading?

Index.html

<div id="mainContent"></div>

// All javascript files are located near the bottom of the index page
<script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="lib/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="lib/page.js"></script>
<script src="lib/plugins/path.js" type="text/javascript"></script>
<script src="lib/engine.js" type="text/javascript"></script>

// This is in the bottom of my index.html page and runs correctly the first time, but clicking a link causes this     // to throw the error from above.
$(document).ready(function () {
    loadPrograms('data/programs.json');
});

home.html (Partial Page - Shows at initial page load) 

// Click a link to load a different partial page. Clicking this link will 
// cause the partial page to load and then the error happens.
<a href="#" target="_self" class="noprint lookup partialpageTest">

$(".partialpageTest").click(function (e) {
    var pathname = window.location.pathname;

    // Setting this URL causes the previously defined mapping in engine.js to fire
    window.location.href = pathname + "/mypartialpage";

    e.preventDefault();
});

engine.js

// Sets up mapping that determines which page to load when a link is clicked.
// #mainContent is on the index page.
$(document).ready(function () {
    Path.map("/mypartialpage").to(function () {
       $("#mainContent").load("views/onepageprocess.html");
    }).enter();
});
Wannabe
  • 596
  • 1
  • 8
  • 22
  • What happens if you use `jQuery` instead of `$` it could be that `pushState` also uses the `$` alias – Adjit Mar 21 '16 at 20:36
  • Same result...It loads correctly the first time and then when I click any link, I get jQuery undefined. – Wannabe Mar 21 '16 at 20:41
  • Actually... just saw this... maybe it's because you are putting your `e.preventDefault()` after you change the window location. Try putting it as the very first line in your click function, although this won't stop the page from reloading when you change the window location. Also, if you are using `jQuery 1.7+` I would recommend using `.on` instead of `.click` (`$(document).on('click', '.partialpageTest', function(){ });`) This way any elements dynamically added to the page will also have the click function attached to them – Adjit Mar 21 '16 at 20:44
  • I just tried it and still same result. Also with the prevent default at the top of the function. – Wannabe Mar 21 '16 at 20:51
  • Well, I also realized that changing `window.location.href` will automatically re-load the page. Do you need to change the window href?. Take a look here for a solution to that issue: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Adjit Mar 21 '16 at 20:53
  • I'm trying to do a single page app. I thought e.preventDefault() stopped the page from refreshing. – Wannabe Mar 22 '16 at 00:39

0 Answers0