2013-08-14 3 views
2

Mon site Web utilise AJAX déclenché par hashchange (pour le rendre plus convivial). Le problème que je rencontre est que lorsque je clique sur "soumettre" dans un formulaire, toutes les données de formulaire serialize() qui doivent être envoyées via $.post() sont perdues. Je le sais parce que je reçois l'alerte "Flag 1" après avoir cliqué sur submit, et que divers autres tests (alerting, écho, etc.) montrent que c'est vrai.Quelle est la meilleure façon de forcer un hashchange?

Voici mon code actuel:

$(document).ready(function() { 

var data = ''; 
var hash = ''; 
newPage(); 
alert('Flag 1'); 

$(window).bind('hashchange', function() { 
    hash = window.location.hash; 
    if (hash == '') { 
     path = window.location.pathname; 
     hash = '#' + path.replace(/^\/+/, ''); 
    } 
    data += '&func=' + hash; 
    var xhr = $.post(hash, data, function(result) { 
     $("maincontent").html(result); 
    }) 
    .done(newPage); 
}); 
// Initialize vars and handle new form elements 
function newPage() { 
    data = ''; 
    $('form').submit(function() { 
     data = $(this).serialize(); 
     // Flag 2 - What do I do here? 
    }); 
} 
// Load ajax content on first run of document 
if ($('#maincontent').html() == '') 
    $(window).trigger('hashchange'); 

}); 

Ce que je suis en train de faire est manuellement feu un événement hashchange tout en changeant l'URL. Le problème est que si je mets juste window.location.hash = $(this).attr('action'); puis return false; où est le commentaire "Flag 2", alors je finis par recevoir une corbeille indésirable dans l'URL, peut-être parce que le hashmark est encodé pour une URL (...% 23, etc) .

Je me demande quelle est la meilleure façon de définir le hachage, et s'il existe une façon plus simple de faire ce que je suis en train de faire pour commencer.

(Je suis aussi ouvert aux commentaires suggérant des approches alternatives pour le style de navigation, je suis en train de réaliser)

Répondre

0

Eh bien, je crois savoir qu'il ya beaucoup d'erreurs qui font cela. Mais nous avons d'autres options pour cela, vous aimerez sûrement:

  1. jQuery Histoire Plugin: http://plugins.jquery.com/history/ (Demo: http://4nf.org/)
  2. Histoire JS: https://github.com/browserstate/history.js/
  3. Mais je recommande HTML5 history.pushState si vous êtes prêt à éviter support de navigateur plus ancien. (Démo: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)

Bonne chance !!

Questions connexes