ElecDig: 2014

lunes, 22 de diciembre de 2014

Select dinamico

Esto es un simple ejemplo de como se podría hacer un combo entre dos desplegables para que cuando en el primero seleccionemos algo, con el valor de lo seleccionado haga una consulta a la base de datos y rellene la segunda lista.

Por ejemplo, se quiere que al seleccionar una provincia del primer combo box aparezca el segundo con todas las ciudades de la provincia seleccionada en el primer desplegable.

Para el siguiente ejemplo necesitaremos el archivo o pagina donde se mostraran los combos y un script en php donde se ejecutara la consulta a la base de datos con la provincia seleccionada en el primer combo.

Empezamos con la pagina principal donde se mostraran los combos:

codigo jquery:

$(document).ready(function(){

2.$("#provincia").change(function(){

3.$("#combos").load("combos.php", {provincia: $("#provincia").val()});

4.});

5.});

En estas lineas simplemente le decimos que cuando el combobox con el id “#provincia” cambie, cargue en el div con id “#combos” la pagina en php “combos.php” y le pase por parámetro el valor de “#provincia” que sera la provincia que hayamos seleccionado.

Ahora el código de los combos que ira donde queramos mostrar las listas desplegables:

echo "<label>Provincia: <select id='provincia' name='provincia'>"; // rellenando el combobox de las provincias

//echo "<option>Provincia</option>";

$result1=mysql_query("SELECT DISTINCT `nombre` FROM `provincias`", $conn)or die (mysql_error());

while ($row=mysql_fetch_array($result1)) {

$provincia= $row["nombre"] ;

echo "<option value=\"$provincia\">$provincia</option>";

}

echo "</select></label><br /><br />";

 

<div align="center" id="combos"></div>

miércoles, 17 de diciembre de 2014

Cómo corregir el mensaje "Notice: Undefined index:" en PHP

Si tenemos por ejemplo un formulario de contacto con las variables definidas así:

$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$subject = $_REQUEST['subject'];
$message = $_REQUEST['message'];
$error = false;

Nos aparecerá el siguiente mensaje en nuestra web: Notice: Undefined index: porque que estamos accediendo a un array cuyo indice no existe. Lo solucionamos de esta forma:

if (isset($_REQUEST['name'])) {
$name = $_REQUEST['name'];
} else {
$name = "";
}

if (isset($_REQUEST['email'])) {
$email = $_REQUEST['email'];
} else {
$email = "";
}

if (isset($_REQUEST['subject'])) {
$subject = $_REQUEST['subject'];
} else {
$subject = "";
}

if (isset($_REQUEST['message'])) {
$message = $_REQUEST['message'];
} else {
$message = "";
}

martes, 16 de diciembre de 2014

Enviar datos con Enter

Muchos usuarios después de que llenan los datos de un formulario quieren presionar enter para su procesamiento(inserción, modificación, eliminación, etc).

function enter(formulario)

