login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jquery history.js 3de keer gaat hij fout (Opgelost)

Offline Wijnand - 04/11/2013 16:28
Avatar van WijnandModerator Ik heb deze code:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function() {
  2.     var History = window.History;
  3.     if (!History.enabled) {
  4.         return false;
  5.     }
  6.     History.Adapter.bind(window,'statechange',function() {
  7.         var State = History.getState();
  8.         $('#ajax-container').load(State.url);
  9.     });
  10.     $('a').click(function(evt) {
  11.         evt.preventDefault();
  12.         History.pushState(null, $(this).text(), $(this).attr('href'));
  13.         console.log($(this).attr('href'));
  14.     });
  15. });


Ik maak gebruik van de history.js extension en alles gaat tot nu toe goed. Alleen als ik ga rondklikken werkt hij voor de eerste 2 keer wel, daarna gaat hij de 3de link echt 'verversen' (dus wat hij zonder history.js doet). Ik kan dat zien aan de console.log die gecleared wordt door de browser als je naar een nieuwe pagina toe gaat.

Doe ik iets fout?

5 antwoorden

Gesponsorde links
Offline Thomas - 04/11/2013 17:22
Avatar van Thomas Moderator Geen idee wat hier allemaal gebeurt, maar wellicht heb je hier iets aan:

http://stackove...hashchange

er staat oa:
- State.data.url i.p.v. State.url, wellicht maakt dat iets uit?
- You need to populate the History state each time somebody clicks on a (non-page refreshing) link for which you want to track the history. doe je dat? (wss wel met pushState, die eerste parameter, mag die leeg zijn, in link hierboven staat daarin een tuple, wellicht breekt je javascript (stilzwijgend) omdat je pushState niet goed aanroept, dan gaat mogelijk de pagina "door"?)

En misschien geeft het artikel je wel inspiratie om het anders aan te pakken, twee manieren om hetzelfde te bereiken worden besproken geloof ik.
Offline Wijnand - 05/11/2013 09:26 (laatste wijziging 05/11/2013 10:25)
Avatar van Wijnand Moderator Ik heb wijzigingen aangebracht maar het geeft nog geen verschil.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function() {
  2.     var History = window.History;
  3.     if (!History.enabled) {
  4.         return false;
  5.     }
  6.     History.Adapter.bind(window,'statechange',function() {
  7.         var State = History.getState();
  8.         $('#ajax-container').load(State.data.url);
  9.     });
  10.     $('a').click(function(evt) {
  11.         evt.preventDefault();
  12.         console.log($(this).attr('href'));
  13.         var target = $(this).data('target');
  14.         var url = $(this).attr('href');
  15.         var title = $(this).text();
  16.         console.log(target);
  17.         History.pushState({ url: url, target: target }, title, url);
  18.  
  19.     });
  20. });



EDIT:
Dit is de oplossing, je moet de History.Adapter.bind iets wijzigen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function() {
  2.     var History = window.History;
  3.     if (!History.enabled) {
  4.         return false;
  5.     }
  6.     History.Adapter.bind(window,'statechange',function(evt) {
  7.         evt.preventDefault();
  8.         var State = History.getState();
  9.         $('#ajax-container').load(State.url);
  10.     });
  11.     $(document).on('click',"a[target!='_blank']",function(evt) {
  12.         evt.preventDefault();
  13.         History.pushState(null, $(this).text(), $(this).attr('href'));
  14.     });
  15. });


Ik weet niet precies de reden, maar dit werkte bij mij wel! :-)
Offline Thomas - 05/11/2013 16:26
Avatar van Thomas Moderator Mogelijk triggert een click-event het statechange-event? Misschien "vuurt" je Adapter-bind-callback functie soms eerder dan je mouseclick-callback functie? In dat geval wordt je mouseclicks standaard gedrag (het "volgen" van de link) niet tegengehouden. Je zou eens kunnen kijken wat het eventtype is van de "evt" in je eerste callback functie (waarschijnlijk "click"?). Dit lijkt mij de meest voor de hand liggende oorzaak. En het is belangrijk te weten waarom het bovenstaande wel werkt!

Dus zoiets:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. ...
  2. History.Adapter.bind(window,'statechange',function(evt) {
  3.     evt.preventDefault();
  4.     console.log('event that triggered statechange: '+evt.type); // debug!
  5.     var State = History.getState();
  6.     $('#ajax-container').load(State.url);
  7. });
  8. ...


En waarschijnlijk worden dus beide callbacks altijd getriggered, en meestal gaat het in de goede volgorde . Dat is altijd iets waarin je je snel vergist, dat bepaalde zaken parallel verlopen in jQuery.
Offline Wijnand - 05/11/2013 16:27
Avatar van Wijnand Moderator FangorN, ik had dit al opgelost :-) (zie punt boven jouw post)

Toch bedankt!
Offline Thomas - 05/11/2013 16:44
Avatar van Thomas Moderator Dat weet ik, maar het gaat zelden om de oplossing. Het begrip is vele malen belangrijker!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.173s