JQuery Mobile ignores data-role = "none" in form elements

Question

I am dynamically inserting pages into a jQuery mobile app. Everything works fine except for form elements. It seems that data-role = "none" is being ignored on form elements that are on subpages.

<p><input data-role='none' type='radio' name='type' id='type' value='none'/>None</p> <p><input data-role='none' type='radio' name='type' id='type' value='segments'/>Market Segments</p> <p>&nbsp; &nbsp; &nbsp <select data-role='none' id='segments'><option value='all'>All</option></select></p> 

Radio buttons display like regular radio buttons, albeit with some disgusting formatting. The select button should appear as a normal drop-down list, but instead it appears as a jQuery Mobile drop-down list.

Here's how the pages are entered:

 var t = results.rows.item(i).body; var n = results.rows.item(i).name; $("#"+n).remove(); $("body").append(t); $("#"+n).appendTo($.mobile.pageContainer); $("#"+n).attr('data-url',$("#"+n).attr("ID")).trigger('create'); 

Form elements on non-injection pages work fine ... any ideas?

Answer 1

By default, jQuery Mobile will automatically improve the form elements, if you want to tell JQM to ignore them, you can add the data-role="none" attribute to the container, however you also need to set $.mobile.ignoreContentEnabled = true . The reason for this is that, by default, JQM does not check the data-role="none" attribute (so as not to check every time unnecessarily).

Keep in mind that you need to set ignoreContentEnabled to mobileinit event .

Answer 2

You should check if you are manually initializing these form elements. As you enter these controls, you can also call the selectmenu ('refresh') method. Just delete these calls and everything should work fine.