Estoy desarrollando una aplicación con JQuery Mobile y Slim Framework como servidor RESTFul, al hacer una solicitud a través de un ID desde el navegador me devuelve sin problems el resultado en JSON, pero, al hacerlo desde JQuery Mobile, la primera vez que el usuario hace una solicitud a través de un elemento <li> y a la vez obtiene el id me muestra sin problemas la información, pero, si vuelve a presionar otro elemento o el mismo, me aparece el registro anterior más el actual, a pesar de que me percato de limpiar todo primero, en la consola del navegador me aparece dos solicitudes, una con el ID anterior y otra el actual, y así tantas veces se le de a los elementos <li>:
Código Index.html:
Código HTML:
<!-- Información del jugador -->
<div data-role="page" id="player-info">
<div data-role="header" data-theme="b">
<h1>Info del Jugador</h1>
<a href="#players-list" data-theme="d" data-icon="back" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Volver</a>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="v_player_nombre">Nombre</label>
<div id="v_player_nombre"></div>
<input type="hidden" id="v_player_id" name="v_player_id" value="">
</div>
<div class="ui-field-contain">
<label for="v_player_apellido">Apellido</label>
<div id="v_player_apellido"></div>
</div>
<div class="ui-field-contain">
<label for="v_player_carnet">No. Carnet</label>
<div id="v_player_carnet"></div>
</div>
<div class="ui-field-contain">
<label for="f_player_foto">Foto</label>
<div id="v_player_img"></div>
</div>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="minus" data-iconpos="top" id="delete_player">Eliminar</a></li>
<li><a href="#" data-icon="edit" data-iconpos="top" id="edit_player">Editar</a></li>
</ul>
</div>
</div>
</div> Código Javascript
Código Javascript
:
Ver original//Seleccionamos el jugador
$(document).on("click","#list_players > li", function() {
var PlayerID;
PlayerID = $(this).attr("id")
$(":mobile-pagecontainer").pagecontainer("change","#player-info");
$(document).on("pageshow","#player-info", function() {
//Limpiamos algunos datos
$("#v_player_nombre").empty();
$("#v_player_apellido").empty();
$("#v_player_carnet").empty();
$("#v_player_id").val("");
$("#v_player_img").empty();
console.log(PlayerID);
//Mostramos los datos del jugador
$.ajax({url: BaseURL + '/players/'+ PlayerID,
type: 'GET',
async: 'true',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show', {text:"",textVisible: false, theme: "b", textonly: false, html: ""}); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide'); // This will hide ajax spinner
},
success: function (result) {
console.log(result);
if(result.length == 1){
$("#v_player_nombre").append('<p>' + result[0].nombre + '</p>');
$("#v_player_apellido").append('<p>' + result[0].apellido + '</p>');
$("#v_player_carnet").append('<p>' + result[0].carnet + '</p>');
$("#v_player_id").val(result[0].player_id);
if (result[0].imagen != '') {
$("#v_player_img").append('<img src="' + result[0].imagen + '">');
}
return false;
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('¡Ocurrió un problema en la red, intente de nuevo!' + error.message);
}
});
return false;
});
return false;
});
dejo muestra del resultado:
