Conception avec PushState | autre solution ?
Bonjour,
J'effectue un développement sous symfony 2 utilisant le routage de celui-ci et twig.
J'ai intégré des appels Ajax pour éviter des chargements de page complètes. Comme tout le monde je souhaite néanmoins qu'un url corresponde à une donnée. J'utilise donc PushState de la bibliothèque History.js
Scénario.
1 - Je suis sur ma page accueil. J'effectue une recherche.
2 - Je tombe sur une nouvelle page affichant un ensemble résultat.
3 - Je clic sur suivant, pour afficher les résultats suivants, sans recharger la page, juste mettre à jour le bout d'interface nécessaire. J'utilise donc un appel Ajax.
etc.
Arborescence
Sans Hisotry :
1 - Accueil.
2 - resultat/
3 - resultat/
etc...
Avec :
1 - Accueil/
2 - resultat/page-1
3 - resultat/page-2
etc..
Si je m’arrête là, la navigation via le navigateur est correct.
On pense tout est génial. Hors je me confronte à un problème allant plus loin.
4 - Je demande le détail d'une recherche, qui est un appel "normal" url.
1 - Accueil/
2 - resultat/page-1
3 - resultat/page-2
4 - details/2
Je clic maintenant sur "précédent", retrouvant cet état :
1 - Accueil/
2 - resultat/page-1
3 - resultat/page-2
je re-clic sur précédent...
1 - Accueil/
2 - resultat/page-1
3 - resultat/page-2
"bug"
De nouveau sur précédent
1 - Accueil/
2 - resultat/page-1
"ok"
J'ai un problème de conception selon moi et je ne vois pas comment le résoudre.
Voici le code JS de la page "resultat".
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<script type="text/javascript">
$(document).ready(function()
//Première visite, on effectue un historique
//"div_p_result" est le conteneur changeant à chaque appel Ajax
// vpageStart et le numéro de la page courante (en effet, l'utilisateur peut très bien faire un copier coller d'une url et accéder directement pour la //première fois de cette interface à la page N
var stateStartObj = { data: $('.div_p_result').html() };
History.pushState(stateStartObj, window.document.title, "page-"+vpageStart);
History.Adapter.bind(window, 'statechange', function()
{
var State = History.getState();
History.log(State.data, State.title, State.url);
// On met à jour le conteneur
$('.div_p_result').empty();
$('.div_p_result').append(State.data.data);
});
$('#test').click(function()
{
// J'avoue, il y a surement mieux comme méthode de calcul de paramètre d'url...
loc='{{ app.session.locale}}';
//récupére l'url
var lien = document.location.href;
// décompte l'url
var stlien = lien.split("/");
//Nb items
lg = stlien.length;
//récupére la donnée continent (tableau commence à 0 )
var name = stlien[lg-2];
//récupére la donnée page
var vpage = stlien[lg-1];
//récupére la valeur page
vpage = Number(vpage.split("-")[1]);
$.get(Routing.generate('lookForByContinentPage', {'name':name,'page':vpage, '_locale':loc}),
function(data){
var stateObj = { data: data };
var title = window.document.title;
var title = title.split("|")[0];
History.pushState(stateObj, title+"| page-"+vpage, "page-"+vpage);
});
}
);
</script>
<div class="button_look">
<input type="button" id="test" class="input_lookfor" value="go">
</div>
<div class="div_p_result">
{% for result in listResult %}
etc ... |
Comme vous le voyez, lors du premier appel de la page "resultat", on effectue un pushState pour "mémoriser" le contenu de conteneur (Sans cela, lors d'un forward jusque la "page-1" (dans l'exemple), on aurai le "conteneur" vide.
Ensuite on effectue un PushState à la suite de chaque appel Ajax.
Ensuite on passe à une autre page, exemple "détails d'une recherche" (appel url), le navigateur reprend la main de l'historique.
Hors, lorsque de l'on revient, "bouton précédent", on recharge la page "resultat" et donc on re-effectue un pushState, ce qui donne ce scénario montré plus haut. Ce qui n'est pas souhaité du tout comme vous l'avez compris.
Je n'arrive pas à voir comment je peut faire pour pallier ceci, qui est au bout du compte, une alternance Manipulation Historique ajax/js et Historique classique.
Si vous auriez une vision ?
Et pour compléter ceci, est-ce que History.js suffit, ou dois-je implémenter autre chose (angular/backbonne , que je n'utilise, ayant déjà le système de routage symfony et twig, pensant ne m'être utile..).
Merci de m'avoir déjà lu.
