web-dev-qa-db-fra.com

Windows.history.back () + location.reload () jquery

J'ai un problème dans mon code. L'objectif est de remplir un formulaire simple, puis vous cliquez sur un bouton d'envoi. Il fait une demande Ajax pour aller dans la méthode. En cas de succès dans la requête ajax, j'utilise windows.history.back () pour accéder à la page précédente et ici je souhaite actualiser cette page, pour actualiser les valeurs modifiées par le formulaire! Avez-vous une idée à ce sujet?

    $('#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 !");
            }
        })
    })
javascriptjqueryajax
17
Julien698

Il sera déjà retourné avant d’exécuter le rechargement.

Vous feriez mieux de remplacer:

window.history.back();
location.reload();

avec:

window.location.replace("pagehere.html");
9
jbyrne2007

window.history.back(); Il est parfois un problème de compatibilité javascript avec les défis liés aux appels ajax ou à la conception.

Je voudrais utiliser cette fonction ci-dessous pour revenir avec l'actualisation.

function GoBackWithRefresh(event) {
    if ('referrer' in document) {
        window.location = document.referrer;
        /* OR */
        //location.replace(document.referrer);
    } else {
        window.history.back();
    }
}

Dans votre html, utilisez:

<a href="#" onclick="GoBackWithRefresh();return false;">BACK</a>`

Pour plus de personnalisation, vous pouvez utiliser history.js plugins.

26
Sender

Essayez ces ...

Option 1

window.location=document.referrer;

Option 2

window.location.reload(history.back());
10
Chirag Mehta

Vous ne pouvez pas faire window.history.back (); et location.reload (); dans la même fonction.

window.history.back () interrompt le flux javascript et redirige vers la page précédente, location.reload () n'est jamais traité.

location.reload () doit être appelé sur la page que vous redirigez lorsque vous utilisez window.history.back ().

Je voudrais utiliser une URL pour rediriger au lieu de history.back, qui vous donne à la fois une redirection et une actualisation.

7
Stig Hausberg

C'est la bonne réponse. Cela actualisera la page précédente.

window.location=document.referrer;
1
Inamur Rahman

window.history.back () ne prend pas en charge le rechargement ou l'actualisation de la page. Mais vous pouvez utiliser ce qui suit si vous êtes d'accord avec un rafraîchissement supplémentaire

window.history.back()
window.location.reload()

Cependant, une solution complète et réelle serait la suivante:

Voici comment je l'ai fait.

'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;       
    });

Assurez-vous que vous avez inclus ce fichier js de votre index.html

<script src="scripts/components/util/route.service.js"></script>

Maintenant, depuis votre fournisseur d’état ou votre contrôleur, vous pouvez accéder à ce service et naviguer

var routeHistory = RouterTracker.getRouteHistory();    
console.log(routeHistory[0].route.name)
$state.go(routeHistory[0].route.name, null, { reload: true });

ou encore même effectuer des contrôles et routage conditionnel

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()
}

Assurez-vous que vous avez ajouté RouterTracker en tant qu'argument dans votre fonction dans mon cas, c'était: 

.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('^');
 })
0
Sacky San