JSFiddle - React, Tailwind, and code Playground
by rarteaga
HTML
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
</div>
</div>
CSS
#botones {
display: inline;
top: 0;
position: absolute;
right: 5px;
}
#radios {
display: inline;
position: relative;
float: left;
top: 0px;
}
#opciones {
display: inline;
position: relative;
float: right;
top: 2px;
margin-left: 5px;
}
JavaScript
$.getJSON("http://190.212.139.237:90/Distribucion/Mercadeo/CRM/Clientes/Operaciones?metodo=ObtenerCuestionario", function (data) {
var items = [];
var select = '';
var options = '<div id="radios"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"><input type="radio" name="radio-choice-b" id="radio-choice-c" value="list" checked="checked"><label for="radio-choice-c">SI</label><input type="radio" name="radio-choice-b" id="radio-choice-d" value="grid"><label for="radio-choice-d">NO</label><input type="radio" name="radio-choice-b" id="radio-choice-e" value="grid"><label for="radio-choice-e">N/A</label></fieldset></div>';
$.each(data, function (key, val) {
items.push("<div data-role='collapsible' data-theme='b' data-content-theme='d'>");
items.push("<h1>" + val.AGV_Nombre + "</h1>");
items.push("<ul data-role='listview'>");
if (val.AGV_Nombre != "Flor de Caña") {
select = "";
}
else {
select = '<div id="opciones"><select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true"><option value="si">SI</option><option value="no">NO</option></select></div>';
}
$.each(val.PGR_Preguntas, function (key, item) {
items.push("<li>" + item.PGR_Nombre + "<div id='botones'>" + options + select + "</div></li>");
});
items.push("</ul>");
items.push("</div>");
});
$(".ui-content").append(items.join("")).trigger("create");
});