Question

I’m using JQuery Mobile 1.2.0 version.
I want to put some html code in this context:

<div id="div-primeros" data-role="collapsible" data-theme="a" data-content-theme="c" data-collapsed="false">
        <h2>Primeros</h2>
        [I WANT TO ADD CODE DYNAMICALLY HERE] 
</div>

And the code I want to add is:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:93%">
        <ul data-role="listview" style="width:100%">
            <li id="4" data-icon="false">
                <a href="index.html">
                    <img src="some.jpg"></img>
                    <h3>some text</h3>
                    <span class="ui-li-count">some text</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="ui-grid-b" style="width:7%">
        <input cant="1" type="number" value="0" min="0" max="8" style="width:100%">
    </div>
</div>

So I tried doing this using this code (“primero” is a JSON variable):

$("#div-primeros").append(
            "<div id=\"" + i + "\" data-role=\"listview\" class=\"ui-grid-a\">" +
                "<div class=\"ui-block-a\" style=\"width:95%\">" +
                    "<ul style=\"width:100%\">" +
                        "<li id=\"" + primero.id + "\" data-icon=\"false\">" +
                            "<a href=\"menu_detalle.html\">" +
                                "<img src=\"" + primero.thumb + "\"></img>" +
                                "<h3>" + primero.nombre + "</h3>" +
                                "<p>" + primero.descripcion + "</p>" +
                                "<span class=\"ui-li-count\">" + primero.precio + "</span>" +
                            "</a>" + 
                        "</li>" +
                    "</ul>" +
                "</div>" + 
                "<div class=\"ui-grid-b\" style=\"width:5%\">" +
                    "<input cant=\"" + primero.id + "\" type=\"number\" value=\"0\" min=\"0\" max=\"8\" style=\"width:100%\">" +
                "</div>" +
            "</div>");

The result is that the content not formatted correctly, and this content is out of collapsible “div-primeros”.

What am I doing wrong??? I’ve tried with:

    $("div-primeros").trigger("create");

and

    $("div-primeros").page();

with no successful results.

Anyone knows how can I refresh all the code?
Thank you so much!!!

Bye

Answer 1

Don’t break it up in multiple lines, use single quotes in place of the double quotes surrounding the html you want to append. Like so:

$('#div-primeros').append('<div class="ui-grid-a"><div class="ui-block-a" style="width:93%"><ul data-role="listview" style="width:100%"><li id="4" data-icon="false"><a href="index.html"><img src="some.jpg"></img><h3>some text</h3><span class="ui-li-count">some text</span></a></li></ul></div><div class="ui-grid-b" style="width:7%"><input cant="1" type="number" value="0" min="0" max="8" style="width:100%"></div></div>');

Here’s a fiddle. http://jsfiddle.net/wU6pr/