#javascript: Selects dependientes con #AJAX – ejemplo práctico by @edanps

Fuente: http://www.formatoweb.com.ar/ajax/select_dependientes.php

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes 🙂

Importante

El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel, con comunicación XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

Instrucciones

Hacer click en la primera lista desplegable, seleccionar cualquier opción de las dispuestas. El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección, por supuesto sin realizar recarga de la página.
El código fuente esta compuesto por dos archivos “.php” con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El listado de países y estados se incluye también con el ejemplo.

Funcionamiento

El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una función. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opción “Elige”, los select posteriores en la cadena de actualización cambiarán su estado a “Selecciona opción…”. Por el contrario, si la opción elegida no es “Elige”, se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validará lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en común) y devolverá los datos en formato HTML. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización, tarea que se hará mediante innerHTML.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Re-estructuración del código fuente para hacerlo reutilizable para “X” cantidad de combos dependientes.
  • Añadido de comentarios nuevos para ayudar a la comprensión del sistema.
  • Código más claro y limpio, ideal para su estudio.

combo dinámico en #Ajax: localidades y provincias de #España by hellogoogle.com

fuente: http://www.hellogoogle.com/selector_combo_ajax_provincias_localidades/

En diversos proyectos he tenido la necesidad de trabajar con un formulario en el que uno de los campos es un selector de provincias y localidades de España. Tal vez usted también haya tenido esta misma necesidad durante el desarrollo de un proyecto.

En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web depáginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.

Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de  funcionalidades de una manera mucho más elegante y eficiente.

Ejemplo de combo dinámico en Ajax 

Combo de localidades

En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un  formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite  trabajar con un documentoXML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.

En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:

Arquitectura de la aplicación provincias y localidades en Ajax

Esta funcionalidad consta de los siguientes archivos:

  • default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
  • xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
  • AjaxCode.js:  funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
  • provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.

Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.

El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.

El código.

En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad  o encontró cualquier problema le agradecería mucho conocer su feedback.

rcarousel – a continuous #jQuery UI carousel … carrusel horizontal de divs

Fuente: http://ryrych.github.io/rcarousel/

Table of Content
Announcement

rcarousel development is discontinued at the moment. Maybe If I have more time and feel like it I will resume the work on the project. Anyway I encourage you to share it, fork it and whaterver you feel like. But please – respect the licence.

Examples
News
  • January 25, 2012 – point release fixes issue #14.
  • January 13, 2012 – point release fixes issue #10.
  • December 31, 2011 – new stable version 1.1.1 has been released. See changelog for more.
  • December 12, 2011 – new stable version 1.1 has been released. See changelog for more.
About

rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even olderbrowsers (No IE6, please).

Features
simple to use

Now rcarousel is very simple to use. Just add some elements into a container and run the widget on it!

highly customizable

rcarousel does not force you to use one pre-defined theme. You can add your own custom navigation with no effort!

many options to choose from

There are many options to choose from. Configure your carousel whatever you like!

Any element

As of 1.1 version you can use hopefully any HTML element inside a carousel. To illustrate this, take a look at the carousel I used at the top of the page.

images with links

As of 1.1 version there is no problem with wrapping IMG elements with links. Another nice feature!

Multiple carousels

You can add as many carousels as you like to a page without a problem. To see a working example, take a look atmulti carousels example.

Vertical carousels

rcarousel supports also vertical orientation of carousels.

Loading elements on demand

With the help of append method, you can load elements on demand. It can come in handy in AJAX calls.

Auto mode

Thanks to the Auto mode you do not even have to use navigation.

cool pagination

The pagination algorithm that is a part of rcarousel allows you to use a custom number of visible elements and a step to scroll by.

simple API

Available API allows you to control rcarousel at the run-time!

Compatibility

rcarousel was tested and has been tested in many browsers. If you come across a bug, please report it in the bug tracker. Some browsers like Internet Explorer 6 are too old and will not be supported. Because of some browsers release cycle like that of Chrome (and Firefox until recently), it is very hard to keep track of rcarousel behaviour in these browsers. Thus the widget was tested just in Chrome/Chromium. Also please note, it is not so easy to estimate the number of browsers to test in especially when it comes to minor releases or a bug fix releases. The more the better is not the answer. If the browser you want to use rcarousel in, is for some reason important to you, and the widget doesn’t work in it, you can fill in a bug report inthe bug tracker.

