I've a probleme in my code. The aim is to complete a simple form, then you click on a submit button. It do an Ajax resquest to go in the method. On success in the ajax request, i use windows.history.back() to go to the previous page ans here i want to refresh this page, to refresh values which are modificated by the form ! Have you an idea about that ?
$('#form_edit').submit(function (e) { e.preventDefault(); $.ajax({ url: $('#form_edit').attr('action'), type: 'POST', cache: false, data: $(this).serialize(), success: function (data) { if (data === true) { alert("Modification réussie !"); window.history.back(); location.reload(); <= on success i want to refresh previous page } else { alert("Modification échouée !"); } }, error: function () { alert("Modification échouée !"); } }) })
It will have already gone back before it executes the reload.
You would be better off to replace:
window.history.back(); location.reload();
with:
window.location.replace("pagehere.html");
window.history.back(); Sometimes it's an issue with javascript compatibility with ajax call or design-related challenges.
I would use this below function for go back with the refresh.
function GoBackWithRefresh(event) { if ('referrer' in document) { window.location = document.referrer; /* OR */ //location.replace(document.referrer); } else { window.history.back(); } }
For more customization you can use history.js plugins.
You can't do window.history.back(); and location.reload(); in the same function.
window.history.back() breaks the javascript flow and redirects to previous page, location.reload() is never processed.
location.reload() has to be called on the page you redirect to when using window.history.back().
I would used an url to redirect instead of history.back, that gives you both a redirect and refresh.
Try these ...
Option1
window.location=document.referrer;
Option2
window.location.reload(history.back());
window.history.back() does not support reload or refresh of the page. But you can use following if you are okay with an extra refresh
window.history.back() window.location.reload()
However a real complete solution would be as follows: I wrote a service to keep track of previous page and then navigate to that page with reload:true
Here is how i did it.
'use strict'; angular.module('tryme5App') .factory('RouterTracker', function RouterTracker($rootScope) { var routeHistory = []; var service = { getRouteHistory: getRouteHistory }; $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) { routeHistory = []; routeHistory.push({route: from, routeParams: fromParams}); }); function getRouteHistory() { return routeHistory; } return service; });
Make sure you have included this js file from you index.html
<script src="scripts/components/util/route.service.js"></script>
Now from you stateprovider or controller you can access this service and navigate
var routeHistory = RouterTracker.getRouteHistory(); console.log(routeHistory[0].route.name) $state.go(routeHistory[0].route.name, null, { reload: true });
or alternatively even perform checks and conditional routing
var routeHistory = RouterTracker.getRouteHistory(); console.log(routeHistory[0].route.name) if(routeHistory[0].route.name == 'seat') { $state.go('seat', null, { reload: true }); } else { window.history.back() }
Make sure you have added RouterTracker as an argument in your function in my case it was :
.state('seat.new', { parent: 'seat', url: '/new', data: { authorities: ['ROLE_USER'], }, onEnter: ['$stateParams', '$state', '$uibModal', 'RouterTracker', function($stateParams, $state, $uibModal, RouterTracker) { $uibModal.open({ //....Open dialog..... }).result.then(function(result) { var routeHistory = RouterTracker.getRouteHistory(); console.log(routeHistory[0].route.name) $state.go(routeHistory[0].route.name, null, { reload: true }); }, function() { $state.go('^'); })
