Cambiar el src de una imagen con javascript o jQuery

Vamos con una entrada rápida de Javascript ¿Cómo cambio el src de una imagen de forma dinámica? No es lo más recomendable para una web por temas de posicionamiento, pero puede ser una solución útil para una aplicación web de uso interno.

Vamos a suponer que tenemos una imagen llamada image1.jpg y que al clickar en un elemento esta cambia por otra que se llama image2.jpg:

<img src="image1.jpg" id="img1" alt="primeraImagen" />

<script>
//así con JS normal
//accediendo directamente a src
function cambiarImagenJS(){
  document.getElementById("img1").src="image2.jpg";
}

//así con jQuery
//haciendo uso de la función attr()
function cambiarImagenjQ(){
  $("#img1").attr("src","image2.jpg");
}
</script>

La idea sería vincular la función a un evento (un click, el cambio de estado de un checkbox o radio, llenar un campo de texto…) y cambiar el valor. En el ejemplo damos por fijo el id del elemento, en la práctica seguramente sería mejor pasárselo a la función. En ese caso ya miráis que se adapta mejor a vuestras necesidades.

Anuncios

jQuery: comodines para los selectores

Una de las comodidades de jQuery es la versatilidad que nos da a la hora de trabajar con diversos selectores. Lo que muchos no saben, o lo intuyen pero no lo tienen claro, es que existen diversos comodines para usar los selectores de jQuery. Vamos a verlos:

Seleccionar por un prefijo: Tenemos la posibilidad de usar un selector que actúe sobre los elementos que tengan un atributo cuyo valor sea igual a la cadena que le pasemos, o que empiecen por esa cadena seguida de un guión. La sintaxis sería tal que así: jQuery( “[attribute|=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="pepe">Some text</div>
<div id="pepe-paya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id|='pepe']" ).hide();
</script>

Seleccionar por un fragmento de una cadena: Con esta opción lo que buscaríamos sería un fragmento de texto dentro del valor del atributo, en cualquier posición. La sintaxis sería tal que así: jQuery( “[attribute*=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepepaya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id*='pepe']" ).hide();
</script>

Seleccionar por una palabra aislada concreta: El título es un pelín confuso, lo se, pero te lo explico. Con esta opción buscaríamos dentro del atributo una palabra concreta, que puede estar delimitada por espacios o ser el valor único del atributo. La sintaxis sería tal que así: jQuery( “[attribute~=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casa pepe">Some text</div>
<div id="pepe">Some other text</div>
<div id="pepepaya">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id~='pepe']" ).hide();
</script>

Seleccionar por el final del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor termine con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute$=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el primer div y dejaría los otros dos
$( "div[id$='pepe']" ).hide();
</script>

Seleccionar por el principio del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor comience con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute^=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el segundo div y dejaría los otros dos
$( "div[id^='pepe']" ).hide();
</script>

Eliminar un elemento de un array dando su valor en Javascript

Vamos con una función de Javascript, en la cual le pasaremos un array y una cadena con el valor que queremos eliminar. De esta forma podremos eliminar dicho valor sin saber el índice en el que está almacenado en el array.

//le pasamos a la función el array
//y el valor
function borraItemValor(array, valor){
    for(var i in array){
        if(array[i]==valor){
            array.splice(i,1);
            break;
        }
    }
}

Puedes probarla con algo como esto:

var unarray = ["uno", "dos", "tres", "cuatro"];
borraItemValor(unarray, "dos");

Javascript: Obtener el último carácter de una cadena

Ayer veíamos cómo obtener la primera letra de una cadena, hoy vamos a ver cómo obtener la última. Básicamente es lo mismo que en el otro ejemplo: usamos la función charAt(), pero en este caso en vez de un 0 le pasamos la longitud de la cadena restándole el último carácter (obtenemos la longitud a través de la propiedad length de la cadena). Tal que así:

#Un ejemplo donde haremos un alert
#de la última letra de una cadena

var cadena = "abc";
window.alert(cadena.charAt(cadena.length-1));

Javascript: obtener el primer carácter de una cadena.

¿Cómo se obtiene el primer carácter de una cadena con javascript? Pues es muy simple: con la función charAt(). Dicha función recibe como parámetro la posición dentro de la cadena en la que queremos buscar y devuelve el carácter que está en esa posición. Así que para obtener el primer carácter tenemos que pasarle un 0. Tal que así:

var cadena= "cadena";
var fstChar = cadena.charAt(0);

jQuery: enviando un formulario con ajax

No sabía sobre qué escribir, pero esta semana me preguntaron por esto así que puede ser cosa buena contarlo también por aquí.

Bueno, el primer punto a tener en cuenta es que jQuery nos ofrece varios métodos para realizar envío por ajax: el método post() (que hace una petición por post), el método get() (lógicamente por get) o el método ajax(). Para este ejemplo usaremos este último.

jQuery, por otra, parte nos permite no enviar todo el formulario sino sólo una lista de valores que podemos coger nosotros de los campos para, por ejemplo, realizar validaciones que necesiten consultas del lado del servidor. Pero para el ejemplo enviaremos todo el formulario.

En este caso vamos a suponer que tenemos un formulario con el id formulario que tenemos que enviar a una página llamada procesa.php, que a su vez nos devuelve una cadena de texto informándonos del éxito de la operación. La acción del envío se activa cuando hacemos click sobre un elemento con el id enviar. Sobre la cabecera de nuestro formulario hay un div con el id resultado donde podemos informar al usuario del resultado de su envío. Vamos entonces con el código jQuery:

<script type="text/javascript">   
$(function(){
  $("#enviar").click(function(){
    $("#resultado").html("<p id='enviando'>Enviando datos</p>");
    $.ajax({
      method: "POST",
      url: "procesa.php",
      data: $("#formulario").serialize()
    })
    .done(function( msg ) {
      $("#enviando").hide();
      $("#resultado").html("Formulario enviado:" + msg);
    })
    .fail(function() {
      $("#enviando").hide();
      $("#resultado").html("Se ha producido un error y no se han podido procesar los datos");
    })
  });
});
</script>

Deshabilitar el botón “atrás” del navegador con Javascript

Esto fue una ñapa que hice en su día para un curso en el que era alumno. Uno de los profesores se pispó de que en los exámenes de la plataforma virtual los alumnos podían hacer todo el examen, ver la autocorrección de la plataforma, volver hacia atrás pulsando el botón de retroceder del navegador y repetirlo. Como había buen rollo y sabía que yo era programador me preguntó si había una forma de bloquear el botón “retroceder” del navegador… y se lo arreglé con esto:

//primero añadía esta línea de javascript
<script type="text/javascript">
    window.history.forward();
    function sinVueltaAtras(){ window.history.forward(); }
</script>
//y en el body invocaba la función en la carga
<BODY onload="sinVueltaAtras();" onpageshow="if (event.persisted) sinVueltaAtras();" onunload="">

¿Qué hace este código? Pues no deshabilita exactamente el botón atrás, lo que hace es que la página automáticamente se vaya hacia delante. Al ponerlo en la cabecera de la página que cargaba las preguntas hacía que si el alumno retrocedía al cargar la página automáticamente volviera a la última.

La mejor solución habría sido que la plataforma no realizara la autocorrección hasta haber enviado el examen… pero eso ya se lo habría tenido que cobrar.