Foros del Web » Programando para Internet » Jquery »

Evitar conflicto entre metodos de jquery

Estas en el tema de Evitar conflicto entre metodos de jquery en el foro de Jquery en Foros del Web. En html tengo un una lista de link que al hacer click en c/u me carga una lista que viene desde la base de datos. ...
  #1 (permalink)  
Antiguo 12/04/2014, 10:58
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Evitar conflicto entre metodos de jquery

En html tengo un una lista de link que al hacer click en c/u me carga una lista que viene desde la base de datos.

Mi codigo consulta a la DB y los devuelve a través de AJAX en un objeto llamado respuesta y al llegar los datos lo recibo en una funcion :

Código Javascript:
Ver original
  1. function llegadaDatos(respuesta) {
  2.  
  3.  //accedo a sus objetos hijos "dato1, dato2 y dato3"
  4.  
  5.         $("#lista-usuario").html(respuesta.dato1);
  6.     $("#lista-usuario").html(respuesta.dato2);
  7.     $("#art-list").html(respuesta.dato3);
  8. }

Mi problema es que no me da los resultados que quiero porque al imprimir en la pagina con el dato1 no me da problema en el dato2 es mi problema al parecer chanca a la linea anterior que es " $("#lista-usuario").html(respuesta.dato1);". Como haria para evitar ese conflicto que hay o el error es otro?.

Al depurar el js en chrome se ve que dato2 es nulo.
Cita:
Object {dato1: "<li title='' aud='remix-prueba.mp3' name='flash/' …pan> <span class='desc'>Ringtone</span> </a></li>", dato2: null, dato3: "<li><a href='#'><span class='artista'>alphavilla</span></a></li>"}

Última edición por lightning2014; 12/04/2014 a las 11:03
  #2 (permalink)  
Antiguo 12/04/2014, 12:50
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.527
Antigüedad: 9 años, 10 meses
Puntos: 966
Respuesta: Evitar conflicto entre metodos de jquery

El dato 2 reemplaza al dato 1 porque esa es la instrucción que indicas al usar de esa forma el método html. En su lugar, debes usar el método append para que se añadan los enlaces. Por otro lado, si dato2 es nulo, entonces el problema está en el código que lo genera. Revísalo para que encuentres el error y lo puedas corregir.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 12/04/2014, 13:09
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Evitar conflicto entre metodos de jquery

Hola ya revise el php el cual genera el dato2 ,comparando linea a linea del codigo con el dato1 y dato3 que van bien e hice el cambio en la segunda sentencia por append(). El detalle es que me muestra los datos de dato2 al hacer varios click en cualquier link asi al azar, pero ya no me muestra el dato1 pero el dato3 sin novedades funciona bien. Asi que sigue el problema entre el dato1 y dato2. Quiza hay otra forma de poder mostrar los datos que recibo en la pagina web??
  #4 (permalink)  
Antiguo 12/04/2014, 13:17
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 9 años
Puntos: 38
Respuesta: Evitar conflicto entre metodos de jquery

Cita:
Iniciado por lightning2014 Ver Mensaje
En html tengo un una lista de link que al hacer click en c/u me carga una lista que viene desde la base de datos.

Mi codigo consulta a la DB y los devuelve a través de AJAX en un objeto llamado respuesta y al llegar los datos lo recibo en una funcion :

Código Javascript:
Ver original
  1. function llegadaDatos(respuesta) {
  2.  
  3.  //accedo a sus objetos hijos "dato1, dato2 y dato3"
  4.  
  5.         $("#lista-usuario").html(respuesta.dato1);
  6.     $("#lista-usuario").html(respuesta.dato2);
  7.     $("#art-list").html(respuesta.dato3);
  8. }

Mi problema es que no me da los resultados que quiero porque al imprimir en la pagina con el dato1 no me da problema en el dato2 es mi problema al parecer chanca a la linea anterior que es " $("#lista-usuario").html(respuesta.dato1);". Como haria para evitar ese conflicto que hay o el error es otro?.

Al depurar el js en chrome se ve que dato2 es nulo.
Hola de nuevo , pon más código aquí para que veamos que pasa !
Necesitamos ver si :

1- Es un tema de diseño de logica : Si tienes un php que esta esperando mas de un valor por get o por post ...etc...

2-Puede ser como dice Alexis88 que se deba a que no tenemos bien estructurado el html de respuesta ... es decir el metodo html sobreescribe lo que tengas ejemplo :

si recibes respuesta.datos1 y escribes en el div id padre1 ... borraras toda la estructura que le precede :


Código HTML:
Ver original
  1. <div id="padre1" "><div id="hijo"><div id="nieto"></div></div></div>

En cambio si recibes respuesta.datos1 y escribes en el div id padre1 y la estructura es esta :

