Abrir reproductor en ventana nueva mediante javascript

Necesitaba que un reproductor basado en jQuery se cargase en un popup y desapareciese de la ventana original para que el usuario pudiese navegar por la página y seguir escuchando las canciones sin interrupción.

Decidí usar variables de sesión. En la página original condicioné que se mostrase el reproductor a si la siguiente variable era falsa:


if Session("ventana_reproductor_abierta") = false then

...

end if


Al reproductor le añadí un enlace y usé jQuery para enlazarle el evento.


//Busco el enlace al que hay que añadirle el evento click.

var botonReproductorVentanaNueva = $('#columnaUno #reproductor-ventana-nueva');

botonReproductorVentanaNueva.click(function(){

abrePopup('carga_reproductor_ventana.asp','Titulo',300,400);


});

function abrePopup(url,titulo,h,w){

newwindow=window.open(url,titulo,'height=' + h + ',width=' + w);
if (window.focus) {newwindow.focus()}
return false;

}


El script ASP 'carga_reproductor_ventana.asp' se asegura de establecer la variable de sesión a verdadero, de manera que al recargarse la página original no se muestre el reproductor:


Session("ventana_reproductor_abierta") = true


Ahora viene la parte difícil. Necesitamos que cuando la ventana abierta se cierre, se devuelva la variable de sesión a falso y se recargue la página que lanzó el popup. Para ello necesitamos una función poco documentada llamada window.onbeforeunload que se lanza cuando uno cierra la ventana. Además necesito llamar a otro script ASP mediante AJAX que se encargará de devolver la variable de sesión al valor adecuado.


//Funciones para el reproductor cargado en un popup.

$(document).ready(function(){

//Controlo el evento que se dispara cuando intenta quitar la página.

window.onbeforeunload = function() {

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cierra_ventana_reproductor.asp"

});

window.opener.location.reload();


}

});


Como se ve, window.opener permite acceder a la ventana que llamó al popup, y location.reload() recarga la página. El script 'cierra_ventana_reproductor.asp' establece la variable de sesión al valor necesario.


<%

Session("ventana_reproductor_abierta") = false

%>

Función que vacía campos de un formulario que tengan en el contenido un patrón común

$(document).ready(function(){

//Asume que los campos de tipo input text empiezan con "Escriba aquí...",
// y vacía esos campos en focus, siempre que tengan ese valor, y vuelve a escribir ese texto
// en blur si se ha dejado el campo vacío.

var campos=$("form :input[value *= Escriba aqu]");

$.each(campos,function(){

//Por cada campo, compruebo si el contenido contiene la cadena "escriba aqu".

var contenido=$(this).attr("value");

$(this).bind("focus", function(){

if ($(this).attr("value") == contenido){

$(this).attr("value","");

}

});

$(this).bind("blur", function(){

if ($(this).attr("value")==""){

//Ha dejado el campo vacío, así que vuelvo a ponerle de texto lo que había antes de entrar en el foco.

$(this).attr("value",contenido);

}

});


});


});

Guardar una cuenta de reproducciones usando AJAX en ASP

Primero localizamos el botón de play del reproductor y asociamos una función al evento click:


var botonPlay = $('#player_play_archivos');

$(botonPlay).click(function(){

$('#jquery_jplayer').play();

//Necesito los datos de la canción que se está escuchando en este momento.

almacenaReproduccion();

});


La función almacenaReproduccion() coge el nombre del archivo (en el ejemplo, la ruta completa), y la envía por AJAX al servidor.


function almacenaReproduccion(){


var cancion = myPlayList[playItem].filename;

//Los dos otros datos que necesito guardar son el id de la sesión y la fecha y hora
// actual, pero los recojo en el servidor.

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cuenta_reproduccion.asp",
data: "archivo=" + myPlayList[playItem].filename,

});


}


Como se ve, se llama a un archivo llamado 'cuenta_reproduccion.asp'. En el servidor añado el ID de la sesión actual y la fecha y la hora en la que se ha reproducido el archivo.



dim archivo
archivo = LimpiarRequest(Request("archivo"))

dim intCurrentPos, intFileNamePos

'Cojo el nombre del archivo encontrando la última barra
Do

intCurrentPos = InStr(intCurrentPos + 1, archivo, "/", vbTextCompare)
If intCurrentPos <> 0 then
intFileNamePos = intCurrentPos
else
intFileNamePos = intFileNamePos + 1
Exit Do
End If
Loop

dim FileName

If intFileNamePos <> 1 then

FileName = mid(archivo, intFileNamePos, len(archivo) - intFileNamePos + 1)

End If

'FileNamewExt contiene el nombre del archivo, sin la ruta.

'Necesitamos tanto el id de la sesión y la fecha y hora actuales.

dim idSesion,momentoActual

idSesion = Session.SessionID

momentoActual = now()

'Envío los datos a la consulta que realiza la inserción.

dim resultado

set resultado = setCuentaReproduccion(FileName,idSesion,momentoActual)

'response.write(resultado)

Explode en jQuery y javascript

Explode es una manera muy útil de sacar información de algún elemento de la web, ya que, por ejemplo, suelo almacenar ids de elementos de la base de datos como parte del nombre de un id o de una clase. Aquí tenemos un ejemplo de explode en jQuery, que sería un split:

var valor=$('#elemento').attr('id').split('filtro-id')[1];

La variable 'valor' contendría ahora 'id'.

Encuentra un elemento dentro de un elemento ya seleccionado en jQuery

Digamos que has seleccionado un div llamado #posts que contiene las entradas de un blog. Pero después necesitas modificar elementos concretos que están contenidos dentro de ese div. Se haría de la siguiente manera:

$('#posts')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

Evento onChange de un select con jQuery

Por lo general, al asociar eventos con el magnífico, glorioso, inimitable jQuery, usaríamos la función bind, pero en el caso del evento onChange de los select debemos hacerlo de otra manera.

var selectEscogido=$('#select-a-escoger');

$(selectEscogido).change(function(){

//instrucciones

}