I am trying to redirect to a template file after an Ajax call using:
window.location.href = "templates/somepage.html";
It goes to the page, however, on that page, the buttons won't load properly and the JavaScript won't get called when I click the buttons. I probably need some sort of callback because index.html needs to get called as well as templates/somepage.html.
NB: We are using the Ionic framework but I am not experienced with it, as I am a php developer. Also, I would prefer a non-jquery solution. Thanks.
The reason nothing works or displays correctly because the file you are redirecting to is missing all the core include (the CSS and JavaScript) files as can be seen below:
about.html
This is a base Ionic template file and as you can see it has no <script></script> or <link> tags.
<ion-view title="About" id="page9">
<ion-content overflow-scroll="true" padding="true" class="has-header">
</ion-content>
</ion-view>
Thus none of your CSS or JavaScript is working correctly.
Ionic is built on top of AngularJS so you can use the the state changer instead of directly accessing or redirecting to a template file as you are doing.
What you have to do is inject the $state in to your controller as can be seen in the example below:
routes.js
You should be already familiar with all of this, but you'll be referring to the state using myView.
[...].state('myView', {
url: '/my-url',
templateUrl: 'my/template/location.html',
controller: 'myViewCtrl'
});
controllers.js
In your controller, you'll inject the $state which will be used to change the view.
[...].controller('myCtrl', function ($state) {
/** This will be used to change to the route that we created above. **/
$state.go('myView');
});
I struggled with this too when I first started using Ionic and I stumbled across the solution and thought I'd help out.
Reading Material