JQuery Mobile not applied

Question

I'm having some troubles with JQueryMobile because i want to implement some widgets but the themes and color of the widgets is not well-implemented.

Here's a photo to show what's happening:

And the correct widget for example would be that:

If i add the jquerymobile widgets dynamically then the theme is not well-added but if the html is already on a file (not added dynamically with javascript) the theme looks well. Here's the code I use to add the widgets:

function cesta_insert_html(){
    var cesta_bought = $('body').data('cesta_list');
    cesta_bought.forEach(function(element, index){
        image = get_product_info(element[0].id, 'data' + $('body').data('clicked_listview_item'));
        $('#cesta_view').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">'+image.pname+'</h3><center><div id=image_cesta><img src=data:imajpeg;base64,'+image.pimage+' alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');
    });
}

Thanks!

Answer 1

Working example: http://jsfiddle.net/Gajotres/6nG2n/

You are combining several different widgets, to enhance their markup you should run trigger('create').

Read more about it in my other answer: jQuery Mobile: Markup Enhancement of dynamically added content

$('[data-role="content"]').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">Image</h3><center><div id=image_cesta><img src=data:imajpeg;base64,Image alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');   
$('#index').trigger('create');

Answer 2

Check these similar questions out: jQuery Mobile creating a Collapsible set dynamically via ajax does not apply styling Dynamically adding collapsible elements Dynamically adding collapsible elements

After adding something dynamically in JQuery mobile you can apply the markup by calling a create or refresh method.

Try calling

$("collapsible").collapsible()

after appending the collapsible to initialize it.