Search code examples
jqueryeventsjquery-mobilenavigationhashchange

why is hashchange firing twice in Jquery Mobile backwards transitions?


I'm lost.... I'm trying to redirect Jquery Mobile transitions on pagebeforechange - as per the JQM docs.

This should work for both forward and backward transitions. While it technically does I'm running into problems on backwards transitions. First one works, afterward for every back-btn click I'm getting 2+ backwards transitions.

I've ruled out the URL (now passing only full paths vs. paths and objects (like $('#page') ); That wasn't it. Now I'm looking for another culprit and can't find it.

Maybe someone else sees something or can give me a hint. Thanks for taking a look:

Brief setup with comments:

 // hashchange listener - just to see when hashchange fires
 $(window).on('hashchange', function(e, data){
     console.log("hashchange detected" );
     });

 // re-router
 $(document).on("pagebeforechange", function (e, data) {

       // block multiple events
       if(data.options.fromHashChange == true) {
           if(self.options.$blockMultiPbc == true) {
           console.log("blocked 1");
           self.options.$blockMultiPbc = false;
           return;
           }
        }

       // block $('#page') page-calls (triggered from trailing hashchange
       if(typeof data.toPage !== 'string') {
           console.log("blocked 2");
           return;
           }

        // redirect
       if(data.options.fromHashChange == true) {
            console.log("executing");
            // for hashchanges
            self.panelHash(e, data);
            } else {
                // for changepages
                self.panelTrans(e, data);
                } 
        });

       // panelHash function - here I reconfig data.options to redirect
       panelHash: function( e, data ) {

          // block multiple pagebeforechanges
          self.options.$blockMultiPbc = true;

          if ( some condition ) {
             console.log("MULTIVIEW");
             // tweak changepage options
             data.toPage = ...newULR (not $('object'))
             data.options.fromPage = ...new fromPage
             data.options.changeHash = true;
             data.options.reverse = true;
             console.log( newURL );
             } else {
                // JQM does this
                }
           }

Here is a sample page: sample

To reprodude click page2 menu, page3 menu, clear the console, click browser back once, check the console (SINGLE RUN), click browser back again, check the console (TWO RUNS...)

QUESTION
I'm not looking for a solution - just some ideas on what might be causing the 2nd backwards transition to fire twice.

Thanks for some ideas!

EDIT
The more consoles I'm adding in the sript the more it becomes apparent, that the 2nd unwanted hashchange is coming after a short delay. I first thought it would be related to JQMs fake_onhashchange event, but removing this altogether did not do the trick. Keep on seaching.

EDIT2 - found an issue on Github - so it's not my script... phew... Still hints are welcome :-)


Solution

  • Ok. I think I found it. It's a bug in the pushstate handler.

    Details and possible fix on Github