<div id="padre1"></div>
<div id="hijo"></div>
<div id="nieto"></div>

modificara solo la respuesta padre1 sin alterar los hijos y los nietos! .
  #5 (permalink)  
Antiguo 12/04/2014, 13:36
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Evitar conflicto entre metodos de jquery

Este es el html:

Código HTML:
Ver original
  1. <div id="bloque_geners">
  2.         <ul class="gnr">
  3.                
  4.                     <li><a class="lnk" href="#" title="musica1">Alternativo</a></li>
  5.                     <li><a class="lnk" href="#" title="musica2">Anime</a></li>
  6.                     <li><a class="lnk" href="#" title="musica3">Árabe</a></li>
  7.                     <li><a class="lnk" href="#" title="musica4">Axe</a></li>
  8.                     <li><a class="lnk" href="#" title="musica5">Bachata</a></li>
  9.                     <li><a class="lnk" href="#" title="musica6">Baladas</a></li>
  10.                     <li><a class="lnk" href="#" title="musica7">Baladas de oro</a></li>
  11.                     <li><a class="lnk" href="#" title="musica8">Baladas en inglés</a></li>
  12.                     <li><a class="lnk" href="#" title="musica9">Batucada</a></li>
  13.                     <li><a class="lnk" href="#" title="musica10">Boleros</a></li>
  14.                     <li><a class="lnk" href="#" title="musica11">Brasileras</a></li>
  15.                     <li><a class="lnk" href="#" title="musica12">Chaquenadas</a></li>
  16.                     <li><a class="lnk" href="#" title="musica13">Chicha</a></li>                       
  17.                     <li><a class="lnk" href="#" title="musica14">Coreografía</a></li>
  18.                    
  19.         </ul>
  20. </div>
  21.  
  22. <div id="uno">
  23.     <ul id="lista-usuario"></ul>
  24. </div>
  25. <div id="dos">
  26.     <ul id="art-list"></ul>
  27. </div>

Javascript:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     $('.gnr a').on('click', function(){
  3.         var title = $(this).attr('title');
  4.        
  5.         $.ajax({
  6.  
  7.            async:true,
  8.            type: "POST",
  9.            dataType: "json",
  10.            contentType: "application/x-www-form-urlencoded",
  11.            url:"procede.php",
  12.            data:"titulo="+title,
  13.            beforeSend:inicioEnvio,
  14.            success:llegadaDatos,
  15.            timeout:4000,
  16.            error:problemas
  17.          });
  18.     });
  19. });
  20.  
  21. function inicioEnvio()
  22. {
  23. $("#lista-usuario").html('<img src="ajax-loader.gif">');
  24. }
  25. function llegadaDatos(respuesta) {
  26.  
  27.     $("#lista-usuario").html(respuesta.dato1);
  28.     $("#lista-usuario").append(respuesta.dato2);
  29.     $("#art-list").html(respuesta.dato3);
  30. }
  31. function problemas()
  32. {
  33.   $("#lista-usuario").text('Problemas en el servidor.');
  34.  }

procede.php

Código PHP:
Ver original
  1. $gen = $_REQUEST['titulo'];
  2.    
  3.     $respuesta = new stdClass();
  4.        
  5.     $conexion=  mysql_connect("localhost","root","")
  6.                 or  die("Problemas en la conexion");
  7.  
  8.             mysql_select_db("canciones",$conexion)                
  9.             or  die("Problemas en la selección de la base de datos");
  10.            
  11.        
  12. //Consulta para el primer elemento de la lista.
  13.    
  14.     $Consul_primer = mysql_query("SELECT * FROM $gen ORDER BY RAND() LIMIT 1"); // $gen es la tabla
  15.    
  16.             if($query_r = mysql_fetch_assoc($Consul_primer)){
  17.            
  18.                 $id = $query_r['id'];
  19.                 $datatk = $query_r['datatk'];
  20.                 $rel = $query_r['rel'];
  21.                                    
  22.         $respuesta->dato1 .="<li><a data-tk='$datatk' rel='$rel' href='#'></a></li>";      
  23.                                
  24.            
  25.             }else{
  26.                 echo "Error al consultar registros";
  27.             }
  28.  
  29. // Esta es la segunda consulta para el resto de la lista   
  30.    
  31.    
  32.     $query="SELECT * FROM $gen WHERE id!= $id  ORDER BY rand()";
  33.  
  34.     if($query_run = mysql_query($query)){
  35.  
  36.         if(mysql_num_rows($query_run)==NULL){
  37.             echo 'No se obtuvo ningun resultado';
  38.                
  39.         }else{  
  40.        
  41.             while($query_row = mysql_fetch_assoc($query_run)){
  42.                
  43.                 $datatk = $query_row['datatk'];
  44.                 $rel = $query_row['rel'];
  45.                
  46.                
  47.             $respuesta->dato2 .="<li '><a data-tk='$datatk' rel='$rel' href='#'></li>";
  48.            
  49.             }
  50.         }      
  51.     }else{
  52.         echo mysql_error();
  53.         }
  54.    
  55.  
  56.     // ESTA CONSULTA ES PARA LOS ARTISTAS DE CADA GENERO
  57.    
  58.     $art_genero = mysql_query("SELECT artista FROM $gen ORDER BY artista ASC");
  59.            
  60.             if($fila = mysql_fetch_assoc($art_genero)){
  61.                
  62.                 $artista = $fila['artista'];
  63.                
  64.             $respuesta->dato3 .="<li><a href='#'><span class='artista'>$artista</span></a></li>";
  65.                
  66.             }else{
  67.                 echo "Error al consultar registros";
  68.             }
  69.  
  70. echo json_encode($respuesta);
  71.    
  72. mysql_close($conexion);
  #6 (permalink)  
