Archive for the ‘ jQuery ’ Category

Agregar clase Active al menu de navegación basada en la URL actual

Creo que el titulo lo dice todo, esta es la mejor forma de resaltar el item del menu.

     <nav >
          <ul>
               <li><a href="/">Inicio</ a></li>
               <li><a href="/acercade/">acercade</ a></li>
               <li><a href="/clientes/">clientes</ a></li>
               <li><a href="/contactenos/">contactenos</ a></li>
          </ul>
     </nav >

y si ud esta en esta URL:

http://sitio.com/acercade

     $(function() {
       $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
     });

jQuery 2.0 final disponible

jquery2

Cerca de siete años desde su lanzamiento inicial (agosto 2006) el equipo de desarrollo de esta biblioteca de software libre y código abierto tan importante en el mundo del desarrollo web acaba de liberar jQuery 2.0.

Esta herramienta con la que hacer aplicaciones web avanzadas del lado del cliente ha dado a conocer de forma oficial a través de su blog la llegada de una versión que pese a reducir su tamaño y su compatibilidad con jQuery 1.9 a nivel de API, parece carecer de nuevas funcionalidades que destaquen de forma significativa respecto de la versión anterior.

Uno de los puntos más destacados con la llegada de jQuery 2.0 supone la retirada del soporte para navegadores como Internet Explorer 6, 7 y 8 en un gesto que ha dado mucho que hablar desde su anuncio. Aquellos interesados en seguir con el soporte de los navegadores de Microsoft mencionados tendrán que seguir empleando jQuery 1.9.

Todos aquellos que lo deseen tienen a su disposición completa información sobre las características de esta nueva versión o incluso descarga de los archivos desde el CDN de jQuery pueden hacerlo en blog.jquery.com (en los próximos días también lo estará desde los CDNs de Google y Microsoft).

Con la llegada de esta nueva versión también se ha dado a conocer que la rama 1.x sigue abierta y que próximamente será lanzada una nueva versión con jQuery 1.10.

Download the compressed, production jQuery 2.0.0

Download the uncompressed, development jQuery 2.0.0

Si quiere ver mas aspectos relacionados a esta nueva version los remito a http://elavefenix.net

Llamado Ajax con Javascript y jQuery

Algunos conocieron el Ajax con jQuery o el mismo Mootools, pero realmente los llamados asincrónicos son tan viejos como el mismo Javascript.

En esos tiempos donde las cuentas de hotmail eran de 10MB y buscábamos resultados en la web a través de Altavista y no de Google, los llamados asincronicos eran diferentes:

ajax desde javascript nativo


  var xmlhttp;
  xmlhttp = GetXmlHttpObject();
  if(xmlhttp == null){
    alert("Boo! Your browser doesn't support AJAX!");
    return;
  }
  xmlhttp.onreadystatechange = stateChanged;
  xmlhttp.open("GET", "http://www.google.com", true);
  xmlhttp.send(null);

  function stateChanged(){
    if(xmlhttp.readyState == 4){
      // do something with the response text
      alert(xmlhttp.responseText);
    }
  }
  function GetXmlHttpObject(){
    // IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }

    //IE5, IE6
    if(window.ActiveXObject){
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
  }

y las cosas han cambiado y mucho

ajax desde jQuery


  $.ajax({
    url: 'http://www.google.com',
    success:function(data){
      alert(data);
    }
  });

Como se puede ver claramente, el método AJAX jQuery es mucho más fácil. Se le da una URL de solicitar, y después se le da un conjunto de instrucciones si se realiza una solicitud exitosa. Fácil!

Permitir solo numero en un Input Text con jQuery

Apesar que existen varios plugins de jQuery que hacen esto en ocaciones es mejor utilizar esta simple función y obtener los excelentes resultados, bien dicen por ahi “Una sencilla suele ser la mejor solución”

funcion en javascript:

	$(document).ready(function(){ 
	$("#txtNumbers").keydown(function(event) {
	   if(event.shiftKey)
	   {
	        event.preventDefault();
	   }

	   if (event.keyCode == 46 || event.keyCode == 8)    {
	   }
	   else {
	        if (event.keyCode < 95) {
	          if (event.keyCode < 48 || event.keyCode > 57) {
	                event.preventDefault();
	          }
	        } 
	        else {
	              if (event.keyCode < 96 || event.keyCode > 105) {
	                  event.preventDefault();
	              }
	        }
	      }
	   });
	});

Codigo HTML

	< input type="text" id="txtNumbers" />

Obtener el año actual con Javascript y jQuery

Para obtener el año actual por medio de javascript usaremos la función

getFullYear()

que nos devuelve el año correspondiente del objeto fecha en formato completo.

	var fecha = new Date();
	var ano = fecha.getFullYear();
	alert('El año actual es: '+ano);

En jQuery podemos sacar insertar dinámicamente el valor del año actual por ejemplo de la siguiente forma (dentro de un elemento con id: fecha):

	var anio = (new Date).getFullYear();

	$(document).ready(function() {
	  	$("#fecha").text( anio );
	});

DataTables Plugin con jQuery UI, PHP PDO y MySQL

Excelente ejemplo de Edgardo Ramírez León donde crea un DataTable con jQuery php y mysql

5 formas de usar Ajax con jQuery

Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asíncronas.

$.load()
$.get()
$.post()
$.getJSON()
$.getScript()

$.load()

Se trata de la función que más me gusta de jQuery ya que hace que una de las tareas más comunes de desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Este ejemplo, traído de la página de documentación de jQuery, se encarga de lanzar una petición a la URL /Main_Page (usa URL Rewrite) y del HTML de respuesta cogemos los elementos #jq-p-Getting-Started li y lo insertamos dentro de #links.
Simplemente genial, cómodo y rápido.

$.get

Se trata del función sencilla con la que podemos lanzar peticiones GET al servidor mediante Ajax.

$.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
   }
);

Mediante el paso de 3 opciones, de las cuales 2 son opciones ( condicionales mejor dicho) puedes lanzar la petición al fichero (1º) con los parámetros (2º) y tratar la respuesta mediante un callback (3º).

$.post

Al igual que la anterior, esta función permite enviar peticiones POST mediante ajax.

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
   }
);

Igual de fácil que en el caso anterior.

$.get()

Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la opción más cómoda es la de usar este método que permite obtener la respuesta JSON evaludada en la función callback.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
   alert("JSON Data: " + json.users[3].name);
});

Teniendo en cuenta el navegador, se usará el objeto JSON nativo o se usará el sistema basado en eval().

Aunque técnicamente no es una petición Ajax, se trata de una petición al servidor y por eso tiene cabida en el post.

$.getScript("test.js", function(){
   alert("Script loaded and executed.");
});

Con este método podemos cargar asíncronamente un fichero Javascript y mediante el parámetro (2) callback podemos ejecutar código Javascript usando el que está en el fichero js que queremos cargar (1).

A %d blogueros les gusta esto: