Thanks for this excellent example!
I'm wondering if there's a way to support switching the event from bs to bc in order to support client side rendering of header and footer as well.
When using bs each click on a detail leads to a correctly detail page.
When using bc instead only the first click will be resolved, further clicks doesn't trigger the event and the first rendered page is called again instead.

Reading your explanation at #6 indicates that this is the expected behavior, but maybe there's nevertheless a way :).

Rainer

Hi,

I'm facing a new issue, my project is doing great on my chrome browser and i started to test it on mobile and it's not working at all.

The android browser shows up a blank page... I tried to debug it with weirne but i didn't succeed to get error log.

My code is here: https://github.com/tdurand/faq-app-client-mobile

And you can test it here (from you android browser and you desktop browser): http://tdurand.github.com/faq-app-client-mobile/

Any ideas...?

Thanks a lot

PS: i have an android 2.3, i tried with opera mobile and it worked

This may not be a bug in jquerymobile-router, but I'm not sure where else to post this.

I'm building an app with RequireJS so that in production all of the javascript files get combined into one. In development by the time my router has loaded everything is ready for me to create my router. If I add any delay to it, the router gets created but it fails to trigger for the first page. In production where all of the files have been combined it's too early to initialize my router. It actually causes an error down in jquery mobile, but a delay of 10ms seems to work, but a delay of 1000ms is too long and I miss triggering the first page.

How can I find this window of opportunity where creating my router will work with the first page?

In order to provide a client-side rendering of Page content, I want to observe pagebeforeload and receive the event, data parameters so that I may event.preventDefault() and then data.deferred.resolve(), as described in Page load events. Is there another way to achieve this without the event and data?

Hi I have a requirement, where i need to display a dialog on the index page itself. Below is the code snippet

var MainController = function(){

this.showSearchDialog = function(){
$.mobile.changePage('#popup', {transition:'fade', role:'dialog', reverse: true});
    console.log("showing customer search window");
}

}
var mainController = new MainController();
new $.mobile.Router([
{ "contentPage": { handler: "showSearchDialog", events: "h,s" } }
], mainController, { ajaxApp: true });

I am able to see the log in the console, but the dialog does not show up, i am adding the dialog HTML to the page dynamically.
$.ajax({
url: "pages/CustomerSearchDialog.html",
success: function (data) { $('body').append(data); },
dataType: 'html',
async: false
});
When i hard code the dialog's code in the index, i am able to see the search dialog. Please advice.

I see in the readme that there is an issue with the "empty hash" on the first load of a multipage application. Is there any way to trigger some code when showing the first page (the one with the empty hash)?

I've tried creating a defaultHandler, but that doesn't seem to get trigger on the first load.

I've got a mobile app whose homepage is, /m/, but users can navigate to and start from any subpage, such as /m/foo. On both of these (and many other pages), I have a dialog page with an id like, id="bar". The router needs to route on the whole path of the page, so that I've set ajaxApp to true.

For the purposes of the app, I have to programmatically use changePage() to show the dialog.

When the first page is /m/foo and the hash is empty, changePage("#bar") will show the dialog, and I get the whole series of transition events for the dialog, each given the route #bar. If I navigate to another page, though, say /m/foobar, such that the url is then /m/foo/#/m/foobar/, changePage("#bar") doesn't shown the dialog, but a pagebeforechange event fires with a route of #bar.

However, if I use changePage("/m/foo/#bar"), the dialog will display in all cases, and the route, /m/foo/#bar, matches my pattern '#bar'.

I could go with this second option by probably using changePage(window.location.pathname + "#bar"), but I'm wondering if there's a way by which I can avoid that.

When I upgraded jquery from 1.7.1 to 1.7.2, I get a js error at line 55 of jquery.mobile.router.js when visiting the first page of my app. The error is on this conditional test:

