Archivo de la categoría: jQuery

Apartado para el mundo de la programación con JQuery

Calcular el ancho de un div a partir del ancho de la ventana – jQuery

	/**
     * Calcula el ancho de la columna central
     */
    function calculateWidthCenterColumn(){
        var window_width = $(window).width()
        var col_left = $('.main-col-filter').width();
        var col_right = $('.main-col-banners').width();

        var width_final = ( window_width - ( col_left + col_right ) );

        $('.main-col-items').css('width', width_final);
    }

    $(window).resize(function () {
        calculateWidthCenterColumn();
    });

Personalizar DatePicker jQuery UI – jQuery

function inicializarDatePicker(){
	$(function() {
		$('.datepicker').datepicker({
		    changeMonth: true,
			changeYear: true,
	    });
	    $('.datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd' );
	});
	jQuery(function($){
	   $.datepicker.regional['es'] = {
		  closeText: 'Cerrar',
		  prevText: '<Ant',
		  nextText: 'Sig>',
		  currentText: 'Hoy',
		  monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
		  monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
		  dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
		  dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
		  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
		  weekHeader: 'Sm',
		  //dateFormat: 'yy/mm/dd',
		  firstDay: 1,
		  isRTL: false,
		  showMonthAfterYear: false,
		  yearSuffix: ''};
	   $.datepicker.setDefaults($.datepicker.regional['es']);
	});
}

Funciones jquery despues de cargar datos con ajax

Seguro que más de uno se ha encontrado con el problema de que las funciones javascript o jquery han dejado de funcionar en elementos cargados con ajax, esto es debido a que las funciones son asociados a los elementos una vez la página es cargada, si más adelante cargas elementos con ajax estas funciones no se verán asociadas con dichos elementos.

Para dar solución a estos problemas propongo 2 opciones:

Cargar las funciones de nuevo después de realizar la carga con ajax, es decir:

$('.clase').submit( function(){
var id = $(this).attr('id');
// Enviamos la información usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#comentarios'+id).html(data);
cargarDeNuevoLasFunciones();
}
})
return false;
 });
$('.formComment').live( 'submit', function(){
  var id = $(this).attr('id');
  // Enviamos la información usando AJAX
  $.ajax({
  	type: 'POST',
  	url: $(this).attr('action'),
  	data: $(this).serialize(),
  	// Mostramos un mensaje con la respuesta de PHP
  	success: function(data) {
  		$('#comentarios'+id).html(data);
  		recalcularMasonry();
  	}
  })
  return false;
});

La función .live() de jQuery nos permite cargar contenido con ajax y si este debía tener alguna función asociada a los elemntos jQuery la asocia automáticamente.

Actualizar la url utilizando ajax

Ante todo decir que este código no es mio.

Al utilizar ajax nos encontramos con uno de los problemas que es que no nos cambia la url, cosa que nos puede fastidiar si queremos que el usuario pueda obtener una dirección del lugar donde esta navegando para poder volver más tarde o poder enviarla a alguien. Buscando por la red encontré este código muy sencillo de utilizar el cual nos permitirá realizar esta acción:

$(document).ready(function() {
    // Para navegadores que soportan la función.
    if (typeof window.history.pushState == 'function') {
        pushstate();            
    }else{
        check(); hash();
    }
});
// Chequear si existe el hash.
function check(){
    var direccion = ""+window.location+"";
    var nombre = direccion.split("#!");
    if(nombre.length > 1){
        var url = nombre[1]; 
        alert(url);
    }
}
    
function pushstate(){
    var links = $("a");
    // Evento al hacer click.
    links.live('click', function(event) {
        var url = $(this).attr('href');
        // Cambio el historial del navegador.
        history.pushState({ path: url }, url, '/'+url);
        // Muestro la nueva url
        alert(url);
        return false;
    });
        
    // Función para determinar cuando cambia la url de la página.
    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        if (state) {
            // Mostrar url.
            alert(state.path);
        }
    });
}
    
function hash(){
    // Para i.e
    // Función para determinar cuando cambia el hash de la página.
    $(window).bind("hashchange",function(){
        var hash = ""+window.location.hash+"";
        hash = hash.replace("#!","")
        if(hash && hash != ""){
            alert(hash);
        }
    }); 
    // Evento al hacer click.
    $(".enllacFitxa").bind('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        // Cambio el historial del navegador.
        window.location.hash = "#!"+url;
        //$(window).trigger("hashchange");
        return false
    });
}

Envío de formularios por ajax con jQuery

Más de una vez nos hemos visto obligados a utilizar ajax en nuestra web. Con este pequeño código podremos enviar formularios por ajax de una forma muy sencilla gracias a jQuery:

// Interceptamos el evento submit
$('#idForm').submit(function() {
    // Enviamos el formulario usando AJAX
    $.ajax({
        type: 'POST',//Tipo de envío del formulario
        url: $(this).attr('action'),//Url donde se enviará el formulario
	data: $(this).serialize(),
	// Muestra un mensaje de carga
	beforeSend: function() {
		$('#ejemplo').html( '<img src="ejemplo.gif" />' );
	},
	// Mostramos un mensaje con la respuesta de PHP
	success: function(data) {
	    $('body').html(data);
	}
    })        
    return false;
});

Cancelar evento enlace (href) y redireccionar con jquery

Si en algún momento dado deseamos que al clicar en un enlace este no nos redireccione o que nos redireccione a otro enlace que queramos especificar nosotros, es tan sencillo como:

$('.p-full-link').click( function(e){
    //Cancela el evento, en este caso la acción de redireccionar
    e.preventDefault();
    //Redireccionamos la página
    $(location).attr('href', 'http://www.google.es'); 
});