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

%>

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

Parámetros opcionales en las funciones de javascript

Por desgracia, parece ser que no podemos especificar que un parámetro sea igual a un valor como haríamos en otros lenguajes, así que hay que comprobar dentro de la propia función si el parámetro que queremos tener como opcional es undefined, de la siguiente manera:


function Funcion(par1,par2,par3){

//código

if (par3===undefined){

//El par3, opcional, no se ha enviado

}

}

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

}

Ajax y problemas con el encoding

En algunos casos, aunque la base de datos parezca correcta, los navegadores no muestran bien los datos o tienen problemas con la codificación cuando se usan técnicas de Ajax. Para solucionarlo, hay que asegurarse de que las pequeñas páginas php que se encargan de realizar las operaciones de Ajax lleven un header apropiado. Además, conviene convertir los $_GET y los $_POST que se pasen desde javascript al charset correcto:

header('Content-type: text/html; charset=iso-8859-1');
//+
$texto = iconv("UTF-8", "iso-8859-1", $_POST['texto']);

Funciones JavaScript no definidas y Firebug

A menudo una página no funciona como debería y Firebug nos devuelve que una función de JavaScript está "not defined" o "undefined". Uno tiende a pensar que se debería a que no tiene acceso a la función y el tag script no ha funcionado bien por algún motivo, pero en realidad se suele deber a un error de sintaxis. Asegúrate de que el código javascript sea correcto. También suele pasar cuando desde un archivo .js llamas a funciones de otro (como librerías Prototype).

Pasar un array de PHP a JavaScript mediante JSON

Por algún motivo, pasar arrays de PHP a JavaScript es más complicado de lo que debería ser. Por fortuna, para arreglar el asunto podemos traducir el array de PHP a JSON.

Cualquier servidor de PHP mayor que el 5 tiene la siguiente función:

$arrayAJS=json_encode($arrayEnPHP);

Nota muy importante: nada más pasar el array PHP a JSON y enviarlo como parámetro, la función javascript lo considera un array normal y corriente. No hace falta deserializarlo.

Ejemplo de envío de datos mediante POST en AJAX

A pesar de la carga al servidor que implica, a menudo conviene enviar los parámetros para una operación mediante POST en vez de GET, ya que el GET escribe los parámetros en la url.

Para realizar una Request usando post, también debemos componer la lista de de parámetros como quedaría en la URL:

campo1=valor
$campo2=valor

Por ejemplo:

'campo1='+document.getElementById('campo1').value
+ '&campo2='+document.getElementById('campo2').value

Posteriormente, debemos enviar esos valores mediante la función send del objeto request.

ajax.open ('POST', url, true);
ajax.onreadystatechange=funcion;
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(valores);

El setRequestHeader es útil en caso de que el Content-Type se quiera cambiar a XML en vez de dejarlo por defecto en el fichero php al que se llame, por razones de prueba.