Question

I am using Jquery Mobile to build a mobile version of an existing ASP.NET mvc3 site.

The way I am doing this is by detecting in my controllers if the page is being requested by a mobile or not and then providing a mobile-suited mvc view if there is one and providing the standard view if there isn’t.

The problem I am having is that links to pages which do not have a suitable view still get Ajaxed into the page by jquery-mobile, messing up the layout. I know you can disable this functionality on a link-by-link basis by using data-ajax=”false”, however I do not have control over each link as it is a CMS-based site so there is nothing to stop the user from linking to a page within the site that does not have a mobile view.

What I was hoping I could do is maybe include an attribute in the base view of the desktop version of the site which jquery mobile would pick up when it attempts to ajax load the page, rejecting it and reloading the link without ajax. Is this possible?

Answer 1

For the time being I’ve done this:

$(document).bind("pageload", function (event, data) {
    if ($("div[data-role=\"content\"]", data.xhr.responseText).length < 1) {
       window.location = data.url;                  
    } 
});

I’m checking that the loaded page contains jQuery mobile element data-role=”content” and if it doesn’t, redirecting the browser to the page proper. It’s not ideal though since I’m parsing the html of every page on load. It also means that the non-mobile site is loaded into jquery mobile, and then loaded again on the redirect (although this shouldn’t happen too often in this site).

I also had to add an empty hidden div with data-role=”page” on the master view of the desktop version of the site because jquery mobile still tries to transition to the non-mobile site before the window.location kicks in and I couldn’t work out how to prevent that.