I try to redirect a page by using window.location in js.
The page gets not redirected instead of showing Cannot GET /reportCaseupload like that in a blank page
can somebody say what can i do?
Here my code is:
temp[8] = "<span class='glyphicon glyphicon-file' title=\"Upload Report\" onclick=\"reportCaseupload(\'" + datum._id + "\')\"></span>";
function reportCaseupload(id) {
debugger;
window.location.href ='/reportCaseupload';
}
This means when i click a button,the reportCaseupload function will call and it simply wants to redirect my reportcaseUpload.html page thats it.
you have to inject $location in your controller
app.controller('rootController', function($scope, $location)
{
$location.url('http://google.com'); // to redirect specified url
$location.path('/app/login'); // to redirect relative path .
}
Your issue is that you do not need the / in your window.location.href statement. You should also likely be ending the href with the .html extension if "reportCaseUpload" is a html file.
It should look like this:
window.location.href = "reportCaseUpload.html"; //or just "reportCaseUpload"
Related
I have two controllers on the same page, one for login controller and the other controller. The first controller is bound to the path "/" and the second is bound to the path "/mypath".
If the user is not logged in, then he can't access to the latter. He can log in through the first controller.
The problem is that, when the user log in, the page will routed to the path "/". How to prevent this? I want the page to remain at current path.
This is what I have tried. The $locationChangeStart event :
mstdapp.run(["$rootScope", function($rootScope){
$rootScope.$on("$locationChangeStart", function(event, newUrl, oldUrl){
$rootScope.returnUrl = newUrl;
console.log("new url in run is :");
console.log(newUrl);
});
}]);
Then, in the login controller :
$scope.login = function(){
authService.Authenticate($scope.user)
.then(function(res){
$scope.user.displayname = res.data.name;
$scope.isLoggedIn = authService.isAuthenticated();
console.log($rootScope.returnUrl);
}, function(res){
alert(res.data.error_description);
console.log($rootScope.returnUrl);
});
};
The $rootScope.returnUrl points to the "/" path.
Found the answer. It is because the login button is actually an <a> with href="#". That is why the page is redirected to root path. Removing the href solves my problem.
I want to redirect a user on specific page using ajax call in angularjs. I am able to redirect using below mentioned code but when i again want to redirect user to root page i am unable to do so as the value of $window.location.href+ 'getTechnicianWorkOrder/'+woId is persisting as is:
$scope.getTechnicianWorkOrderFormURL = function(woId){
return $window.location.href + 'getTechnicianWorkOrder/'+woId;
};
Another place where i want to redirect to root page:
$scope.getAssignedListURL = function(){
return $window.location.href;
};
Note: i want to make this redirection work even in offline mode of HTML5 cache-manifest.
Using the $location service.
$location.path('/');
The answer by #prashant-palikhe is the right one, $location.path('/'); is the route to your root path. just use the dependency of $location to your controller like this:
yourapp.controller('YourController', ['$location', function($location) {
...
}
I always use the ui.router for my routes and in there you can add $urlRouterProvider.otherwise('/') for fallback in any unknown state or route.
In some cases you can add something like this in your states:
resolve : {
dataObj : ['$http', function($http) {
return $http({method : 'GET', url : '/your/ajax/endpoint'})
;}],
},
onEnter : ['dataObj', '$state', function(dataObj, $state) {
// dataObj is your ajax response object. Based on this you can redirect to a certain state of needed
$state.go('default');
}]
resolve is data that preloads data onEnter is called before entering the state. This can be used as some sort of middleware.
I am trying to implement Mean-seo and it seems to be working except every time it redirects to home page.
http://localhost:3333/?_escaped_fragment_=/contact-us
flashes the contact-us page then redirects to home page.
If I remove
$urlRouterProvider.otherwise('/');
It shows the contact us page but then the home page is just blank.
this seems to solve the problem for me. using this
$urlRouterProvider.otherwise(function ($injector, $location) {
//what this function returns will be set as the $location.url
var path = $location.absUrl();
if (path.indexOf('_escaped_fragment_') === -1) {
//instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
return '/';
}
// because we've returned nothing, no state change occurs
});
instead of
$urlRouterProvider.otherwise('/');
What's the best way to direct a user to the home page if they happen to refresh from any other route (or state if you're using ui-router, as I am).
For example - I want them to begin on the inventory page. If they want to make edits, they travel to the edits page, but if they refresh that page, they go straight to the inventory route again.
I havn't used the ui-router but in ng-route we can do it like this
create a controller on top of your ng-view div
<body ng-controller="topController">
<div ng-view></div>
</body>
Define your routes normally but in topController just write this line
$location.path("/")
assuming that "/" is your main page where you want to redirect after refresh, don't forget to define $location
window.onbeforeunload = function()
{
window.setTimeout(function () { window.location = 'homeURL'; }, 0);
window.onbeforeunload = null;
}
Assume that #/inventory is your route, use otherwise
$urlRouterProvider.otherwise("/inventory");
See URL Routing - $urlRouterProvider
Background of how I am initializing my AngularJS app is here :
SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html
Summery Problem
When I do a window.location = $scope.myReturnUrl and if the return URL contains a "#", instead of reloading the page, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.
Brief of how I am doing this:
I am loading my AngularJS app inside a Bootstrap Modal, this is how I initialize
var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);
jQuery('#works-modal').modal('show');
in my app.js, html5mode is set to false for all modules :
$locationProvider.html5Mode(false)
So, when my app is initialized, the url look something like :
http://my-site.uk/user/dashboard.html#/mywork/find/id/9780273651
Now, there is a cancel button on Modal dialog, click on which I am trapping through ng-click, and when clicked, it simply do a redirection something like
window.location = $rootScope.returnToUrl;
now, in my case, return url contains id of the link that was clicked, so that browser can scroll to particular section, the return url is :
http://my-site.uk/user/dashboard.html#my-work1
my rout provider config
$routeProvider.
when('/mywork/find/:id', {
templateUrl: '/mywork/partials/find/find.html',
controller: WorkCtrl
}).
when('/mywork/find/review/submit/:id', {
templateUrl: '/mywork/partials/review.html',
controller: ReviewCtrl
}).
otherwise({
redirectTo: '/mywork/find/id/'+id
});
Problem
Now, when I am trying to redirect to : http://my-site.uk/user/dashboard.html#my-work1
instead of reloading page and scrolling to designated #ID, AngularJS is capturing the URL change and reloading the app instead. this happens because, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.
I am use html5mode(true) due to historic reason (mentioned in this thread : SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html)
I don't want to remove the # from my return url because it will break the workflow. Any suggestion how to overcome this?
Thanks,
Ravish
So it sounds like you want http://my-site.uk/user/dashboard.html#my-work1 to redirect you to dashboard.html and scroll to the element with id="my-work1".
You might want to take a look at the $anchorScroll(http://docs.angularjs.org/api/ng.$anchorScroll) service. I'm not sure how it works exactly as I've never needed to use it, but I know it solves problems such as yours.
in your URL (http://my-site.uk/user/dashboard.html#my-work1) try pass 'my-work1'as a parameter in routeProvider like http://my-site.uk/user/dashboard.html/my-work1.
example:
when('/my/route/:param', {
templateUrl: '/mywork/partials/param.html',
controller: WorkCtrl
})
in your controller, get this parameter with $routeParams.
var myParam = $routeParams.param
$location.hash(myParam)//set anchor
$anchorScroll()//do scroll
I hope this solve your problem