Antiguo 12/04/2014, 16:20
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 9 años
Puntos: 38
Respuesta: Evitar conflicto entre metodos de jquery

Ok acabo de ver tu respuesta , me lo estoy mirando ..

He visto un par de cosas en tu código que creo que deberías cambiar..

en el ajax estas enviando por el metodo post

Código Javascript:
Ver original
  1. type: "POST",

por tanto en la recepción del post procede.php debería ser :

Código PHP:
$gen $_POST['titulo']; 
igual no tiene nada que ver pero yo nunca he usado request... o post o get.

la cadena que le estas pasando por ajax es Json
Código Javascript:
Ver original
  1. dataType: "json",
por tanto :
Código PHP:
data:"titulo="+title
debería ser :
Código PHP:
Ver original
  1. data: {titulo:title}

Luego creo que quizás te falla el proceso de la consulta sql ... en el dato 2 porque que variable $id no sea igual a null
Código MySQL:
Ver original
  1. SELECT * FROM $gen WHERE id!= $id  ORDER BY rand()
Código PHP:
if(mysql_num_rows($query_run)==NULL){
            echo 
'No se obtuvo ningun resultado';
                
        } 
no quiere decir que este fallando la consulta! y cuando trabajas por ajax no ves directamente los warnings de SQL .. alhomejor te devuelve null porque hay un error .. No porque la consulta este mal sino por en el control php de esa var $id ...
que no la estés recibiendo bien , que no compruebes si existe etc...
podrías mostrar donde recoges en php la $id ??

Saludos!
  #7 (permalink)  
Antiguo 12/04/2014, 16:44
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Evitar conflicto entre metodos de jquery

La variable $id la recogo de la anteior consulta porque en en $id guardo el numero que recoge al azar de la base de datos .
  #8 (permalink)  
Antiguo 13/04/2014, 05:16
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 9 años
Puntos: 38
Respuesta: Evitar conflicto entre metodos de jquery

Cita:
Iniciado por lightning2014 Ver Mensaje
La variable $id la recogo de la anteior consulta porque en en $id guardo el numero que recoge al azar de la base de datos .
OK , ayer era tarde y ya no veía!

a ver en principio esta todo bien , hiciste los cambios que te comente?

Creo que el fallo esta aqui :

Código HTML:
Ver original
  1. $("#lista-usuario").html(respuesta.dato1);
  2.     $("#lista-usuario").append(respuesta.dato2);

Creo que el problema esta cuando sobrescribes el DIV con la petición ajax ... como la respuesta va en el mismo ID se sobrescriben, haz la prueba y crea 1 id para cada respuesta y nos dices!

tipo :
Código HTML:
Ver original
  1. <div id="uno">
  2.     <ul id="lista-usuario"></ul>
  3.  <ul id="lista-usuario2"></ul>
  4. </div>

y en el Jq
Código Javascript:
Ver original
  1. $("#lista-usuario").html(respuesta.dato1);
  2.     $("#lista-usuario2").append(respuesta.dato2);
  3.     $("#art-list").html(respuesta.dato3);

Saludos!
  #9 (permalink)  
Antiguo 13/04/2014, 10:54
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.527
Antigüedad: 9 años, 10 meses
Puntos: 966
Respuesta: Evitar conflicto entre metodos de jquery

Cita:
Iniciado por Djoaq Ver Mensaje
Creo que el fallo esta aquí:

Código JavaScript:
Ver original
  1. $("#lista-usuario").html(respuesta.dato1);
  2. $("#lista-usuario").append(respuesta.dato2);

Creo que el problema esta cuando sobrescribes el DIV con la petición ajax.
Con el método append, se añaden elementos a un contenedor, no sustituyen el contenido del mismo, como sí sucede con el método html.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: javascript, javascript+php
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 10:34.