I have a page that when I go to it n times, the JavaScript I have attached to it gets executed n times. So, the first navigation only gets executed once and works correctly. I believe it is because I am using .load("something") is causing the JavaScript to get loaded more than once (after the first time) and then gets executed n times it is loaded. How can I get my JavaScript to load and execute only once?
The Path.map() functions you will see below is from a plugin by https://github.com/mtrpcic/pathjs, which I do not think is the problem.
More detailed explanation below:
I have a main page which the stripped down structure is
- <body>
<div id="mainContent"></div>
</body>
When a link on the main page is clicked, this executes
- // Add the hash we want that will take us to the level two page.
window.location.href += "/" + swimlane;
which causes this previously defined method to execute
- Path.map("#/:program/:swimlane").to(function () {
var swimlane = this.params['swimlane'];
var view = "views/" + swimlane + ".html";
$("#mainContent").load(view);
$("#headerLevelTwoBreadcrumbLink").load("views/breadcrumbs/breadcrumb.html");
}).enter(setPageActions);
Once the level two page is loaded, I have many links that are attached to an event handler
- $(document).on("click", ".openLevelThree", function (e) {
page = $(this).children('a').attr('href');
- var level_three_page_name = page.substring(0, page.indexOf(".htm"));
- level_three_breadcrumb_name = level_three_page_name + " " + e.currentTarget.innerText;
- level_three_breadcrumb = "views/breadcrumbs/breadcrumb_link.html";
- var href = window.location + "";
-
//*************************************************************************************
// I can put a breakpoint here (or anywhere in this method) and see this run multiple
// times...after the first time.
//*************************************************************************************
window.location.href += "/" + level_three_page_name;
- e.preventDefault();
});
If I click a link the first time, I get my level three page correctly and my url looks like this
- http://localhost:50715/testsite/Index.html#/rt/proposals/1.20
path.js detects the change and loads the correct page
- Path.map("#/:program/:swimlane/:page").to(function () {
- var url = "views/levelthree/" + this.params['page'].substring(1) + ".htm";
- $.get(url)
.done(function () {
// Nothing here at this time...
}).fail(function () {
url = "views/levelthree/badurlpage.htm";
level_three_breadcrumb_name = "Page Unavailable";
}).always(function () {
$("#subheader").html("");
- $("#headerLevelTwoBreadcrumbLink").load(level_three_breadcrumb);
- $("#headerLevelThreeBreadcrumb").html("");
- $('#headerLevelThreeBreadcrumb').append('<img src="images/Chevron.gif" />');
- $("#headerLevelThreeBreadcrumb").append(level_three_breadcrumb_name);
- $("#mainContent").load(url);
});
- }).enter(setPageActions);
If I click my breadcrumb or use the back button to go back to my level two page (which has all the links) and click a different (or the same) link, I get a URL that looks like this
-
http://localhost:50715/testsite/Index.html#/rt/proposals/1.20/1.20 // Note duplicate /1.20
Which of course path.js does not have mapped because it is only looking for a page id to be there only once.
I believe it is because of my using the .load method. How can I fix this so my JavaScript only executes once?