Podcast #28 – ¿Debería aprender Jquery en el 2020?

En este podcast te diré porque deberías aprender jquery en este 2020 a pesar de que sea una tecnología vieja, aún tiene mucha relevancia en el desarrollo de software.

Puedes escuchar todos mis podcast de programación dando clic aquí.

¿Cómo utilizar serialize de jquery en un elemento que no es form? #js #jquery

Para utilizar serialize() de jquery en un conjunto de elementos que estén dentro de un padre que no sea un formulario puede ser posible, para ello te muestro un ejemplo suponiendo que el padre se llama «PadreQueNoEsForm»:


var parametros=$("#PadreQueNoEsForm :input").serialize();

Crear un Chat con SignalR, Javascript y C# MVC .Net

En este video introductorio a SignalR te enseñare la facilidad con que se trabaja con SignalR y un proyecto web MVC .Net.

En este video haremos un chat sencillo para comprender como funciona SignalR.

¿Cómo utilizar la función serialize() de jquery en controles que no están dentro de un form? #js #jquery

La función serialize de jquery nos sirve para serializar los elementos que se encuentra dentro de un formulario en específico, es decir, al aplicar la función obtenemos los elementos preparados para una petición al backend (campo1=1&campo2=2…).

Para que podamos hacer esta funcionalidad pero en elementos que no están dentro de un form sino dentro de un div por ejemplo lo podemos hacer de la siguiente manera:


<div id="UnDiv">
   <input type="text" name="campo1">
   <select name="campo2">
        <option value="1">1</option>
        <option value="2">2</option>
   </select>
   <input type="text" name="campo3">
</div>


//selector de jquery :input
var parametros = $('#UnDiv :input').serialize();

Recuerda poner el atributo name en los elementos a serializar y también otro tip, el selector «:input» selecciona todos los elementos de formulario, tanto input, select, textarea etc.

¿Cómo copiar el contenido al portapapeles de un elemento HTML al dar clic en él?

Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.

Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.

En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.

HTML


<table>
      <tr>
           <td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
           <td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
      </tr>
</table>


JAVASCRIPT


 function Copiar(element) {
        //creamos un input que nos ayudara a guardar el texto temporalmente
        var $temp = $("<input>");
        //lo agregamos a nuestro body
        $("body").append($temp);
        //agregamos en el atributo value del input el contenido html encontrado
        //en el td que se dio click
        //y seleccionamos el input temporal
        $temp.val($(element).html()).select();
        //ejecutamos la funcion de copiado
        document.execCommand("copy");
        //eliminamos el input temporal
        $temp.remove();
    }

¿Cómo hacer que una caja de texto solo acepte valores numéricos positivos? #jquery #js #html5

Para lograrlo vamos a utilizar el disparador keyup y jquery y haremos un selector por clase, en este caso la llamaremos positive, así podemos reutilizarlo en las cajas de texto que deseemos, código a continuación:

Código HTML


 <input value="" class="positive" min="1" type="number" step="1" name="cajita" id="cajita" />
 <input value="" class="positive" min="1" type="number" step="1" name="cajita2" id="cajita2" />

Código Javascript


$(".positive").keyup(function () {

            var valor = $(this).prop("value");

            //evaluamos si es negativo, y ponemos 1 por defecto
            if (valor < 0)
                $(this).prop("value", "1");
})

¿Cómo enviar un archivo por Ajax de #jquery?

Para enviar un archivo por medio de Ajax en realidad es muy fácil, sobre todo con la función Ajax de jquery, para ello lo demuestro a continuación:
Primero tenemos el código html siguiente, el cual tiene un formulario con un campo de texto y un input file, es importante que el atributo del form enctype sea multipart/form-data, si no es asi no se enviara el archivo.


<form id="frmFormulario" enctype="multipart/form-data">
    <input type="text" name="uncampo">
    <input type="file" name="archivo">
    <input type="submit" value="Enviar">
</form>

