Angularjs - $location.path / $location.url changes URL but doesn't refresh page - javascript

Working with Angular and im running into a few issues using $location.url & $location.path
The URL changes at the top of the page to /users/sign_in but I don't see the view until I manually refresh the page, then it appears?
function error(response) {
if (response.status == 401) {
$rootScope.$broadcast('event:unauthorized');
$location.url('/users/sign_in');
};
};
I am not getting any errors.

You're doing a bit too much in your function. You're attempting to change the URL but also return a response. You can try using a $scope.$apply() right after the $location.url call, however you should consider splitting this logic so that the redirect occurs based on the returned response, or don't return any response from the error function.

Related

$.POST on a squarespace page

I have a custom form that posts to a 3rd party server as an appointment booking module. If i submit the form thru the action of the <form> tag i do recieve the email, but i would like to submit the form using $.POST so that i can alter the redirect URL.
I have jQuery running successfully on my site, and if i use:
$.post('URL', {data}).then(function () {alert('Form Submitted!')});
The redirect (or alert for this example) works fine, but the POST doesnt seem to actually run. Has anyone had a similar issue and found a way to resolve this?
ACTUAL CODE
I am using mailthis.to's API to avoid having to run a server just to do this
$('#sendForm').click(()=>{
$.post('https://mailthis.to/support#gadget-pro.com', {
Name:$('#Name').val(),
Email:$('#Email').val(),
Phone:$('#Phone').val(),
Device:$('#device').val(),
Repair:$('#repairType').val(),
Price:$('#price').val()
}).then(function (data) {
location.href = 'https://gadget-pro.com/formconfirm'
});
})
I would say to update your code to return back the page. you are likely not triggering the post to page properly or there is an error.
alos console.log the post data before to know what is being sent.
update your code to
console.log(data);
$.post('URL', {data}).then(function (retpage) {console.log(retpage)});

Rendering order in angular

I'm trying to get rid of a visual issue I got.
I have a ng-repeat displaying some stuff and a footer on my page.
The ng-repeat taking some time to display, I see the footer n my page before anything else and that is disturbing.
How can I force the footer to display only when something else like an ng-repeat has finish rendering on the page ?
ng-repeat is rendered with a list of value; that you propably get from a WebService.
add a $rootScope.myBool that is false at app start.
Update that valueto true within your $http call (or way to fill your ng-repeat array)
once your array is completed add a ng-show="myBool" to your footer to
prevent it from showing before your array is filled
It always better to create one service which shows loader icon full width when any ajax call or data loading is happening.
this is very normal scenario with angularJs SPA, that the page look distorted or footer coming first at page level, so better create one service which will enable full screen loader on the page when ajax call loads the data or ng-repeat is in progress and as things are completed same service will disable the full screen loader
something like this: to make loader service true before calling ajax and make it false as call finishes in success or error.
https://iamlalit.tinytake.com/sf/MTY5MDY2NF81NjM1Njgw
loaderService.toggle(true);
$http({
url: enumApp.url.apiUrl + Id,
method: "GET"
})
.success(function (data) {
loaderService.toggle(false);
})
.error(function (data, status) {
loaderService.toggle(false);
})

calling window.location.reload only once in $ionicPlatform.ready [Ionic]

I am calling an OAuth Process in the device ready function using InAppBrowser in app.js where i am getting a token and upon checking of that token i am redirecting to a particular view.
.run(function($ionicPlatform,$rootScope,$http,jwtHelper,$cordovaInAppBrowser,$state,jwtHelper) {
$ionicPlatform.ready(function() {
if(isValidUser)
{
$state.go('app.playlists');
window.location.reload(true);
}
}
Now the window.location.reload is redirecting to the view but it is falling inside an infinite loop. If i only write $state.go, it is not redirecting to the view.
Also, when i put
$urlRouterProvider.otherwise('/app/playlists');
The above view gets fired for 2 secs and then my oauth login screen gets fired(Inside inappbrowser). So, i can't use that.
How to fix it.
You may use $location.path instead of $state.go:
$location.path('/app/playlists');
Note: Don't forget to inject $location.

$window.location.href doesn't reload whole page in AngularJs

I'm using a code like this to create an account and than i want to validate (with some specifics functions) and after that redirect to the main page.
$scope.createAccount = function(cad) {
$http.post('dist/func.php?action=createAccount', cad).then(
function(res) {
//..more functions
$window.location.href = '/adm';
},
function(err) {
Notification.error(feedbackError);
}
);
};
The problem is, when the user arrive in the new page, the mainCtrl is not running (the page is not fully reloading) so i can't get essential data for this new user.
I saw some other similar questions, but all of them says we should use $window.location.href instead of $location to get a full page reload. But until now, i had no success with it.
How can i solve it?

AngularJS $location.path(url) not Redirecting

All,
I have an AngularJS PhoneGap app I am working on. I am stuck on one redirect that occurs immediately after receiving an API call response. My code is located at gist.github.com
My issue is on line 300 of controllers.js, where I am calling my redirect within a then() block.
UserService.login($scope.user.email, $scope.user.password)
.then(function(response) {
globals.session_id = response.data.meta.session_id;
globals.logged_in_userId = response.data.response.users[0].id;
if ($scope.user.remember === true) {
window.localStorage.setItem("_session_id", response.data.meta.session_id);
window.localStorage.setItem("logged_in_userId", response.data.response.users[0].id);
} else {
window.localStorage.removeItem("_session_id");
window.localStorage.removeItem("logged_in_userId");
}
})
.then(function() {
$location.path("/tab/locations");// <=== This line doesn't cause an error but does not result in a redirect
})
.
catch (function(response) {
alert(JSON.stringify(response));
});
If anyone could please help me out, I'd appreciate it!
Thanks,
Bruce
Try $rootScope.$apply(); after $location.path()
OR
$scope.$apply(function() {
$location.path("/tab/locations");
});
You can also use $location.url()
Your then handler needs to return something so that the promise will be stilled resolve for the next condition.
Just add return response at the end of your then handlers.
It appears the issue was actually in my app.js run function call. On location change it looks at a global variable to see if a username has been set yet, and if not, it intercepts the call to send the client to the login page. Once I moved my code inside the OnLocationChange handler to look at the variable there, it redirected properly.
Thanks,
B

Categories

Resources