CODEWITHSUNDEEP
jqueryjquery-selectorsjquery-mobile
Brian
Brian

Reputation: 4418

How do I refresh the DOM of a jquery mobile page when I dynamically add radio buttons

I'm adding buttons to a radio field dynamically, the function that adds the elements looks like this 

 function updateNetworks(data){

            $.each(data.networks, function(key, network) {

                var radioItem = '<input type="radio" name="radio_network" id="radio_network_'+network.id+'" value="'+network.id+'"  /><label for="radio_network_'+network.id+'">'+network.name+'</label>';

                $('#radio').append(radioItem);
            });

            $('input:[name=radio_network]:radio').checkboxradio("refresh")
        }

The HTML dom element

   <fieldset data-role="controlgroup" id="radio">

            <legend>Choose a network:</legend>

        </fieldset>

The function is updating the dom fine but none of the jquery mobile styles are being applied to the buttons, is there some way to refresh the added radio buttons?

**working code

 function updateNetworks(data){

            $.each(data.networks, function(key, network) {

                var radioItem = '<input type="radio" name="radio_network" id="radio_network_'+network.id+'" value="'+network.id+'"  /><label for="radio_network_'+network.id+'">'+network.name+'</label>';

                $('#radio').append(radioItem).trigger('create');
            });

        }

Upvotes: 1

Views: 2698

Answers (1)

Lawson Kurtz
Lawson Kurtz

Reputation: 636

Calling .trigger('create'); should do the trick. More info on jQuery mobile dom manipulation here.

Upvotes: 2

Related Questions