Tema: Evitar conflicto entre metodos de jquery
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/04/2014, 13:36
lightning2014
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 10 años, 8 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);