Comment modifier l'historique mobile jQuery Comportement du bouton Précédent

Je vais commencer cette off avec des j'ai fait des recherches un peu, mais pas de solution qui résout ce qui semble comme il devrait être un simple JQM modification.

J'ai un vin examen webapp qui a la vue suivante de l'utilisateur courant:
http://5buckchuck.com/

Type de vin > liste de Vins > Vin de Détails > le Vin examen (redirection via django backto ) > Vin de Détails mise à jour à partir de l'examen

Ce que je veux, c'est quand l'utilisateur appuie sur le bouton de retour, il devrait revenir à la liste des vins. Ce qui se passe actuellement, c'est le Vin de la vue de Détail est rechargé. Il prend en appuyant trois fois sur retour pour revenir à la Liste des Vins. 🙁

Mes pensées pour résoudre ce furent deux:

  1. D'en réunir les 3 derniers éléments de l'histoire de la pile, si le dernier élément de l'histoire de la pile de Vin Examen. J'ai eu un moment difficile essayer de connaître le fonctionnement de la dernière histoire de l'objet pour obtenir les pageURL. J'ai le sentiment que cette solution est un peu trop fragile. 
    var last_hist = $.mobile.urlHistory.getActive();
last_hist.data.pageURL;
  2. La deuxième pensée a été de remplacer le bouton retour de comportement de sorte que le bouton de retour à partir du Vin de la vue de Détail serait toujours revenir à la liste des Vins de vue 
    $('div#wine_detail').live('pageshow',function(event, ui){      
  $("a.ui-btn-left").bind("click", function(){
    location.replace("/wines/{{wine.wine_type}}/#");
  });   
});

Il est probable que la meilleure façon de le faire, mais je suis un peu à court d'idées.

Mise à jour:
Je continue donc à travailler sur ce avec assez peu de résultats. Sur chose que j'ai trouvé était c'est ce que j'ai fondamentalement besoin pour travailler: window.history.go(-3)

à partir de la console c'est exactement ce dont j'ai besoin.

J'ai donc essayé de liaison, c'est le bouton de retour comme tel:

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
   if (last_url.match(review_url) )
     {
       $('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {  
         console.log("click should be bound and going back in time...")
         window.history.go(-2);
         });
   }
   else
   {
     console.log('err nope its: ' + last_url);
   }
 });

Pas de dés, quelque chose interupts de la transaction...

source d'informationauteur bmartinek

  1. 3

    Je préfère ne pas épissure/pop/pousser avec le urlHistory. Comment rediriger sur pagebeforechange comme suit:

    $(document).on("pagebeforechange", function (e, data) {

    var overrideToPage;

    //some for-loop to go through the urlHistory TOP>DOWN
    for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {
        //this checks if # = your target id. You probably need to adapt this;
        if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {
            //save and break
            overrideToPage = $.mobile.urlHistory.stack[i].url;
            break;
        }
        //set new Page
        data.toPage = overrideToPage;
    }
});

    Cette capture le bouton de retour changePage appel et redirige vers la page que vous souhaitez. Vous pourriez tout aussi bien définir de données.toPage = winelist directement bien sûr.

    Je ne fais que avec le n ° des pages internes, mais il shoudn pas être si difficile à définir avec la winelist.html etc.

    Pour plus d'informations, consultez la page de l'événement dans le JQM docs

  2. 2

    Pourquoi ne pas avoir un bouton de retour dans la section d'en-tête de votre page? Quelque chose comme ceci:

    <div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->
  3. 1

    J'ai lutté avec cette très récemment. Après réflexion, j'ai réalisé que je pouvais réécrire mon JQM application à utiliser les menus "windows" pour les pages que je ne veux pas dans mon histoire. Cela a fini par être un plus facile et plus propre résoudre le problème que de déblayage autour avec l'historique du navigateur.

    Maintenant, les utilisateurs peuvent intuitivement utiliser le bouton précédent du navigateur, et je n'ai pas de code d'application des boutons.

    La seule chose que vous devez vous assurer, c'est que les fenêtres pop-up ne sont pas eux-mêmes d'en faire l'historique du navigateur, alors assurez-vous de définir l ' "histoire" option à false:

    $('#some_popup').popup( { history: false } );
  4. 0

    Ok, donc, la solution a été de près à la mise à jour que j'ai posté. Le problème avec la solution précédente est qu'il y a de nombreuses choses bind-ed sur le bouton "Retour". Alors que ma nouvelle lier l'action peut avoir travaillé parfois, les autres actions auraient lieu trop, j'ai essayé unbind() mais toujours pas de worky.

    Ma solution est un peu de la fumée et des miroirs. - Je vérifier pour voir si la page précédente a été l'examen de la page et ensuite, si si, je remplace le vieux bouton de retour pour mon nouveau bouton faux avec l'histoire de l'étape de la sorte:

    $('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
  if (last_url.match(review_url) )
    {
      $('a.ui-btn-left').replaceWith('<a href="" id="time_machine" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>');

      $('#time_machine').bind( 'click', function( ) {  
        console.log("click should be bound and going back in time...")
        window.history.go(-3);
        });
    }
  else
    {
      console.log('err nope its: ' + last_url);
    }

    Il est exactement le même, et personne n'est le plus sage. il pourrait sans doute être améliorée par l'utilisation de la jQm méthode pagebeforeshow de sorte que l'utilisateur pourrait ne jamais voir le swap. Espérons que cela aide quelqu'un.

  5. 0

    Si vous avez la situation à laquelle vous souhaitez que le bouton de fermeture se référer à un arbitraire (pas la dernière) page, vous pouvez également changer de premier de la page cible et ouvrir la boîte de dialogue par la suite. Par conséquent, le bouton fermer dans la boîte de dialogue ouvrir la page cible.

    //First: change to the target page
$.mobile.changePage('#target_page');

    Ensuite ouvrez la boîte de dialogue comme ceci.

    //Second: change to the dialog 
window.setTimeout(
   //for some reason you have to wrap it in a timeout  
   function(){
      $.mobile.changePage('#dialog');
   },
   1
);

    Maintenant, vous pouvez ouvrir la boîte de dialogue et le bouton fermer ouvrira #target_page.

    Avantages:

    • solution fonctionne pour de simples boîtes de dialogue plutôt que de retirer tous les boutons fermer toutes les boîtes de dialogue
    • intégration transparente sur un seul point de code
    • histoire de manipulation n'est pas nécessaire
  6. -1

    J'ai vu des problèmes similaires avant lors de l'utilisation de jquery mobile et il est abordé dans la documentation. Lors de la configuration de votre Javascript "au début de votre page" utiliser pageinit au lieu d'être prêt ou peut-être dans votre cas pageshow. Je pense que cela permettra de répondre à votre question sans avoir à contourner l'histoire de la file d'attente.