Question

I have a pretty basic jquery mobile page, it’s 3 data-role:page divs in one index.php. The first page is simply a background image and an input type="tel" with position:fixed in the center of the screen. If I load the site directly on the iPhone the style and positioning are all correct.

However, people will reach the site through an external link that passes in a parameter (e.g. ?event=123123123, a random string). When loading this way, the first page ALWAYS loads un-styled, i.e. the input box is ignoring all css, both the jquery.css and my own, whether it’s inline, declared in the head, loaded from an external file, etc. If I refresh the page, then the style kicks in and it looks like it’s supposed to.

I’ve tried basically everything I can think of (and lots of things that probably don’t even make sense) like binding to pagebeforeload, pageinit, pageshow etc. like for example:

$( '#step1' ).live( 'pagebeforecreate',function(event){
 // alert( 'This page was just enhanced by jQuery Mobile!' );

 $('<div id="formbox"><form><input type="tel" name="number" id="number" value="" style="width:87%; height:40px; font-size:36px; font-weight: bold; left:14px; position:relative; text-align:center;" /></form></div>').appendTo('#formboxouter');
 // var $container = $('#step1');
 // refreshStyles($container);
 $('#formbox').trigger('create');
 // $( window.document ).trigger( "mobileinit" );
});

I’ve reached the ‘throw everything at the wall and see what sticks’ phase of frustration and, well, nothing has stuck.

I’ve found lots of info about ways to modify internal links (e.g. rel=external) but I’ve found nothing that seems to explain why this could happen.

Why is it that passing an external parameter would cause the styles not to load?

Answer 1

You may want to read the documentation for JQM regarding parameters. Also try $('.ui-page').trigger('create'); instead of $('#formbox').trigger('create');

Passing parameters between pages

jQuery Mobile does not support query
parameter passing to internal/embedded pages. For example, if the
framework sees a link to "#somePage?someId=1" it interpret that as
"#somePage" and navigate to the internal page div with an ID of
somePage and apply a data-url of #somePage?someId=1 to that page
container. Subsequent calls to other params such as
"#somePage?someId=2" will find the same div because jQuery Mobile
refers to the data-url on the div which is only set once and will
remain at #somePage?someId=1.

There are two plugins that you can add to your project if query
parameters are needed between pages. There is a lightweight page
params plugin and a more fully featured jQuery Mobile router plugin
for use with backbone.js or spine.js.

info source