{

var codigo

codigo = window.event.keycode;

if (codigo==13)

{

formulario.submit();

}

</script>

Lo primero que se hace es declararse una variable llamada codigo, la línea de código que se muestra: codigo = window.event.keycode sirve para capturar la entrada de teclado del usuario, en otras palabras el código de la tecla que el usuario ingreso se asigna a la variable codigo. Si el código de la tecla ingresada es 13 (Que en este caso es el Enter), entonces se ejecuta la instrucción formulario.submit() con la cual los datos del formulario se enviarán. Ahora para llamarlo desde un formulario deben escribir esto en el tag BODY de la página HTML:

El nombre del formulario debe ser: miformulario.
Acá un ejemplo:

<html>

<head>

<title>Prueba</title>

</head>

Nombre: <input type="text" name="nombre"><br>

Apellido: <input type="text" name="apellido"><br>

</form>

</body>

</html>

jueves, 4 de diciembre de 2014

Formatos de Fecha en PHP

$hoy = date("F j, Y, g:i a"); // March 10, 2001, 5:16 pm
$hoy = date("m.d.y"); // 03.10.01
$hoy = date("j, n, Y"); // 10, 3, 2001
$hoy = date("Ymd"); // 20010310
$hoy = date('h-i-s, j-m-y, it is w Day');//05-16-18,10-03-01, 1631 1618 6 Satpm01
$hoy = date('\i\t \i\s \t\h\e jS \d\a\y.');// it is the 10th day.
$hoy = date("D M j G:i:s T Y"); // Sat Mar 10 17:16:18 MST 2001
$hoy = date('H:m:s \m \i\s\ \m\o\n\t\h');// 17:03:18 m is month
$hoy = date("H:i:s"); // 17:16:18
$hoy = date("Y-m-d H:i:s"); // 2001-03-10 17:16:18 (el formato DATETIME de MySQL)

jueves, 20 de noviembre de 2014

Menu árbol JS y CSS

A partir de un listado de links se crea un menú en arbol usando javascript no intrusivo. En dispositivos sin javascript queda cargado el listado de links a la vista.

HTML

Se trata de crear una lista no ordenada de links con un id con html

<ul id="miMenu">
  <li><a href="documento1.html">Link 1</a></li>
  <li>Categor&iacute;a 1 
    <ul>
      <li><a href="documento2html">Link 2</a></li>
      <li><a href="documento3.html">Link 3</a></li>
    </ul>
  </li>
  <li>Categor&iacute;a 2 
    <ul>
      <li><a href="documento4.html">Link 4</a></li>
      <li>Otra categor&iacute;a 
        <ul>
          <li><a href="documento5.html">Link 5</a></li>
        </ul>
      </li>
      <li><a href="documento6.html">Link 6</a></li>
    </ul>
  </li>
  <li><a href="documento7.html">Link 7</a></li>
</ul>

Javascript

Debajo de la lista ponemos la llamada al script pasándole el id del menú como argumento

<script type="text/javascript">
<!--
iniciaMenu('miMenu');
//-->
</script>

Si se quiere usar más de una lista con más de un menú en el mismo documento se hace otra llamada a la función iniciaMenu pasándole el id de la otra lista.

<script type="text/javascript">
<!--
iniciaMenu('miMenu');
iniciaMenu('miOtroMenu');
//-->
</script>

Vinculamos el archivo javascript a todos los documentos que hayan de usarlo.

<script type="text/javascript" src="menuarbolaccesible.js"></script>

Dentro del archivo menuarbolaccesible.js podemos determinar si los links se abrirán en la propia ventana o serán lanzados en ventana nueva.

var abrirenVentanaNueva = 0 // 0 para que todos los links se abran en la misma ventana. 1 para abrir en nueva ventana

El resto de aspectos se configuran desde la hoja de estilos

CSS

Vincular la hoja de estilos a todos los documentos que hayan de mostrar el menú en arbol accesible.

<link href="menuarbolaccesible.css" rel="stylesheet" type="text/css" />

Imágenes

código javascript


/****************************************************************
Menú en arbol accesible. 28-Jul-07
Autor tunait http://javascript.tunait.com/
Script de libre uso mientras se mantengan intactos los créditos de autor.
****************************************************************/
var abrirenVentanaNueva = 0;

var tagApartado = 'a';
var docActual = location.href;

function iniciaMenu(menu)
{
  idMenu = menu
  menu = document.getElementById(menu);
  for(var m = 0; m < menu.getElementsByTagName('ul').length; m++)
  {
    el = menu.getElementsByTagName('ul')[m]
    el.style.display = 'none';
    el.className = 'menuDoc';
    el.parentNode.className = 'cCerrada'
    textoNodo = el.parentNode.firstChild.nodeValue;
    nuevoNodo = document.createElement(tagApartado);
    if(tagApartado == 'a') nuevoNodo.href = '#' + textoNodo;
    nuevoNodo.className = 'tagApartado';
    nuevoNodo.appendChild(document.createTextNode(textoNodo));
    el.parentNode.replaceChild(nuevoNodo,el.parentNode.firstChild);
    nuevoNodo.onclick = function()
    {
      hijo = sacaPrimerHijo(this.parentNode, 'ul')
      hijo.style.display = hijo.style.display == 'none' ? 'block' : 'none';
      if(this.parentNode.className == 'cCerrada' || this.parentNode.className == 'cAbierta')
      {
        this.parentNode.className = this.parentNode.className == 'cCerrada' ? 'cAbierta' : 'cCerrada'
      }
      else
      {
        this.parentNode.className = this.parentNode.className == 'cAbiertaSeleccionada' ? 'cCerradaSeleccionada' : 'cAbiertaSeleccionada' 
      }
      return false;
    }
  }
  documentoActual(idMenu)
}

function sacaPrimerHijo(obj, tag)
{
  for(var m = 0; m < obj.childNodes.length; m++)
  {
    if(obj.childNodes[m].tagName && obj.childNodes[m].tagName.toLowerCase() == tag)
    {
      return obj.childNodes[m];
      break;
    }
  }
}

function documentoActual(menu)
{
  idMenu = menu
  menu = document.getElementById(menu);
  for(var s = 0; s < menu.getElementsByTagName('a').length; s++)
  {
    if(abrirenVentanaNueva) menu.getElementsByTagName('a')[s].target = 'blank';
    enlace = menu.getElementsByTagName('a')[s].href
    if(enlace == docActual)
    {
      menu.getElementsByTagName('a')[s].parentNode.className = 'documentoActual'
    }
    if(enlace == docActual && menu.getElementsByTagName('a')[s].parentNode.parentNode.id != idMenu)
    {
      menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode.className = 'cAbiertaSeleccionada'
      var enlaceCatPadre = sacaPrimerHijo(menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode, 'a')
      enlaceCatPadre.onclick = function()
      {
        hijo = sacaPrimerHijo(this.parentNode, 'ul')
        hijo.style.display = hijo.style.display == 'none' ? 'block' : 'none';
        this.parentNode.className = this.parentNode.className == 'cAbiertaSeleccionada' ? 'cCerradaSeleccionada' : 'cAbiertaSeleccionada' 
        return false;
      } 
      nodoSig = sacaPrimerHijo(menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode, 'ul')
      nodoSig.style.display = 'block';/**/
      abrePadre(idMenu, enlaceCatPadre.parentNode)
    }
  }
}

function abrePadre(idmenu, obj)
{
  obj.parentNode.parentNode.className = 'cAbiertaSeleccionada'
  var nodoSig = sacaPrimerHijo(obj, 'ul')
  nodoSig.style.display = 'block';
  if(obj.parentNode.id != idmenu)
  {
    abrePadre(idmenu, obj.parentNode.parentNode)
  }
}

código css

#menu1 {
  font-size: 90%;
  list-style-image: url(imasmenu/doct.gif);
  border: 1px solid #006699;
  width: 200px;
  padding-top: .5em;
  padding-bottom: .5em;
  list-style: inside;
}
html > body #menu1{
  list-style: outside;
}
.cAbierta{
  list-style-type: none;
  list-style-image: url(imasmenu/carpabiertat.gif);
}
.cAbiertaSeleccionada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpabiertasel.gif);
}
.cCerradaSeleccionada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpcerradasel.gif);
}
.cCerrada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpcerradat.gif);
}
.menuDoc{
  list-style-type: none;
  list-style-image: url(imasmenu/doct.gif);
}
.tagApartado, a.tagApartado{
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
.documentoActual{
  list-style-image: url(imasmenu/docsel.gif);
}

#menu1 a {
  color: #006699;
}
.documentoActual a{
  color:#993300;
}