Utilisez le bouton Précédent avec le formulaire AJAX?

Salut,Utilisez le bouton Précédent avec le formulaire AJAX?

J'ai une page ASP.NET MVC qui contient 5 menus déroulants en cascade (cachée jusqu'à leur chargement). Lorsque le premier est défini, AJAX récupère les données pour la seconde liste déroulante (HTML dynamique).

Si nous naviguons vers la page suivante et que nous appuyons sur le bouton "Précédent" dans le navigateur, seule la première liste déroulante en cascade sera affichée et configurée même si nous avons défini les 5?

Remarque: En définissant une chaîne de requête correcte, le service peut définir le formulaire comme si l'Ajax avait été utilisé, mais le service n'est jamais consulté avec le bouton de retour.

Moyens conseils

Source

2011-01-21 Banshee

Qu'est-ce que vous avez besoin est HTML 5 API d'histoire. Vous pouvez lire à ce sujet dans de nombreux endroits, par exemple here.

Voici un exemple simple, HTML uniquement (votre problème est pas ASP.NET MVC lié mais HTML lié, cela peut se produire sur une plate-forme):

Disons que vous avez la page 1 (index.html):

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <input type="text" id="txt1" /> 
    <br /> 
    <input type="text" id="txt2" /> 
    <br /> 
    <br /> 
    <button onclick="doStuff();">do stuff</button> 
    <button onclick="goFurther();">go further</button> 

    <script type="text/javascript"> 

     var qs = (function (a) { 
      if (a == "") return {}; 
      var b = {}; 
      for (var i = 0; i < a.length; ++i) { 
       var p = a[i].split('=', 2); 
       if (p.length == 1) 
        b[p[0]] = ""; 
       else 
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); 
      } 
      return b; 
     })(window.location.search.substr(1).split('&')); 

     window.onload = function() { 
      var data1 = qs["txt1"]; 
      var data2 = qs["txt2"]; 
      if (data1 == undefined) 
       data1 = ""; 
      if (data2 == undefined) 
       data2 = ""; 
      var textbox1 = document.getElementById("txt1"); 
      var textbox2 = document.getElementById("txt2"); 
      textbox1.value = data1; 
      textbox2.value = data2; 
     } 

     function doStuff() { 
      var textbox1 = document.getElementById("txt1"); 
      var textbox2 = document.getElementById("txt2"); 
      history.pushState('abc', 'title', 'index.html?txt1=' + textbox1.value + "&txt2=" + textbox2.value); 
     } 

     function goFurther() { 
      window.location = "/next.html"; 
     } 
    </script> 
</body> 
</html>

Comme vous pouvez le voir (et essayer dans un projet), le premier bouton prend les données dans deux champs (champs de saisie dans mon exemple trop simpliste) et définit l'URL actuelle à un avec un querystring contenant ces données (encore une fois, étant un exemple trop simplifié, il ne fait pas de validation, d'échappement, d'encodage, etc.).

Le deuxième bouton vous amène à une autre page:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Next crp</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    asdf 
</body> 
</html>

qui est mis ici que pour pouvoir y naviguer. Naviguer vers la première page (en appuyant sur le bouton retour dans le navigateur) vous mènera à l'URL qui a été définie via javascript avec la chaîne de requête.

Le gestionnaire onload va repeupler les éléments avec les données de la chaîne de requête. N'oubliez pas de rechercher des ressources en ligne à propos de 'HTML5 History API'.

J'espère que cet exemple vous aidera.

Source

2016-07-06 16:19:33

Utilisez le bouton Précédent avec le formulaire AJAX?

Répondre

Questions connexes