Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  


jQuery Mobile - All Hyperlinks go to blank page that doesn't load
Attempted to add jQuery mobile to an existing site full of internal hyperlinks with the format:
a href="myotherpage.aspx"

When clicking on any link, the page doesn't load.

This is because by default, jQuery mobile decided that a page name in a URL is linking to one of their new internal data-role=page sections, not a separate file.

A difficult workaround is to start adding rel=external or data-ajax=false to every hyperlink in your application that is going to a new local page not built for ajax.

If you are not using the ajax page load model (existing site you don't want to redesign), a simpler solution is to disable ajax loading. However, ajax loading must be disabled BEFORE you load jQuery mobile and AFTER you load jQuery. (this is getting ridiculous).

SO, you can use the following code to load jQuery & mobile in this manner:
1. load jquery js file
2. disable ajax navigation
3. load jquery mobile js file
4. load jquery mobile css file

> > > >

HtmlGenericControl child = new HtmlGenericControl("script");
child.Attributes.Add("type", "text/javascript");
child.Attributes.Add("src", page.ResolveUrl( JQUERY_PATH));

// disable ajax linking - it doesn't work without a complete site redesign!!!
var script = @"$(document).bind(""mobileinit"", function () { $.mobile.ajaxEnabled = false;});";
child = new HtmlGenericControl("script");
child.Attributes.Add("type", "text/javascript");
child.InnerHtml = script;

child = new HtmlGenericControl("script");
child.Attributes.Add("type", "text/javascript");
child.Attributes.Add("src", page.ResolveUrl( JQUERY_MOBILE_PATH));

HtmlLink myHtmlLink = new HtmlLink();
myHtmlLink.Attributes.Add("rel", "stylesheet");
myHtmlLink.Attributes.Add("type", "text/css");

> > > >

Now your pages will load normally.

Created By: amos 9/30/2014 5:46:35 PM
Updated: 9/30/2014 5:49:43 PM