rcarousel was tested in the following browsers:

  • Internet Explorer 7+
  • Firefox 3.0+
  • Chrome
  • Opera 10.10+ (there are problems with animation in 10.00)
  • Safari 4.0.5+
Getting Started

To get started, add the following JavaScript scripts. rcarousel is built on jQuery 1.7. Since rcarousel is a jQuery UI widget, some additional dependencies are required.

In examples below, replace path with the path to the folder where rcarousel is kept:

<script type="text/javascript" src="path/widget/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.rcarousel.min.js"></script>

Then add the following style sheet in the head section:

<link type="text/css" rel="stylesheet" href="path/widget/css/rcarousel.css" />

To make it work, add images, or any html content inside some DIV element. For example:

<div id="carousel">
	<img src="flowers/tulip.jpg" alt="a tulip"/>
	<img src="flowers/rose.jpg" alt="a rose"/>
	<img src="flowers/daisy.jpg" alt="a daisy"/>
	<img src="flowers/sunflower.jpg" alt="a sunflower"/>
	<img src="flowers/pansy.jpg" alt="a pansy"/>
</div>

Then run it:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel();
	});
</script>

Now rcarousel will be run with the default options. You should at least change default size of an element, for instance:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel( {width: 200, height: 200} );
	});
</script>

Remember that number of elements you add to a carousel have to be at least number of elements you specify in ‘visible’ option! Otherwise the carousel will not run.

