4

These two jQuery Mobile checkboxes have different styling, however I believe I am creating them in very similar ways. The top boxes I am appending dynamically, where as the bottom box is hardcoded. Does anybody know why this is this discrepancy in styles?

Div to hold fieldset

<fieldset id="surveyViewer" data-role="controlgroup">
  </fieldset>

Appending radio buttons

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

This line to refresh styling:

$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");

enter image description here

adamdehaven
  • 5,890
  • 10
  • 61
  • 84
Mobie
  • 1,850
  • 4
  • 19
  • 25

1 Answers1

2

All of your CSS is not being applied when you are dynamically loading the top two.

Add .trigger("create") on the element that gets the content added to.

See here: jQuery Mobile does not apply styles after dynamically adding content

UPDATE

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

UPDATE #2

// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>

<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>

// JS 
$( "#myButton" ).bind( "click", function(event, ui) {

     $("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

     $("#radiodiv1").trigger("create");

});

I created a JSfiddle to illustrate a solution. I did all this on my iPad (you're welcome) so if this works for you, PLEASE at least mark it as the correct answer lol. Here's the link (based on adding the radio buttons via a button click)

WORKING EXAMPLE: http://jsfiddle.net/nsX2t/

Community
  • 1
  • 1
adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • sorry, let me be more clear. I have added to my question the code I use to create my checkbox on top, and the code I am attempting to use to refresh it... – Mobie Sep 09 '12 at 03:52
  • I think (not positive) you need to add the trigger call to the actual radio element, not the fieldset. I updated my answer. – adamdehaven Sep 09 '12 at 14:09
  • so in this case it would be $(input[type='radio']).appendTo(".up-page").trigger("create"); ?? – Mobie Sep 11 '12 at 01:59
  • Yes, I believe something like that should work - hopefully this will lead you in the right direction. But I don't believe you would append just a single radio input to a page - more likely a form or something. – adamdehaven Sep 11 '12 at 02:00
  • I'm confused at what you mean. How should I change my code? Could you provide some sample code using my specific example? it would be real helpful! Thanks! – Mobie Sep 11 '12 at 02:04
  • I added code based on a button click, and a working jsfiddle example. I hope this helps! – adamdehaven Sep 11 '12 at 02:40