Recently, I encountered an issue while developing a web app using Jquery Mobile. I had to make an Ajax/Json request to a PHP file in order to retrieve data from MySQL database. However, when I received the JSON callback and tried to create a "list" from the array, the path of the jQuery Mobile CSS file seemed to be lost and my HTML structure was not well formed.
$.ajax({
url: "busca_reservas.php",
data: "fecha=" + fecha + "",
dataType: 'json',
type: "POST",
cache: false,
success: function(data){
var output = '<ul data-role="listview" data-inset="true" id="reservas" class="listareservas">';
var logsData = data;
for (var i in logsData.logs){
regis = logsData.logs[i].recid;
nombre = logsData.logs[i].nombre;
ape = logsData.logs[i].apellido;
output+= '<li><a href="#">' + regis + " " + nombre + " " + ape + '</a></li>';
}
output+='</ul>';
$('.listareservas').listview('refresh');
$("#result").append(output).fadeIn(500);
console.log(output)
}
});
Instead of seeing the content as a visually appealing Jquery Mobile "List View", it appeared as plain text in my browser. If anyone has any suggestions on how to resolve this issue, your help would be greatly appreciated.
Thank you in advance!