Ahora tenemos que seleccionar(selectores de jquery) el formulario para que haga el envió por Ajax (Ver: ¿Cómo hacer una petición Ajax por medio de submit?) y para ello utilizo el siguiente código en javascript el cual esta comentado a detalle:


  $(document).ready(function () {

        //sobreescribimos el metodo submit para que envie la solicitud por ajax
        $("#frmFormulario").submit(function (e) {

            //esto evita que se haga la petición común, es decir evita que se refresque la pagina
            e.preventDefault();

            //ruta la cual recibira nuestro archivo
            url="@Url.Content("~/Archivo/Recibe")"

            //FormData es necesario para el envio de archivo,
            //y de la siguiente manera capturamos todos los elementos del formulario
            var parametros=new FormData($(this)[0])

            //realizamos la petición ajax con la función de jquery
            $.ajax({
                type: "POST",
                url: url,
                data: parametros,
                contentType: false, //importante enviar este parametro en false
                processData: false, //importante enviar este parametro en false
                success: function (data) {

                   alert("Se capturo el archivo con éxito")
                },
                error: function (r) {

                    alert("Error del servidor");
                }
            });

        })

    })

Y este es el trabajo que se hace en el front-end, ahora solo queda hacer el método en el back-end el cual capture el archivo y lo guarde o realice la acción deseada con el fichero; por ejemplo en Mvc.Net seria de la siguiente manera:

//controlador de mvc.net
public class Archivo : Controller{
  public ActionResult Recibe(string uncampo, HttpPostedFileBase archivo)
        {

          //aqui va el codigo que deseemos para manipular el archivo

       }
}

Y así de fácil se envía un archivo por medio de Ajax. Dudas o comentarios pueden hacérmelos llegar y yo les respondo en breve.

Cambiar una imagen al dar clic en una imagen en miniatura con #jquery, #galería

Para crear una mini galería básica como la siguiente (den clic en las miniaturas):

Lo podemos hacer de la siguiente forma:

HTML

<div id="thumbs">
   <img style="width: 50px;" alt="" src="../img/images/at.jpg" data-img="../img/images/a.jpg" />
   <img style="width: 50px;" alt="" src="../img/images/bt.jpg" data-img="../img/images/b.jpg" />
</div>

<div>
    <img id="imagenGrande" style="width: 500px;" alt="" src="../img/images/a.jpg" />
</div>

Jquery

$(document).ready(function(){

	//selector de imagenes a aplicar la funcionalidad de click
	$("#thumbs img").click(function(){

		//obtenemos la imagen a mostrar
		urlImagenGrande=$(this).data("img");

		//asignamos la imagen por medio de prop
		$("#imagenGrande").prop("src",urlImagenGrande);

	})

});

Utilizando la propiedad prop procedemos a cambiar el atributo src de img al momento que se da clic en la miniatura. De esta manera queda la funcionalidad dinámica gracias al selector de jquery ($(“#thumbs img”)).

Marcar activa una opción de un menú al darle clic con #jquery

Ejemplo (da clic en una opción).

Para hacer que un menú nos indique cual es la opción activa, o la sección en que nos encontramos en una página web podemos hacer uso de los selectores de jquery y la función addClass y removeClass.

A continuación anexo el código que permite hacer esto.

Css


#menu .opcion{
	width:20%;
	float:left;
	cursor:pointer;
	background:#ddd;
	color:#000;
	padding:5px 0px 5px 0px;
	text-align:center;

}

#menu .opcionActiva{

	background:#000;
	color:#fff;
}

Html


<div id="menu">
    	<div class="opcion">opción 1</div>
       	<div class="opcion">opción 2</div>
        <div class="opcion">opción 3</div>
        <div class="opcion">opción 4</div>
        <div class="opcion">opción 5</div>
</div>

Javascript


$(document).ready(function(){

	//selector a la clase opcion para darle función al evento click
	$(".opcion").click(function(){

		//eliminamos la clase activa por si una opción la contiene
		$(".opcion").removeClass("opcionActiva");

		//asignamos la clase opcionActiva a la opción presionada
		$(this).addClass("opcionActiva")

	})
})

Simplemente hago uso de addClass y removeClass de jquery para añadir o remover la clase de CSS opcionActiva.

La función addClass sirve para agregar una clase de css a un elemento y la función removeClass sirve para lo contrario.