Jquery-mobile create a dynamic control group and apply jquery-ui css

Question

This is my code: http://jsfiddle.net/YKvR3/34/

I would create a control group with the values ​​that are in my array (name). The problem is that when you click the download button, the values ​​are added to the control group, but the jquery-ui styles do not load, as in the image. The control group was not developed using jquery-ui mobile css.

$("#load").click(function(){ var name=["one","two"]; var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>'; for ( var int = 0; int < 2; int++) { html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>'; } alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset'); $("#list").html(html+'</fieldset'); //$("#list").page();});​ 

What am I doing wrong? Thanks.

Answer 1

 $("#list").trigger('create'); 

From: jqm docs

if you create a new client part of the markup or upload content via Ajax and enter it on the page, you can trigger the create event to handle automatic initialization for all plugins contained in the new markup. This can be activated for any element (even the page section itself), which allows you to manually initialize each plugin (list button, select, etc.).

Answer 2

I do campaigning if this post is too old, and if my post is not according to the correct standard, since it is published for the first time, please correct me if this is terribly bad: -]

But in case someone else runs into this, I had similar problems with how the dynamic data is displayed, and I used jsfiddles and the comments above as help, and this is what helped me work, something like of my solution, I don’t have a button to load the downloaded data automatically when the page loads.

Updated In my .html file:

 <div id="members"></div> <input type="button" id="load" value="test"/> 

Updated In my .js file:

 $("#load").click(function(){ var name = ["NameOne","NameTwo", "NameThree"]; var fset = '<fieldset data-role="controlgroup" id="members-ctrlgroup"><legend>This is a legend:</legend>'; var labels=''; for ( var i = 0; i < name.length; i++) { labels += '<input type="checkbox" class="checkbox" id="c' + i + '"><label for="c' + i + '" data-iconpos="right">' + name[i] +'</label>'; } $("#members").html(fset+labels+'</fieldset>'); $("#members").trigger("create"); }); 

I know that the “field” looks a little strange as I shared it, but I find it a little easier when it comes to the fact that this whole line is correct in these cases.

Updated . To have rounded corners and have it as one control group, you will have to use this approach. Just as the former posters showed. Note that an identifier with a flag and a label for = may tend to blame the output if they do not match: -]

fiddle

Answer 3

To replace content, you must use .html(); instead of .append() , which adds new content after the existing one. After adding content to the jQuery mobile page, you need to improve the content using, for example, $("input[type='radio']").checkboxradio();

Answer 4

I used

 for( var i=0 ; i < html.length ; i++ ){ var spline = html[i].split("|"); inHTML = inHTML + " <input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /> <label for=\"checkbox-"+i+"a\">"+ spline[0] +" , "+ spline[2] +"</label> "; } jq("fieldset#myFieldSet").empty(); jq("fieldset#myFieldSet" ) // Append the new rows to the body .append( inHTML ) // Call the refresh method .closest( "fieldset#myFieldSet" ) // Trigger if the new injected markup contain links or buttons that need to be enhanced .trigger( "create" );