Configuration Options
Option Type Default value Description
visible integer 3 Number of visible elements. This number is the minimum number of elements you have to add.
step integer 3 Number of elements to scroll by
width integer 100 Width of carousel’s elements
height integer 100 Height of carousel’s elements
speed integer 1000 Speed in milliseconds of scrolling animation
margin integer 0 Margin between elements
orientation string [“horizontal” | “vertical”] “horizontal” Orientation of carousel
auto object {enabled: boolean, direction: string [“next” | “prev”], interval: integer {enabled: false, direction: “next”, interval: 5000} Enables or disables automatic scrolling.
startAtPage integer 0 Which page load first
navigation object {next: string, prev: string} {next: “#ui-carousel-next”, prev: “#ui-carousel-prev”} Attach click handler to a given class “.class” or an id “#id”
start event Triggered when carousel is ready to use
pageLoaded event Triggered when page is loaded (scrolled into view)
Public API
Method Usage example Description
next $( “#carousel” ).rcarousel( “next” ); load next elements by step – elements are scrolled left
prev $( “#carousel” ).rcarousel( “prev” ); load previous elements by step – elements are scrolled right
goToPage $( “#carousel” ).rcarousel( “goToPage”, 5 ); goes to a given page
getTotalPages $( “#carousel” ).rcarousel( “getTotalPages” ); returns number of total pages
getCurrentPage $( “#carousel” ).rcarousel( “getCurrentPage” ); returns number of current page
append $( “#carousel” ).rcarousel( “append”, $jQueryElements ); adds $jQueryElements to carousel; it’s handy in Ajax calls; see the example
Navigation
Changelog
1.1.2 → 1.1.3

Version 1.1.3 is a point release that fixes the issue #14. As you can read there, this one-character typo makes html carousel example broken in IE7. Sorry for inconvenience!

1.1.1 → 1.1.2

Version 1.1.2 is a point release that fixes the issue #10.

1.1 → 1.1.1

Version 1.1.1 is a quick release to help you use rcarousel with a lightbox. Now event handlers and data are copied as well. Have a peek at this awesome example. Please consider donating some money. As this is the last day of 2011 year, I wish you all the best in the coming 2012 year!

1.0 → 1.1

Simple to use

Now, using rcarousel is even more simple. Just add some content into a container and run it!

Any content

Version 1.1 supports any kind of content in a carousel. Not only images!

Ajax handling

Ajax calls have been delegated to third parties. See the example.

Simplified pagination algorithm

Main pagination algorithm has been further improved and well documented.

New public methods

append and getCurrentPage are new public methods.

Where to get help?

First, do not use bug tracker to get help! It’s not meant to be a helping center. Also do not e-mail me directly with a problem that could easily be solved by someone else. To get help, I encourage you to ask, for example on stackoverflow or other Q&A service.
Remember, bug tracker is for reporting bugs and, to some extent, asking for features.

Cargar un select o lista desplegable desde otro select PHP + AJAX + MySQL by codigojerry.blogspot.com

Fuente: codigojerry.blogspot.com.es

Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos AJAX y el evento onchange de JavaScript. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas.


El ejemplo está dividio en cuatro archivos:

El archivo conexion para conectarnos a la base de datos.

conexion.php

<?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).

index.php

<?php
include 'conexion.php';
?>
<!DOCTYPE html>

<html>

<head>

<script src="ajax.js"></script>

</head>

<body>

<h2>HTML - PHP - AJAX - MySQL</h2>

<?php

$con=conexion();
$res=mysql_query("select * from continente",$con);

?>

<select id="cont" onchange="load(this.value)">

<option value="">Seleccione</option>

<?php

while($fila=mysql_fetch_array($res)){

?>

<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>

<?php } ?>

</select>

<div id="myDiv"></div>

</body>

</html>

El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.

ajax.js

function load(str)
{
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);
}

Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php

proc.php

<?php
include 'conexion.php';

$q=$_POST['q'];
$con=conexion();

$res=mysql_query("select * from pais where cod_cont=".$q."",$con);

?>

<select>

<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila[nombre]; ?></option>
<?php } ?>

</select>

Demo/Código fuente

calendario #html para cuando tienes conflictos de #jquery con otros componentes como por ejemplo thickbox

Tengo el caso de que en una seccion tengo el visor de fotos thickbox y necesito el tipico input que al pulsar sale un calendario fashion nice css. Use datepicker y me sobrevino el horror … no funcionan juntos

Uno necesita jquery y otro jquery-min

Seguramente se pueda solucionar, yo lo intente varias horas y despues de pegarle tres patadas al pc y darme cuenta de que con eso solo iba a conseguir gastar dinero en comprar otro decidi buscar otro calendario que no sepa que es jquery aunque se lo expliques

Encontre este : http://www.dynarch.com/projects/calendar/download/1.9/

Mu guapo y no me genera conflicto alguno

Si alguien sabe como hacer funcionar datepicker y thickbox a la vez por favor pasarme el enlace, os lo agradecere eternamente

#javascript: interaccion de #div y objetos de un form con un checkbox gracias a #getElementById

Tipico tipiquisisisimo formulario donde tenemos una casilla de verificación o checkbox y queremos que si esta activado o no pasen cosas mágicas a nuestro alrededor … vamos, que se muestren u oculten objetos, divs, de tó

Por un lado tenemos el check al cual le agregamos la propiedad onchange tal que asi (madre mia cuanta informacion, verdad?)

<input name="checkbox" type="checkbox" id="checkbox" onchange="javascript:hazalgo();" value="1" />

y por otro lado la funcion javascript

<script>
function hazalgo() {
	if(document.getElementById('checkbox').checked){
		objeto1 = document.getElementById('c2');
		objeto1.style.display='none';
		objeto2 = document.getElementById('cuota');
		objeto2.value='30';
	}else{
		objeto1 = document.getElementById('c2');
		objeto1.style.display='';
		objeto2 = document.getElementById('cuota');
		objeto2.value='20';
	}
	//
	//alert(' - '+document.getElementById('checkbox').value);
}
</script>    

Mother mine esto parece el algoritmo de hal 9000 verdad? bien, como veis en el if comprobamos si esta marcado o no el check. Si esta marcado ocultamos el div c2 y en la caja de texto “cuota” insertamos el valos 30 y si el check no esta marcado pues mostramos el div c2 y el inputbox cuota toma el valor 20

Despues de ver este laborioso y complicado ejemplo os preguntais como puede ser que no este trabajando en la NASA verdad? … la respuesta es facil, hay que hacer un psicotecnico

Espero haberle sido de ayuda a alguien … a una persona seguro, a mi que escribo este articulo para acordarme de lo que hago, que ultimamente soy como el protagonista de Memento

20 plugins para jQuery que no pueden faltar en tus webs by martiniglesias.eu

Fuente : www.martiniglesias.eu

Estos 20 plugins para jQuery recopilados por Addy Osmani, seguramente, te vendrán bien para utilizar en cualquier proyecto y, hoy día, es casi imposible encontrar una web desarrollada en xhtml que no haga uso de jQuery o un framework similar. En este caso, los 20 plugins son para jQuery.

jQuery Plugin – Feature List
Sirve para crear una lista de items destacados en tu web.

jQuery Plugin – Sexy Alert Box
Ya todo el mundo conoce estos mensajes de alerta sexys para reemplazar los alert feos de javascript.

jQuery Plugin – Facebook like Autosuggestion
Plugin que emula las sugerencias de Facebook al realizar una búsqueda. Funciona con Ajax y PHP.

jQuery Plugin – Horizontal Tooltips Menu
Un tooltip horizontal para mostrar en los links de un menú.

jQuery Plugin – Sexy Lightbox
Este plugin es similar al clásico Lightbox pero mucho más liviano. Fácil instalación y según dicen, más bonito (luego de ver la demo, sí, es más bonito).

jQuery Plugin – Simple Page Peel Effect
Page peel efect sirve para poner esa esquina de papel que se abre al posicionarse encima (mira arriba a la derecha en mi web!)

jQuery Plugin – Uploadify
Permite una fácil integración de un sistema para subir uno o múltiples ficheros en tu web.

jQuery Plugin – Facebook Style Alert Confirm Box
Sistema de alertas para confirmar acciones similar al de Facebook (me gusta más sexy alert).

jQuery Plugin – Create an Interactive, Filterable Portfolio
Como crear un portfolio de trabajos interactivo y que parezca que está hecho con Flash.

jQuery Plugin – Favorite Rating
Un sistema para darle tu voto a una imagen o similar. No es votación de puntuación, sería un similar al “me gusta” de facebook.

jQuery Plugin – Coda Bubble
Popups atractivos (no de ventana, sino al estilo tooltip).

jQuery Plugin – Search & Share
Incluye muchas opciones en un menú contextual (similar al del botón derecho del ratón) al sombrear texto en una web.

jQuery Plugin – Simply Scroll
Animación continua o manual, vertical u horizontalmente de un set de elementos de tu web.

jQuery Plugin – Side Navigation Tooltip / Popup Bubble
Tooltip al estilo burbuja usando jQuery.

jQuery Plugin – Color Changing Text and Backgrounds
Método rápido para cambiar entre múltiples colores suavemente. Normalmente defines el color de fondo de tu web en tu CSS y permanece en toda la web. En este caso tendremos la posibilidad de ajustar los colores a nuestro gusto.

jQuery Plugin – Dance Floor
Cuando haces click sobre un producto, éste se expandirá para mostrar información adicional.

jQuery Plugin – Horizontal Animated Menu
Este tutorial te enseña a crear un menú horizontal básico animado usando jQuery que muestra información acerca del link cuando el ratón se posiciona sobre el elemento.

jQuery Plugin – Editable Select
Transforma un select en un campo editable para que puedas editar el valor directamente o elegir un valor de la lista de opciones.

jQuery Plugin – Create Good Looking Floating Menu
Ejemplo de como crear un menú horizontal con efecto flotante usando jquery.easing y la función jquery animate.

galeria de imagenes con animacion en html javascript ajax jquery

Galeria de imagenes con transiciones con jquery

http://nivo.dev7studios.com/

Para modificar la velocidad de transicion de las animaciones solo teneis que modificar en el archivo jquery.nivo.slider.pack.js :

– pauseTime: pausa entre una foto y otra, si poneis 1000 habra una espera de 1 segundo si poneis 10000 10 segundos

– animSpeed: velocidad de los efectos de transicion, por defecto en 500 (medio segundo de duracion de la animacion)

jQuery: Scroll animado hasta un anclaje by webintenta

Fuente: http://webintenta.com/jquery-scroll-animado-hasta-un-anclaje.html

La siguiente función permite crear un agradable efecto de scroll para desplazarse hasta un anclaje. Tan sólo hay que añadir la clase “toplink”.

$("a.toplink").click(function() {
	$("html, body").animate({
		scrollTop: $($(this).attr("href")).offset().top + "px"
	}, {
		duration: 1000,
		easing: "swing"
	});
	return false;
});

Ver ejemplo en funcionamiento » »
Visto en snipplr » »