Bootstrap Tour with an ASP.NET/MVC layout page - html

Question

I'm trying to set up a bootstrap tour. I've got two pages (Design.vbhtml and EditHomePage.vbhtml). They both use a layout page called (_DesignerLayout.vbhtml). I've got all the scripts and stylesheets for bootstrap, tour, jquery, etc. listed on the layout page. All that stuff is correct.
My tour starts on the Design page and displays my first 3 steps correctly. However when it gets to the fourth step (called third-step, not to be confused), it goes to the second page but it doesn't continue with the steps. The tour just stops.
My elements are all id's on div tags (welcome-step, first-step, etc.). I know those are all correct. It has to do something with my paths.
I've looked everywhere and can't seem to find anyone else using a layout page with a tour, so I'm wondering if it has anything to do with the steps jumping from the design page to the layout page to the edithomepage page. Any ideas would be appreciated!
Here is my bootstrap tour code---
Design.vbhtml (first page):
$(function () {
// Instance the tour
var tour = new Tour({
backdrop: true,
steps: [
{
element: "#welcome-step",
title: "Welcome!",
content: "Begin this tour to see how you can design the look of your website.",
orphan: true,
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#first-step",
title: "Change the Look",
content: "Use this section to design how your website looks. You can choose which pages you want to include on your website.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#second-step",
title: "Edit Pages",
content: "These are the different pages you can edit for your website. Click on each one to customize.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the _DesignerLayout.vbhtml page
},
{
element: "#third-step",
title: "Main Photo",
content: "You can upload a main photo that will appear on your front page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fourth-step",
title: "Main Photo Display",
content: "You can specify whether or not you want the main photo show at the top of all of your pages.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fifth-step",
title: "Page Headline",
content: "This is where you can set a title for your page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#sixth-step",
title: "Page Content",
content: "Here is where you add all your content for your page. You can add text, images, media, tables, etc.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#seventh-step",
title: "Save Changes",
content: "Make sure to hit the 'Save' button when finished!",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
}
]
});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
;

Answer 1

I discovered that copying and pasting the entire tour onto the second page gets it to work perfectly. It's not the best coding practice seeing as I have the same code in two different places and have to change both locations each time I make a change in it. But, for now, it works.