if ( u.hash.indexOf("?") !== -1 ) {

Here u.hash is undefined, so it logs:

Uncaught TypeError: Cannot call method 'indexOf' of undefined

When using 1.7.1 u.hash is an empty string : "" , so the function call still works.

The problem could be fixed by adding this test :

if ( u.hash && u.hash.indexOf("?") !== -1 ) {

But there seems to be a deeper problem behind this change of behaviour.. Actually when I look at the 'u' object its content seems quite different.

I get it, I guess jquerymobile itself is not compatible with 1.7.2, that's why even after this jqmrouter problem gets fixed I get more errors down the line...

I suppose I can carry on logging this issue, at least if other people find the same problem they will understand why, and I imagine adding a simple check for u.hash won't harm jquerymobilerouter either.

When jqm changes page it triggers the pagebeforechange event twice,
before 1.1.0 RC1 this was fine, I assume the router handled this and only called changePage and route handlers once

However it seems to being called 4 times now and triggering changePage twice and the handlers twice, when you navigation the history with the jqm back button or the browser buttons you get nasty double transition, first back and then forward to the same page.
It seems like the _jqmrouter_handled option seems to be set on the data passed.
However on the 3rd and 4th calls to pagebeforechange have the allowSamePageTransition set to true

Something else to note, it only happens when the page you change to in history has query parameters
eg. #section?id=11
pages without parameters don't trigger the double transition.
eg. #page

Out of interested, commenting out these two lines:

      67: data.options.allowSamePageTransition=true;
      68: $.mobile.changePage( $(page), data.options );

fixes this specific issue, i suspect it might break something else though?

Also, switching back to 1.0.1 returns everything to how it was, handlers and changePage is only triggered once.

Appreciate your help.

I inserted a log call on line 41 ofjquery.mobile.router and on the first line of the handler for the page I was testing with:

  console.log('<<pagebeforechange>>');

Log with 1.0.1

<<pagebeforechange>>  jquery.mobile.router.js:41
<<pagebeforechange>>  jquery.mobile.router.js:41
showSection Handler   jam.editor.actions.js:150

Log with 1.1.0-RC.1

<<pagebeforechange>>  jquery.mobile.router.js:41
<<pagebeforechange>>  jquery.mobile.router.js:41
showSection Handler   jam.editor.actions.js:150
<<pagebeforechange>>  jquery.mobile.router.js:41
<<pagebeforechange>>  jquery.mobile.router.js:41
showSection Handler   jam.editor.actions.js:150

Just as a heads up. I swapped out 1.1.0 RC1 in an existing application, which broke functionality.
At a first glance it seems that none of the events are firing any longer. Going back to 1.0.1 for the time being.

Rainer

Is the JQM router project compatible with/ready for JQM 1.1 Final?

Thanks,

TR

I open a dialog like so:

var $page = $('#login');
$.mobile.changePage($page, {role: 'dialog', hashChange: false, transition: 'slidedown'});

which works as expected. When opening another dialog from the first one in the click event handler like so:

var $page = $('#signup');
$.mobile.changePage($page, {role: 'dialog', hashChange: false, transition: 'slidedown'});

it seem to break the router, I can't go anywhere from here.

Can't see any exceptions or errors thrown in Chrome dev tools.

Over at jQm they recommend loading a Google map inside an iFrame to use with the new popup widget, see:

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html

I have managed an implementation with Backbone and require, but have an issue when the popup closed in that I traverse back to a black page. Then I need to click the browsers back button but this brings me not to the view the popup was opened.

My guess would be that the history of the iFrame is in the way. If so, is there a way to prevent that?

From a smartphone you can access a live demo, go to:

www.yxyapp.com

click on "At your service" --> "Real Estate" and there on the first item in the list. In the next view click on "Deals" in the navigation bar. There swipe down and click on the "View on map" button and the map will popup. Tap anywhere beside the map to close it.

If you want to check from a computer please go to:

www.yxyapp.com/mobile/index.html

Hope that helps to track down the issue.

when using with Prototype or a similar framework that extends Array functionality (http://www.prototypejs.org/api/array), the for... in method of looping (line 147 jquery.mobile.router.js) will treat all extended array methods as properties to loop through, and will cause a lot of errors!

Hi, I have been looking at using your plugin as a means to route calls to my controllers which I am using jQueryMX (part of the JMVC framework) for.

I have set up a the router to match against controller & action params, and am using router.getParams() to get their values. Any idea how I would go about mapping these to call a specific controller and action?

Hey Andrea,

Was messing around with the router again and noticed the dev is v0.9 but the production is v0.81. Why not distribute the dev version?

This line https://github.com/azicchetti/jquerymobile-router/blob/master/js/jquery.mobile.router.js#L44 fails with '#next' as value of u.hash - routing does not work:

u.hash.indexOf("?") answers -1
u.hash.indexOf("?") !== -1 answers false
u.hash.indexOf("?") != -1 answers false
u.hash.indexOf("?") == -1 answers true

Am I missing something? I've been going around in circles to be sure I'm using the thing correctly. Also, it seems the syntax of the simple form of '#hash':'functionname' could be done as 'hash':'functionname'. There seems to be a lot of duplication in a routing file.

Hi, can we add the events and the handler objects like the below

var eventsAndMethods = {};
eventsAndMethods.test = {};
eventsAndMethods.events = "bs";
eventsAndMethods.handler = "showIndexPage"; // This method will be available in the handlerObj

jqmRouterInstance.add([eventsAndMethods], handlerObj);

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?

I working on an app using jQuery v1.7.1, , jQM v1.1.0 RC1, require and backbone.
In the index.html I have for each page some html fragments like this:

  <div id="category-content" data-role="content"></div>    

and in the router for that page I have:

"#category([?].*)?" : { handler: 'categoryHandler', events: 'bs'},

In the categoryHandler I fetch some data to populate a listview. This seems to work as I thought it should be right routing to the page with the listview, but when clicking the page or browser back button from there the categoryHandler gets invoked twice.

What do I miss?

OK, it didn't take me long to figure this out, but it did slow me down a little, since regexes that I was sure would match the URL hash were coming up empty.

A short mention of the fact that backslashes aren't allowed would be great.

Even better would be to find a way to make them work, but if that isn't possible, a mention in the docs would be helpful.

Thanks!

The getParams documentation contains:

getParams(hashPartOfTheUrl): Returns an object with the parameters encoded in the url or null if nothing's found. For instance, if you have something like: #detail?id=3&foo=bar and call routerInstance.getParams("?id=3&foo=bar") you'll get: javascript { id: "3", foo: "bar" }

I think

routerInstance.getParams("?id=3&foo=bar")

should be something like:

routerInstance.getParams(match[1])

I supposed to add this module into my progress.
It 'll show a error as "Uncaught TypeError : undefined is not a function" after I run "var router = new $.mobile.Router(...);"
Is there anyone meet this problem ?
I am surely that I added the "jquery.mobile.router.min.js" into my progress.
Could anyone give some tips about this question?

My app is based on jQM, this router, backbone.js, require.js and runs on node.

The app routes and handlers reside all in one file. While the app is growing this file becomes quite huge. Is my approach the preferred design or is the a better way?

Hi there!

I'm working on a project where we are needing to do dynamic page injection in the DOM to dynamically build pages to navigate to. My initially when I was working with mobile router I thought the 'bc' event was bound to pagebeforechange which is what the jquery mobile documentation recommends to work with in order to dynamically inject pages. In fact though bc maps to pagebeforecreate which is run much later in the page lifecycle than pagebeforechange. Do you know of any way to work with the router to have a controller method be fired on pagebeforechange?

Thanks for your time!

I'm seeing multiple routes matched when they share a common prefix. Seems the first defined route should take precedence:

var router=new $.mobile.Router([
  {"#blahs_year\\?year=(\\d{4})": {handler: Controller.blahs_year, events: "bs,h"}},
  {"#blahs(?:\\?tab=(.*))?": {handler: Controller.blahs, events: "bs,h" }}
], {}, {
  defaultHandler: function(type, ui, page) {
    console.log("Unmatched route (" + type + ", " + ui + ", " + page + ")");
  },
  defaultHandlerEvents: 'bs,h'
});

I'm getting around it by changing the route hash, but I think it would be better if only a single route was matched.

With a route configured like this:

var mainController = new MainController();
new $.mobile.Router([
    { "#nonExistingPage": { handler: "nonExistingPage", events: 'bC' } }
], mainController);

And a handler like this

var MainController = klass({

    nonExistingPage: function() {
        console.log('nonExistingPage')
        $('body').append('<div data-role="page" id="nonExistingPage" data-url="nonExistingPage"><h1>Hello World</h1></div>')
    }

});

I see that the nonExistingPage handler is always called twice when navigating to this page.

I can of course account for that, but it seems like a bug none the less.

When navigating from mysite.com/index.html#page-name to mysite.com/index.html#page-name?info the routers are fired, however when navigating back, using the browser back button no events are fired.

Is the intended outcome?
Is there a work around?

Only all of my pages are templated and I have no way of re-rendering them when navigating backwards through the site.

Hi,

Thanks for this great project.

I'm trying to solve a problem, i want jquerymobile-router to match this kind of url:

mysite.com/#category/28

My regexp is :

#category/\\d+

I'd tried it with

"#category/28".match(new RegExp("#category/\\d+"))     

and it worked, but i don't why jquerymobile-router is not triggering my handler... I have this error:

Uncaught Error: Syntax error, unrecognized expression: #category/28[data-role="page"] 

My router code.

function($, _, Backbone,jqmr,IndexView) {
    var Router=new $.mobile.Router({
    "#index":   { handler: 'index', events: "bc" },
    "#category/\\d+":   { handler: 'category', events: "bc" },
  }, {
    index:function(){
        console.log("index");
        // will render home view and navigate to homeView
        var indexView=new IndexView();
        indexView.render();
    },

    category:function(e,m) {
        var params=m;
        console.log(m);
    },

    default: function(){
      console.log('No route found.');
    }
  }, {
    ajaxApp: true,
    defaultHandler: 'default'
  });

Thanks a lot for your help

Hi is it possible to initialize an empty router and then add routes to it?

There's little information ANYWHERE on the best way to catch an error in the form and display a dialog.

When I press the "next" button on a page, it checks to see if a field has a valid value. If it does, it sets the value on the model and allows the pagechange to continue as normal. However, if the validation fails, I'd like to redirect to a custom error dialog popup. I do this using the manual "changePage" method. This issue is that the dialog comes up, but quickly changes to the next page as if there was no error.

I think the problem is I have no way to get a handle on the event to call the "preventDefault" method to stop going to the next page. Am I on the right track?

Jevin

It's really hard to find the specific revision of a specific revision.

Please tag your releases and make them available via the github download facility to ease working with your project.

Most of my app follows the multipage model but there are one or two edge cases when I do a changePage and refer to the page's DOM ID instead of its data URL. This works correctly with JQM but JQMR invokes the events for the previously loaded page due to the lack of a URL change.

Example:

1. Browser is at http://test.com/index.html (page ID = "index")
2. Browser navigates to http://test.com/index2.html
3. JS command: $.mobile.changePage($("#index"));
4. Page changes to index.html but URL remains at index2.html. All page show events are reinvoked for index2.html when the page change events fire.

I know this is a pretty weird scenario but just wanted to make sure that it got documented.

That is, the router doesn't work with the new version of the jQuery Mobile.
Could u please have a look on this issue?
Thanks

I was curious if jquerymobile-router supports PushState, to eliminate the need for hashes on modern browsers.

Tx, Andy

Hi,

I have separated my pages in multiple files and am loading and caching the sub-pages at pageinit of the root page, so navigation is still done with hash changes and I can re-use pages.

Now I have a subpage at /path/file.html which contains a page with id #foo. When opening a link #foo?bar1=baz1 while already on page #foo, the pagebeforechange handler seems to be broken because it checks the toPage hash (which is #foo) against the current page's data-url (which is /path/file.html) to see if allowSamePageTransition needs to be activated.

This fails silently and nothing happens when clicking on the link.

I have modified the pagebeforechange handler to also check the id of the current page against the hash and this works in my case, but I do not have enough knowlege of JQM to determine if this is expected behavior or a bug.

I am running with JQM 1.1.0 and JQMR 0.81.

Mario

The router is listening to pagebeforechange and taking over control of calling changePage
However I can't find anyway I can specify different changePage options depending on the route being called.
There is no data-change-hash="false" attribute in jqm

I want to show my own a help dialog (which is just another embedded page) but without using jqm's actual dialogs eg. data-rel="dialog"
I want to load the page but prevent it from being added to the history just like jqm dialogs.

something like:

new $.mobile.Router({\
  ...
  "#help": { handler: "showHelp", events: "bs", changeHash: false }
  ...
});

Alternatively it'd be nice to have a way in my handler to tell the router that i'll handle the call to changePage for a particular route.

I get "can't set unsupported route bC", but even when I change it to "bc" it doesnt work "c.data("page") is undefined"

...content").scrollTop(i):c.scrollTop(i));f=(a.mobile.transitionHandlers[f||"none"]...

Please fix and/or explain, this is exactly the way I'd like to use it (create whole page in the DOM from template, pre-render lots of math and THEN call changePage manually)

PS I just copied the example as-is, local jqm router v0.81

Hi -
First of all thank you for putting this code out there - its been very helpful.

I'm trying to implement DefaultHandler and noticed that testAjax.html included in the example files does not actually call DefaultRouter. What is the correct syntax?

Thanks

Thanks for making jQM work with Backbone and your excellent addition to the community. After way too much trial and tribulation, I'm about there in getting this all to work together. Our app is very complex so there's a ton going on and I can't post much of it.

Basically, here's what's going on: I'm using single-page templates loaded with separate ids from our master routes. We have an mView.ejs file that looks like this;

<div id="<%= id %>" data-role="page">
    <%- partial('mHeader') %>
    <div data-role="content">
    </div>
</div>
<div id="solo" data-role="page">
    <%- partial('mHeader') %>
    <div data-role="content">
    </div>
</div>

That file is called with separate ids from our main backend routes file and works great for loading from one page and then navigating around. At this point, I have 3 routes setup. Two of them are absolute urls and one is hash-based. The solo above is the hash-based route.

Here's the deal I can visit the first page and the hash based url without an issue. It's important to note the URL I'm having problems with directory style i.e.: http://domain.com/directory/longassid

This works when navigating but when visiting that page directly the router is never fired. It gets there, but it doesn't recognize the regex. There's no match. Here's what the regex looks like:

new $.mobile.Router([,
    { "main" : { handler: 'main', events: 'bs' } },
    { "single\/([^?#]*)?" : { handler: 'single', events: 'bs' } },
    { "#solo[?](.*)?" : { handler: 'solo', events: 'bs' } }
], {
     // HANDLER FUNCTIONS           
     },
   { ajaxApp: true }

The single one is the route not matched on refresh. Pageinit is fired which fires our chrome and it fires the router. No issues there and it makes it all the way to the router but it isn't matched. Now, if I remove the extra stuff from after the single regex then it matches on refresh but of course no id is passed. What can I do to fix this? Is it just a regex issue? Any ideas?

Once again, I want to stress this route works fine when navigating through the app.

Thanks so much for any help!

Ciao,
do you have an example with your router and Spine JS?
Grazie

Not a showstopper, but it would be nice to offer a minified jquery.mobile.router.min.js distribution.

Hi im testing out this plugin and i really like it.
But i just notice one problem, i think i have misunderstood something but i hope someone can help me out here :).

I run jQuery.mobile.changePage( "address.html?id="+String(data), { transition: "slide"} );
and its working fine but my handler dosent get trigged.

My router
var router=new $.mobile.Router({
"/address.html(?:?)?": {handler: "address", events: "s"},
},{
address: function(type, match, ui) { alert("hej"); }
});

Hello @azicchetti Thanks again for the great library.

I'm running into problems that I think must be due to jquerymobile-router. My routes trigger on pageshow using the following routing table (in CoffeeScript):

window.masterRouter = new $.mobile.Router [
  { "#open-project": { events: "s,i,c", handler: "openProject" } }
  { '#show-count-schedule(?:[?](.*))?': { events: "s", handler: "showCountSchedule" } }
  { "#start-count(?:[?](.*))?": { events: "s", handler: "startCount" } }
  { "#enter-count(?:[?](.*))?": { events: "s", handler: "enterCount" } }
  { "#validate-count(?:[?](.*))?": { events: "s", handler: "verifyCount" } }

I can navigate between all the different routes in my single-page app successfully the first time. But when I return to previously visited pages, the pageshow event is triggered multiple times. Each time I return to the route, it is called more times than it was before.

I thought this might be related to #37 or #31, but neither seem to describe the problem.

I am using jquerymobile-router 0.9, JQM 1.1.0, and Backbone 0.9.2. The problem still occurs when I roll back to JQM 1.0.1.

Do you have any suggestions for how to debug this or to localize the problem? Is there some way I may need to clean or un-cache each page after visiting it?

Thank you!

Thanks for developing jquerymobile-router, it really helps me to integrate my backbone app with jquery mobile.

One thing I'm missing though is the navigate method of Backbone Router. It allows me to manually trigger routes without forcing the user to click on buttons etc.

I have a page with a few nested lists, which JQM renders into a multi-paged document where each list has an attribute like data-url=index&ui-page=#-# where each # is a number assigned to the list. I also suspect that index is taken from the original page's url.

When the page renders, I'm getting this error from query.mobile.router.js

line: 35
message: "Method "" does not exist"
sourceId: 5821973440
sourceURL: "http://pj.sulia.com:9090/static/compressed/r12210/mobile/js/deps/backbone-min.js"
__proto__: Error

It seems to be generated once for each list, both parent and children.

Also, the router is firing events with a url that's just index, which exactly matches the main page. Is this intentional or a JQM issue? It would be more helpful if I could differentiate the creation events of the main page from the lists.

It looks like there's no easy way to switch pages, like say we're currently on page /index.html#localpage?param=1 and the url changes to /index.html#/localpage?param=2, using your example page it will currently just switch back to the index div.

Any hints/suggestions, or is this currently a limitation?

I have a route that catches a query string parameter and builds a JQM nested list. This works fine and the url is bookmarkable but when you navigate to the nested part of the list JQM replaces the existing query string with &ui-page=id. This means that if you reload the page it does not find any data, and it means the url is not bookmarkable. Is there a workaround if I would like refreshable bookmarkable nested list on dynamicly generated pages in JQM?

BTW: Oterwise really nice work og the jqm Router!
-Johan

Hi

I am trying to change the content of my page based on passing some parameters to the router. I have been looking at the same page example, but I am having a couple of problems:

1. I want to stop the default animation, so that the page doesn't fade in/out.
2. The page seems to lose its active state on the second time I navigate to it.

I wonder if I am doing this the wrong way?

Thanks
Ben

I want to be able to submit a simple form with only a query parameter (think google home page) that would open a separate page (#page-search) with the search results. I am working on a single file multipage app.
Here's the html code:

<div data-role="page" id="page-home">
 [...]
<form action="#page-search" method="get">
<input name="q" type="text" required="required" value="" />
<input type="submit" />
</form>
 [...]
</div>
<div data-role="page" id="page-search">
 [...]

The router code:

'#page-search[?]q=(.*)': { handler: 'pageSearch', events: 'bs' }

That handler would then retrieve the query parameter (matchObj[1]) and then fetch a list of results from the server to populate that new page.

Now when I click on submit the router handler pageSearch is never called, instead I can see the url being changed to "?q=mysearchterm".

Could you please tell me if I've done something wrong there?

Cheers and thanks for your work on this project!