Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] .ajax() me devuelve el ID anterior y el actual

Estas en el tema de .ajax() me devuelve el ID anterior y el actual en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/12/2016, 14:14
Avatar de Fleon  
Fecha de Ingreso: febrero-2010
Mensajes: 138
Antigüedad: 14 años, 2 meses
Puntos: 3
.ajax() me devuelve el ID anterior y el actual

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
  1. //Seleccionamos el jugador
  2. $(document).on("click","#list_players > li", function() {  
  3.     var PlayerID;
  4.     PlayerID = $(this).attr("id")
  5.    
  6.     $(":mobile-pagecontainer").pagecontainer("change","#player-info");
  7.    
  8.     $(document).on("pageshow","#player-info", function() {
  9.         //Limpiamos algunos datos
  10.         $("#v_player_nombre").empty();
  11.         $("#v_player_apellido").empty();
  12.         $("#v_player_carnet").empty();
  13.         $("#v_player_id").val("");
  14.         $("#v_player_img").empty();
  15.         console.log(PlayerID);
  16.        
  17.         //Mostramos los datos del jugador
  18.         $.ajax({url: BaseURL + '/players/'+ PlayerID,
  19.             type: 'GET',                  
  20.             async: 'true',
  21.             contentType: 'application/json; charset=utf-8',
  22.             dataType: 'json',              
  23.             beforeSend: function() {
  24.                 // This callback function will trigger before data is sent
  25.                 $.mobile.loading('show', {text:"",textVisible: false, theme: "b", textonly: false, html: ""}); // This will show ajax spinner
  26.             },
  27.             complete: function() {
  28.                 // This callback function will trigger on data sent/received complete
  29.                 $.mobile.loading('hide'); // This will hide ajax spinner
  30.             },
  31.             success: function (result) {
  32.                 console.log(result);
  33.                 if(result.length == 1){
  34.                     $("#v_player_nombre").append('<p>' + result[0].nombre + '</p>');
  35.                     $("#v_player_apellido").append('<p>' + result[0].apellido + '</p>');
  36.                     $("#v_player_carnet").append('<p>' + result[0].carnet + '</p>');
  37.                     $("#v_player_id").val(result[0].player_id);
  38.                    
  39.                     if (result[0].imagen != '') {
  40.                         $("#v_player_img").append('<img src="' + result[0].imagen + '">');
  41.                     }
  42.                    
  43.                     return false;
  44.                 }
  45.                
  46.             },
  47.             error: function (request,error) {
  48.                 // This callback function will trigger on unsuccessful action              
  49.                 alert('¡Ocurrió un problema en la red, intente de nuevo!' + error.message);
  50.             }
  51.         });
  52.        
  53.         return false;
  54.     });    
  55.    
  56.     return false;
  57.    
  58. });

dejo muestra del resultado:
  #2 (permalink)  
Antiguo 30/12/2016, 16:03
Avatar de Fleon  
Fecha de Ingreso: febrero-2010
Mensajes: 138
Antigüedad: 14 años, 2 meses
Puntos: 3
Respuesta: .ajax() me devuelve el ID anterior y el actual

Me respondo, la solució fue separar cada evento de manera independiente, la cosa quedó así:

Código Javascript:
Ver original
  1. var PlayerID = '';
  2.  
  3. //Seleccionamos el jugador
  4. $(document).on("click","#list_players > li", function() {  
  5.  
  6.     //Asignamos el ID
  7.     PlayerID = $(this).attr("id")
  8.    
  9.     //Mostramos la pagina que muestra la info del jugador
  10.     $(":mobile-pagecontainer").pagecontainer("change","#player-info");
  11.    
  12. });
  13.  
  14. $(document).on("pagebeforeshow","#player-info", function() {
  15.     //Limpiamos algunos datos
  16.     $("#v_player_nombre").empty();
  17.     $("#v_player_apellido").empty();
  18.     $("#v_player_carnet").empty();
  19.     $("#v_player_id").val("");
  20.     $("#v_player_img").empty();
  21.     console.log(PlayerID);
  22.    
  23.     //Mostramos los datos del jugador
  24.     $.ajax({url: BaseURL + '/players/'+ PlayerID,
  25.         type: 'GET',                  
  26.         async: 'false',
  27.         contentType: 'application/json; charset=utf-8',
  28.         dataType: 'json',              
  29.         beforeSend: function() {
  30.             // This callback function will trigger before data is sent
  31.             $.mobile.loading('show', {text:"",textVisible: false, theme: "b", textonly: false, html: ""}); // This will show ajax spinner
  32.         },
  33.         complete: function() {
  34.             // This callback function will trigger on data sent/received complete
  35.             $.mobile.loading('hide'); // This will hide ajax spinner
  36.         },
  37.         success: function (result) {
  38.             console.log(result);
  39.             if(result.length == 1){
  40.                 $("#v_player_nombre").append('<p>' + result[0].nombre + '</p>');
  41.                 $("#v_player_apellido").append('<p>' + result[0].apellido + '</p>');
  42.                 $("#v_player_carnet").append('<p>' + result[0].carnet + '</p>');
  43.                 $("#v_player_id").val(result[0].player_id);
  44.                
  45.                 if (result[0].imagen != '') {
  46.                     $("#v_player_img").append('<img src="' + result[0].imagen + '">');
  47.                 }
  48.                
  49.                 return false;
  50.             }
  51.            
  52.         },
  53.         error: function (request,error) {
  54.             //reseteamos el ID
  55.             PlayerID = '';
  56.             // This callback function will trigger on unsuccessful action              
  57.             alert('¡Ocurrió un problema en la red, intente de nuevo!' + error.message);
  58.         }
  59.     });
  60.    
  61.     //Reseteamos el ID
  62.     PlayerID = '';
  63.     return false;
  64. });

Fleon xD

Etiquetas: actual, devuelve
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:00.