1

Saludos amigos de stack... mi problema para muchos será sencillo pero yo no consigo como hacerlo funcionar, tengo el siguiente menu que es un playlist

 <ul id="playlist" class="playlist hidden text-center mt-3">
 <li class="btn btn-sm btn-outline-primary mr-2" id="track0" song="" track="linkin park.m3u" title="" artist="">Linkin Park</div>
 <li class="btn btn-sm btn-outline-primary mr-2" id="track5" song="" track="salsa.m3u" title="" artist =" ">Salsa</li>
 </ul>

Este menu contiene una clase "track" con un archivos de playlist m3u... quiero que al darle click a cada uno de ellos se envie la información de la clase "Track" a jquery para procesarlo en un get url en ajax... muestro el codigo jquery

var track = "informacion de la clase track aqui";

$.ajax({
type: "GET",
url: (track),  <----- procesarla aqui ------>
    success: function(data) {
        //and then parse    
        playlist = M3U.parse(data);    
         
        //next = (audio, playlist, 0);
        i = 0;
        if (i < playlist.length) {
        audio.src = playlist[i++].file;
        title = (playlist[0]['title']);
        artist = (playlist[0]['artist']);       
        $("#title").removeAttr('id');
        $('.title').html(title);
        $('.artist').html(artist);
        $("#track0").attr('song', (audio.src));
        $("#track0").attr('title', (title));
        $("#track0").attr('artist', (artist));
        
        $("#track5").attr('song', (audio.src));
        $("#track5").attr('title', (title));
        $("#track5").attr('artist', (artist));          
        
        }
    }
});

intente con este código

var track = $("li").attr('track');

y colocando la varible track en la url ajax asi url: (track); el problema está en que el primer click lo toma, el segundo click del menu da error y no lo procesa.

entonces la pregunta es como inserto los datos de la clase "track" de cada click del menu en la variable track para que cada vez que intercambie de link ajax lo lea y muestre la informacuón de cada uno... Agradecido si alguien me puede orientar...

$('li').click(function(){
var track = ($(this).attr('track'));    
}); 

El código anterior me reconoce los eventos click y me muestra el atributo track, el problema es que está en otra función y no se como sacar el resultado de allí y llevarlo a la variable global ajax para que pueda ser leído...

intente tomar cada link en una variable para procesarlo, aun no se que hacer, son solo ideas que voy desarrollando a ver si doy con la solución. este es el ejemplo.

var track0 = $("#track0").attr('track');
var track5 = $("#track5").attr('track');

tengo las información de la clase alli también. buscando otra manera de solucionar... hasta alli tengo el codigo...

Saludos y gracias

1 respuesta 1

0

jQuery te permite obtener elementos por su atributo, solo enciérralo entre corchetes: $("[track]"), después creas el evento click y, dentro, obtienes el valor y ejecutas tu petición AJAX.

Si necesitas usar la variable track en otras funciones, defínela en contexto global y accede a ella en cada función:

let track = 'Aquí tu valor inicial';

$("[track]").on('click', function() {
  track = $(this).attr('track');
  console.log(track);
  $.ajax({
  type: "GET",
  url: (track),
    success: function(data) {
        //and then parse    
        playlist = M3U.parse(data);    
         
        //next = (audio, playlist, 0);
        i = 0;
        if (i < playlist.length) {
        audio.src = playlist[i++].file;
        title = (playlist[0]['title']);
        artist = (playlist[0]['artist']);       
        $("#title").removeAttr('id');
        $('.title').html(title);
        $('.artist').html(artist);
        $("#track0").attr('song', (audio.src));
        $("#track0").attr('title', (title));
        $("#track0").attr('artist', (artist));
        
        $("#track5").attr('song', (audio.src));
        $("#track5").attr('title', (title));
        $("#track5").attr('artist', (artist));          
        
        }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="playlist" class="playlist hidden text-center mt-3">
 <li class="btn btn-sm btn-outline-primary mr-2" id="track0" song="" track="linkin park.m3u" title="" artist="">Linkin Park</div>
 <li class="btn btn-sm btn-outline-primary mr-2" id="track5" song="" track="salsa.m3u" title="" artist =" ">Salsa</li>
</ul>

3
  • tenia la solución a la mano y no la vi... funciona bien tu código, solo que se me invalida el play del reproductor ya que se encierra todo el codigo en la función del click... es por eso que necesitaba la variable global para no invalidar el resto del codigo... saludos y gracias por tu respuesta. te deje el like Commented el 13 jul. 2020 a las 20:43
  • Actualicé la respuesta, definiendo la variable fuera de la función.
    – Triby
    Commented el 13 jul. 2020 a las 20:58
  • movi el código dentro de la función del reproductor y así pude evitar el problema de los play. ya que uso play por el boton del reproductor y por el boton del playlist. hasta ahora funciona, ahora me sale una ventana en la consola sobre una ejecución del play sin interactuar el usuario, ya eso es otra cosa.... saludos Commented el 13 jul. 2020 a las 22:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.