I have a Backbone app with Rails on the back-end. Suppose you are on page http://localhost:3000/#home and then go to http://localhost:3000/#collection. When the user clicks the Back button, I want this to behave exactly like clicking a link to http://localhost:3000/#home or typing this URL in the address bar and pressing Enter.
However, what happens instead with the Back button is the code in the <script> tag in index.html is executed again:
<script>
$(document).ready(function () {
AudioFileApp.initialize();
});
</script>
As a result, my views are not created properly (like they are if you just enter the URL and press enter). I suspect the issue is related to this turbolinks/Backbone/Rails issue, as it fixed a problem I had with a history already started error: https://github.com/codebrew/backbone-rails/issues/134. However, I'm still having problems with the re-initialization, and as a beginner I'm totally stumped.
Is there a way to make sure Back will behave just like accessing the prior page via a link or the address bar?
Here is the actual initialization method if that helps:
initialize: function() {
var router = new AudioFileApp.Routers.Router({
$rootEl: $('#main'),
currentUser: new AudioFileApp.Models.User({ id: CURRENT_USER_ID })
});
var navbar = new AudioFileApp.Views.NavbarView();
$('#navbar').html(navbar.render().$el);
var audioPlayer = new AudioFileApp.Views.AudioPlayer();
$('#audio-player').html(audioPlayer.render().$el);
if (!Backbone.history.started) {
Backbone.history.start();
}
// Listen for Back button click
$(document).on('page:load', function () {
Backbone.history.stop();
Backbone.history.start();
});
}
The problem was that I didn't completely remove turbolinks.
http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4
Related
The id's #switchtopagetwo and #switchtoindex are assigned to buttons that do what you can infer from the id's names. What I want to do is on click of the button, I want to redirect to the new page via window.location = url; and then run a function that renders some data on the page via pagetwoData() or pageoneData(), depending on where I am at the moment.
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
pagetwoData();
});
//pagetwo.html button
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
pageoneData();
});
When I comment out window.location, the functions run and I can see the data on the screen, but there's no page redirect even on clicking the button. When I click on the buttons fast enough, I can see the function's data being rendered for a split second and then disappearing. When I console.log certain items, I can see the console.log's appearing in the console and then disappearing the same way.
Clearly there is an issue with window.location. Is there better code I can use for clicking the button, redirecting the page to load the page-2 data, then clicking the button again to go back to page-1 data?
When you redirect to a new page, the entire page context is abandoned and replaced by the new page. Nothing which happens on the source page after that redirect can be relied upon to still happen. But anything on the target page that's loading will happen.
Instead of trying to get Page1 to tell Page2 to do something when it loads, just have that something happen on Page2. For example:
// on index.html
pageoneData();
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
});
// on pagetwo.html
pagetwoData();
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
});
Basically, for any given page, whatever you want to happen on that page when it loads should be executed on that page when it loads.
We are developing mobile app using ng-Cordova. We need get data from server when page load.So we write getting code in loadFeeds.example
page1:-
.controller('HomeSecondCtrl', function($scope,$http,$location,$window,$stateParams,$ionicHistory,$ionicActionSheet,BlankService,BlankFactory) {
$scope.loadFeeds();
$scope.loadFeeds = function () {
alert("Start");//getting code
}
$scope.toggleImage = function (index) {
$location.path("/page2");
}
})
page2:-
.controller('SelectCategoryCtrl', function($scope,$location,$ionicHistory,$window,$http,$ionicActionSheet,BlankService) {
$scope.back = function (){
$location.path("/page1");
}
})
When app load we calld page1. So alert Will show alert("Start");. Then we have one button action toggleImage. Using this we redriect to page2 upto this ever thing fine.
our problem is
Second page have back button so using that we redirect to first page. But now Alert not showing. loadFeeds not working. Please guide us why loadFeeds is not working when are back to page1 from page2.
Use
$scope.$on('$ionicView.enter', function(){
$scope.loadFeeds();
});
$ionicView.enter : The view has fully entered and is now the active view.
This event will fire, whether it was the first load or a cached view.
Hope it helps.
I am working on a single page application at the moment, and I wanting to show some UI is a user, refreshes the page, closes the tab, or navigates away, the reason for this is doing any of these will cancel any active uploads, and I want the user to know that.
So far I have,
$(window).on('beforeunload', function() {
alert("!!!");
return null;
});
This only seems to fire when I refresh the page, though. Is there away to hook this in to my router? I have a global var called App.Uploading, if that is true, I want to fire a method every time a route is accessed is that possible?
There is a JQuery unload function you can use:
$( window ).unload(function() {
console.log('preventing unload!');
return false;
});
document.location = 'http://www.google.com';
In my Backbone application, I am opening a modal window that changes the URL.
The application loads at the URL of http://application.dev/#dashboard opening the modal changes the URL but does not trigger a route, the URL is changed too `http://application.dev/#project/create.
On closing the modal I am wanting to navigate back to the last URL, currently I am trying the following,
$('#myModal').on('hidden.bs.modal', function () {
self.remove();
App.Routes.Application.navigate(Backbone.history.location.hash, { trigger: true } );
});
However the last route is not triggered and URL is not changed, I am obviously doing something wrong?
Some possible help:
put self.remove(); after having trigger the rout
Declare pushState:true for your router
I hope it helps.
I'm using the hot towel template, and I'm trying to understand how to navigate to a different view via a javascript call. When my page loads, it looks like this:
Then, if I click any other button, then click the apps button again, I wrote some test code to just take the user to the ping page. This is in the apps view model:
function activate() {
if (initialized) { router.navigateTo("#/ping"); return; }
// more code here (doesn't get hit the second time through)
}
But what happens is the URL is correctly the ping URL, and the ping button is selected, but the actual content is still showing the applications:
If I want to navigate to another page without clicking in the navbar at the top, how should that be done?
Your 'router.navigateTo('#/ping') is correct.
But when activate method is called, lots of heavy tasks are being done by durandal, it's too late for
your commanding, if you want to prevent opening a page and instead of that You'd like to go to
another page , then you can use 'CanActivate' method as following :
function canActivate() {
if (initialized) { router.navigateTo("#/ping"); return false;
/* return false to prevent opening a page */ }
else return true;
}
Also your application's performance will be boosted too
Good luck.