Manuales de JQuery

Manuales de JQuery

http://librojquery.com/

http://www.desarrolloweb.com/articulos/ejemplo-selectores-jquery.html

Limpiar todos los campos de un formulario con JQuery

Limpiar todos los campos de un formulario con JQuery

En ocasiones, tenemos formularios a los que queremos aplicarvalidación a algunos campos, y dependiendo de la acción tomada, podemos necesitar vaciar todo el contenido del formulario que el usuario haya rellenado. Si tenemos un formulario de 3 o 4 campos, podemos hacerlo a mano de forma rápida, del modo:

$(”#miInput”).val(”);

Pero si estamos trabajando con un formulario grande, con varios tipos de campos, algo tan simple nos puede tomar mucho tiempo.Buscando por internet y hechandole un ratillo, me he creado esta función (he comentado todas las líneas para que todo esté más claro):

function limpiaForm(miForm) {
// recorremos todos los campos que tiene el formulario
$(’:input’, miForm).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase();
//limpiamos los valores de los campos…
if (type == ‘text’ || type == ‘password’ || tag == ‘textarea’)
this.value = “”;
// excepto de los checkboxes y radios, le quitamos el checked
// pero su valor no debe ser cambiado
else if (type == ‘checkbox’ || type == ‘radio’)
this.checked = false;
// los selects le ponesmos el indice a -
else if (tag == ’select’)
this.selectedIndex = -1;
});
}

La función recibe un objeto de JQuery que representa el formulario que queremos vaciar. Supongamos que el formulario tiene como id “Formulario1″, lo haríamos de la siguiente forma:

limpiaForm($(”#Formulario1″));

… y todo el formulario limpio.

Incluso puede ser más fácil, si sólo tuviéramos inputs de texto, y algúntextarea, podríamos hacer:

$(”#Formulario1 input, #Formulario1 textarea”).val(”);

Otra clara demostración de lo mal acostumbrado que nos tiene JQuery!

Pero aún más simple…

$(”#Formulario1″)[0].reset();

http://oldblog.jesusyepes.com/jquery/limpiar-todos-los-campos-de-un-formulario-con-jquery/

Combos anidados con JQuery

http://www.prodiven.com/jcombo/index.php?lang=es

A medida que desarrollamos un sistema, se nos presenta uno u otro requerimiento que debemos resolver rápidamente para no atrasarnos, y mucho mas, si tienes una fecha de entrega muy cercana.

Uno de los casos habituales dentro de un desarrollo es la necesidad de anidar, agrupar, enlazar combos, entiendase por combos los elementos de tipo SELECT. Ajax es la manera más profesional de trabajarlo, y por suerte, disponemos de JQuery para complementar lo que con solo PHP por ejemplo, no podemos conseguir sin que se vuelva tedioso si tienes muchos campos en el mismo formulario.

jCombo es un plugin de JQuery para selects simples y anidados. esta extensión:
simplifica el proceso de obtener data en combos SELECT, aún si estan anidados o no. La única condicion es obtener los campos de la base de datos consecutivamente creando pares de [valor][texto] en formato JSON. No obstrusivo, sin efectos ni estilos. Este componente es un intento para obtener combos anidados de la forma mas rápida posible.
demo descarga
Uso:
1.- incluimos la librería y el plugin (entre etiquetas head)

<!-- incluimos el plugin (jcombo) y el jquery-->
<script type="text/javascript" src="ruta/jquery.js"></script>
<script type="text/javascript" src="ruta/jquery.jCombo.min.js"></script>

2.- configuramos:

<!-- configuramos el plugin-->
<script type="text/javascript">
$(function() {

   // paises es el primer select a llenar<pre class='brush:xml'>
   $("#paises").jCombo("funciones.php?funcion=get_paises",{});

   $("#ciudades").jCombo("funciones.php?funcion=get_ciudades&id=",{
      parent: "#paises" // combo padre
   });  

   $("#zonas").jCombo("funciones.php?funcion=get_zonas&id=",{
      parent: "#ciudades"
   });
});
</script>

3.- indicamos que selects serán anidados:

paises: <select name="paises" id="paises"></select><br/>
ciudades: <select name="ciudades" id="ciudades"></select><br/>
Zonas: <select name="zonas" id="zonas"></select>

---

¿Como funciona?

para llenar el combo basta con llamar al archivo que generara los datos e indicar a quien se le asignaran:

$("select[name='country']").jCombo("get_paises.php");

el plugin trabaja con el formato JSON, así que es en ese formato en el que debemos devolverlos, podemos trabajar con JSON en PHPsin ningún problema. Puedes por ejemplo, llamar a un archivo PHP diferente que te devuelva los datos para cargar cada select o llamar a uno solo que devuelva los vaores de acuerdo al valor pasado por parámetro.

$("#paises").jCombo("funciones.php?funcion=get_paises",{});
$("#ciudades").jCombo("funciones.php?funcion=get_ciudades&id="{ ...
$("#zonas").jCombo("funciones.php?funcion=get_zonas&id=",{ ...

voy a dejar un ejemplo para el contenido funciones.php y como gestiona los valores recibidos, para generar los datos destinado a la carga de cada select.
(clic para mostrar/ocultar código).

<?php
// indicamos que la respuesta tendra el formato JSON
//header('Content-type: application/json');

// conexion con la base de datos
include("config.php");
  
// devuelve en formato JSON los datos para llenar el combo "paises"
function get_paises(){
   $query = "SELECT id_country, country_name FROM countries ORDER BY country_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }   
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// retornamos las ciudades pertenecientes a un deterinado pais (id)
function get_ciudades($id){

   if (empty($id) or !is_numeric($id)) return false;

   // en este caso se consultan las columnas tal como se van a devolver
   $query = "SELECT id_city, city_name FROM cities WHERE id_country = '$id' ORDER BY city_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }  
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// retornamos las zonas pertenecientes a una deterinada ciudad (id)
function get_zonas($id){

   if (empty($id) or !is_numeric($id)) return false;

   $query = "SELECT id_zone, zone_name FROM zones WHERE id_city = '$id' ORDER BY zone_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }  
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// devolvemos solo lo solicitado
switch ($_GET['funcion']){
   case 'get_paises':
    
     echo get_paises();
     break;

   case 'get_ciudades':
     
      echo get_ciudades(!empty($_GET['id'])? intval($_GET['id']) : 0);
      break;

   case 'get_zonas':

     echo get_zonas(!empty($_GET['id'])? intval($_GET['id']) : 0);
     break;

   default:{ echo 'parametros incorrectos';}
}
?>

Opciones: (configuración del plugin)

- parent: elemento SELECT del cual se deben obtener los datos (combo padre).
- initial_text: mensaje por defecto al seleccionar una opción. Si se coloca un valor vacío ('') entonces no se mostrará ningún texto.
- selected_value: preselecciona el combo en el valor colocado.
- parent_value: establece la carga inicial del elemento padre (sólo cuando el elemento está en cascada).

También podría interesarte :


Textarea autoResize con JQuery


Plugin Validation de JQuery


Flexigrid: grid con JQuery


Datepicker JQuery UI

jQuery plugins

http://bassistance.de/jquery-plugins/

Plugins

• jQuery plugin: Accordion
• jQuery plugin: Autocomplete
• jQuery plugin: Message
• jQuery plugin: Password Validation
• jQuery plugin: Prettydate
• jQuery plugin: Tooltip
• jQuery plugin: Treeview
• jQuery plugin: Validation

Utilidades JQUERY

http://jqueryui.com/