Question

I’m pretty newbie with jQuery mobile (and JS :)), excuse if I’m saying something that looks too easy. I’ve searched through the Internet for two days now and haven’t find a solution.

I want to know if there’s some function that does the same that $(#someList).listview(‘refresh’) but for div tags. I’ve got two div tags and when I dinamycally change its contents they loose the styling.

Code:

function muestraFicha() {
    var categoriaFicha = "Ciencia / Matemáticas";
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?";
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo";
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>"

    $("#fichaRespuesta").empty(); //vaciamos la ficha
    $("#fichaRespuesta").append("<h4> Respuesta </h4>");
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

    $("#fichaPregunta").empty();
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");
}

So, at the end of the function I need something a the .listview(‘refresh’) or the html is only styled the first time the function is called.

The divs that lose style are fichaRespuesta and fichaPregunta.

Thank you.

Answer 1

If you want to have jQuery Mobile style any new DOM element, you can use the .trigger('create'); function:

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it
does dispatch a “pagecreate” event, which most widgets use to
auto-initialize themselves. As long as a widget plugin script is
referenced, it will automatically enhance any instances of the widgets
it finds on the page, just like before. For example, if the selectmenu
plugin is loaded, it will enhance any selects it finds within a newly
created page.

This structure now allows us to add a new create event that can be
triggered on any element, saving you the task of manually initializing
each plugin contained in that element. Until now, if a developer
loaded in content via Ajax or dynamically generated markup, they
needed to manually initialize all contained plugins (listview button,
select, etc.) to enhance the widgets in the markup.

Now, our handy create event will initialize all the necessary plugins
within that markup, just like how the page creation enhancement
process works. If you were to use Ajax to load in a block of HTML
markup (say a login form), you can trigger create 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” );

Create vs. refresh: An important distinction

Note that there is an important difference between the create event
and refresh method that some widgets have. The create event is suited
for enhancing raw markup that contains one or more widgets. The
refresh method that some widgets have should be used on existing
(already enhanced) widgets that have been manipulated programmatically
and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.

Link to the above information: http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Also I notice you are using the same selectors consecutively, you can greatly improve the performance of your code by chaining together the calls to selectors, like so:

Change:

$("#fichaRespuesta").empty(); //vaciamos la ficha
$("#fichaRespuesta").append("<h4> Respuesta </h4>");
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty();
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");

To:

$("#fichaRespuesta").empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");

Notice I removed one of the .append() calls since it creates extra overhead to call it twice in a row; instead I put the HTML for both .append() calls in a single call.

If you really want to get into making your code performance improve, cache the selectors so they only have to be looked-up once, like so:

var $fichaRespuesta = $('#fichaRespuesta'),
    $fichaPregunta  = $('#fichaPregunta');
function muestraFicha() {
    /*I removed your extra code to make this easier to read*/

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");