Evitar conflicto entre metodos de jquery

[lightning2014]

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:

function llegadaDatos(respuesta) {
 
 //accedo a sus objetos hijos "dato1, dato2 y dato3"
 
        $("#lista-usuario").html(respuesta.dato1);
    $("#lista-usuario").html(respuesta.dato2);
    $("#art-list").html(respuesta.dato3);
}
 

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.

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>"}

[Alexis88]

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

[lightning2014]

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??

[Djoaq]

Iniciado por lightning2014

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:

function llegadaDatos(respuesta) {
 
 //accedo a sus objetos hijos "dato1, dato2 y dato3"
 
        $("#lista-usuario").html(respuesta.dato1);
    $("#lista-usuario").html(respuesta.dato2);
    $("#art-list").html(respuesta.dato3);
}
 

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:

<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! .

[lightning2014]

Este es el html:

Código HTML:

<div id="bloque_geners">
        <ul class="gnr">
                
                    <li><a class="lnk" href="#" title="musica1">Alternativo</a></li>
                    <li><a class="lnk" href="#" title="musica2">Anime</a></li>
                    <li><a class="lnk" href="#" title="musica3">Árabe</a></li>
                    <li><a class="lnk" href="#" title="musica4">Axe</a></li>
                    <li><a class="lnk" href="#" title="musica5">Bachata</a></li>
                    <li><a class="lnk" href="#" title="musica6">Baladas</a></li>
                    <li><a class="lnk" href="#" title="musica7">Baladas de oro</a></li>
                    <li><a class="lnk" href="#" title="musica8">Baladas en inglés</a></li>
                    <li><a class="lnk" href="#" title="musica9">Batucada</a></li>
                    <li><a class="lnk" href="#" title="musica10">Boleros</a></li>
                    <li><a class="lnk" href="#" title="musica11">Brasileras</a></li>
                    <li><a class="lnk" href="#" title="musica12">Chaquenadas</a></li>
                    <li><a class="lnk" href="#" title="musica13">Chicha</a></li>                        
                    <li><a class="lnk" href="#" title="musica14">Coreografía</a></li>
                    
        </ul>
</div>
 
<div id="uno">
    <ul id="lista-usuario"></ul>
</div>
<div id="dos">
    <ul id="art-list"></ul>
</div>
 

Javascript:

Código Javascript:

$(document).ready(function() {
    $('.gnr a').on('click', function(){
        var title = $(this).attr('title');
        
        $.ajax({
 
           async:true,
           type: "POST",
           dataType: "json",
           contentType: "application/x-www-form-urlencoded",
           url:"procede.php", 
           data:"titulo="+title,
           beforeSend:inicioEnvio, 
           success:llegadaDatos,
           timeout:4000,
           error:problemas
         }); 
    });
});
 
function inicioEnvio()
{
$("#lista-usuario").html('<img src="ajax-loader.gif">');
}
function llegadaDatos(respuesta) {
 
    $("#lista-usuario").html(respuesta.dato1);
    $("#lista-usuario").append(respuesta.dato2);
    $("#art-list").html(respuesta.dato3);
}
function problemas()
{
  $("#lista-usuario").text('Problemas en el servidor.');
 }
 

procede.php

Código PHP:

$gen = $_REQUEST['titulo'];
    
    $respuesta = new stdClass();
        
    $conexion=  mysql_connect("localhost","root","")
                or  die("Problemas en la conexion");
 
            mysql_select_db("canciones",$conexion)                
            or  die("Problemas en la selección de la base de datos");
            
        
//Consulta para el primer elemento de la lista. 
    
    $Consul_primer = mysql_query("SELECT * FROM $gen ORDER BY RAND() LIMIT 1"); // $gen es la tabla
    
            if($query_r = mysql_fetch_assoc($Consul_primer)){ 
            
                $id = $query_r['id'];
                $datatk = $query_r['datatk'];
                $rel = $query_r['rel'];
                                    
        $respuesta->dato1 .="<li><a data-tk='$datatk' rel='$rel' href='#'></a></li>";       
                                
            
            }else{
                echo "Error al consultar registros";
            }
 
// Esta es la segunda consulta para el resto de la lista    
    
    
    $query="SELECT * FROM $gen WHERE id!= $id  ORDER BY rand()";
 
    if($query_run = mysql_query($query)){
 
        if(mysql_num_rows($query_run)==NULL){
            echo 'No se obtuvo ningun resultado';
                
        }else{  
        
            while($query_row = mysql_fetch_assoc($query_run)){
                
                $datatk = $query_row['datatk'];
                $rel = $query_row['rel'];
                
                
            $respuesta->dato2 .="<li '><a data-tk='$datatk' rel='$rel' href='#'></li>";
            
            }
        }       
    }else{
        echo mysql_error();
        }
    
 
    // ESTA CONSULTA ES PARA LOS ARTISTAS DE CADA GENERO
    
    $art_genero = mysql_query("SELECT artista FROM $gen ORDER BY artista ASC"); 
            
            if($fila = mysql_fetch_assoc($art_genero)){
                
                $artista = $fila['artista'];
                
            $respuesta->dato3 .="<li><a href='#'><span class='artista'>$artista</span></a></li>";
                
            }else{
                echo "Error al consultar registros";
            }
 
echo json_encode($respuesta);
    
mysql_close($conexion);
 

[Djoaq]

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:

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:

dataType: "json",
 

por tanto :

Código PHP:

  data:"titulo="+title, 
   

debería ser :

Código PHP:

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:

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!

[lightning2014]

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 .

[Djoaq]

Iniciado por lightning2014

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:

$("#lista-usuario").html(respuesta.dato1);
    $("#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:

<div id="uno">
    <ul id="lista-usuario"></ul>
 <ul id="lista-usuario2"></ul>
</div>
 

y en el Jq

Código Javascript:

$("#lista-usuario").html(respuesta.dato1);
    $("#lista-usuario2").append(respuesta.dato2);
    $("#art-list").html(respuesta.dato3);
 

Saludos!

[Alexis88]

Iniciado por Djoaq

Creo que el fallo esta aquí:

Código JavaScript:

$("#lista-usuario").html(respuesta.dato1);
$("#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