azicchetti / jquerymobile-router

A router/controller for jquery mobile. Also adds support for client-side parameters in the hash part of the url. The routes handles regexp based routes. This plugin can be used alone or (better) with Backbone.js or Spine.js, because it's originally meant to replace their router with something integrated with jQM.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems when link has param

kagemusha opened this issue · comments

I'm having problems with links with urls with params.

Links w/out params are fine, like: Waverly One
But with params fail: Waverly One

The problem seems to be in

_processRoutes: function(e,ui,page){
....
} else if (!this.documentEvts[e.type] && page && !$(page).jqmData("url")){
return;
}

Seems !$(page).jqmData("url") is returning null, so _processRoutes returns without checking the routes object.

Any thoughts?

Hi,
parameters in the hash part of the url should be supported without problems.

Seems like the router script isn't loaded before jquery mobile.
Could you please check if that's the problem?
Under examples/test.html there's a super simple example showing how to use the router with hash parameters, you may want to have a look at it.

By the way, which jquery mobile version are you using?

Let me know if your problem is solved.

Cheers

I have the router script before jqm as mentioned.

I'm using 1.1.0rc1 which I thought might be the problem, but i tried it with your example and seems to work. So still not sure the problem.

Please post your example code, so I can be more helpful.

On a side note (this shouldn't be the source of your problems, though), the rc1 version has internal support for parameters in the hash, please see:

https://github.com/azicchetti/jquerymobile-router/issues/31

To cut a long story short, to avoid double transitions with the back button, you need to remove these lines from the router:

      if ( u.hash.indexOf("?") !== -1 ) {
        var page=u.hash.replace( /\?.*$/, "" );
        // We don't want the data-url of the page we just modified
        // to be the url that shows up in the browser's location field,
        // so set the dataUrl option to the URL with hash parameters
        data.options.dataUrl = u.href;
        // Now call changePage() and tell it to switch to
        // the page we just modified, but only in case it's different
        // from the current page
        if (    $.mobile.activePage &&
          page.replace(/^#/,"")==$.mobile.activePage.jqmData("url")
        ){
          data.options.allowSamePageTransition=true;
          $.mobile.changePage( $(page), data.options );
        } else {
          $.mobile.changePage( $(page), data.options );
        }
        // Make sure to tell changePage() we've handled this call so it doesn't
        // have to do anything.
        e.preventDefault();
      }

Difficult to put example as doing stuff w some libraries i've created.

But issue seems to be because i dynamically create and load pages into the dom on load of the main page. Seems the router works fine without a parameterized url, but doesn't handle the parameters.

So the workaround for now seems to be just to hard-code into the html those pages which need params.

Dynamically injected page can be tricky to debug.
Could you please post the page template you're using?
I think you're not setting the id or data-url properly (I put my bet on the id) for newly created pages

It was the data-url prop. If this is set it works dynamically. Tks for the help!

I guess I have a very similar problem, first url with qs is ignored by the router (looks like data-url not set might be the reason), when I click first on the second link (the same hash but no qs), data-url gets set and then both links (with and without qs start to work). Any idea how to fix it?

Router:
{ '#chapter(?:[?](.*))?': { events: 'bs', handler: renderChapter } }

Html:
<a href="#chapter?x=1" data-role="button">#chapter?x=1</a>
<a href="#chapter" data-role="button">#chapter</a>