Develop Reference

Hyperlinks don't work with ajax / jquery?

So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!

content loaded with JQuery needs form submit to reload content in parent

Working on an admin-dashboard page, and I have it loading other pages from a nav menu with JQuery like so:
$('#stores.sub_menu--link').click(function(){
$('#content').load("https://mydomain.mywebsite.com/ApageWithForms.php")
});
This part works fine; the problem is this:
The loaded content is coming from PHP pages, and have form and click GET and POST functions. These work fine if we load the page itself in a browser, but when the page is loaded as content POSTing or GETing loads the page in a new tab instead of reloading in the content. I understand WHY it does it, but I have no idea HOW to fix it! I have tried adding _PARENT to forms and pages even though I knew this wouldn't be the answer (it wasn't).
I've tried searching, but I think my limited ability to explain the problem is also preventing me from finding a solution.
Can anyone point me in the right direction? What I am looking to have happen is when a form is submitted have the page re-load into the dynamic location of the parent.

Figured it out. The loaded content had duplicate class, id and names for some elements which confused jQuery. Changing these allowed ajax posts to work as intended.

Angular JS Angular input dropdown control not getting rendered properly

I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

Load multiple componant on the same page Angular 2

I'm working on an angular 2 application, to keep the explication short, I have a navbar on the left, and on the rest of the page, and I will display my content.
Those content will be blocks, as in the attached image, the navbar contains 4 actions (Form, test1, details ...)
The content in the middle will display everything, but when I click on form, form will be shown in the middle, when i click on Details, the details block will be shown in the middle.
The user can scroll down and up to see the blocks.
I saw that in Angular 2 we can user Fragment to precise anchor and what blocks we want to show, but the problem is that there is a bug on the fragment functionality.
At the moment, I have a router-outlet that changes the view depending on the url in the routerLink on each button of the navbar. Should I keep using it if i want to display all the blocks/components on the same page?
Thanks for your help,
here is the screenshot

So in essence, you want a multitude of components, with a menu that doesn't really navigate, but more so has toggle buttons that either display or hide content? What should a page refresh do? Does it matter if you see the same components then? If so, you either have to store state in local storage / session storage / using ngrx... or you have to add the displayed items to the route and resolve those.
Anyhow, in the end you want one component which decides what is displayed, and all the blocks in their own components with their own selectors which you show / hide using *ngIf.
Your html would basically look like this:
<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>

Route reloads entire page and view

I am developing an app, and in the app, there are some "utility" buttons that when clicked will, say, show the user some information.
For example, a question-mark button, that when clicked, shows the user some "quick tips".
The app is heavily data-driven, so I wanted to avoid having extra hidden elements that just show based on a flag whenever the user clicks a button.
So, I have a div element with an ng-view tag that will populate with quick-tips.html whenever the user clicks the question-mark button.
The routing code looks like this:
whiteboard.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/quick-tips', {
templateUrl: 'templates/quick-tips.html',
controller: mainController
});
}]);
Here's a shortened version of my HTML:
<!-- bootstrap question mark glyphicon -->
<div ng-view></div>
<!-- a bunch of other HTML markup (this refreshes for some reason when the route is called and the view is updated) -->
My issue is that when the link is clicked, the entire page refreshes, and then populates the view. It breaks the user-experience, I think. Is this supposed to happen? If so, is there a way to avoid it?
I looked into using $routeProvider resolve, but it didn't look like that would fix the issue. Any thoughts?

Here's the answer to my own question, in case anyone else has this issue.
I was using a base tag in my HTML:
<base href="<!-- etc. -->">
This caused the page to reload every time when using routes.