#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.
Anuncios

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