L: something you never expected

JavaScript es la ley

by on 26-02-2010

Aparte de mi trabajo en la Secretaría de gobierno como programador web, donde uso PHP apoyado por JavaScript, desde hace un poco de un mes he estado desarrollando un sistema de control de costos para una empresa llamada MAGOVE.

Dicho sistema también lo he estado desarrollando en PHP apoyado de JavaScript para las validaciones y redireccionamientos principalmente. La cosa es que la persona con la que estoy en contacto me dijo que muchas veces sus órdenes de trabajo tienen varias órdenes de compra o cotizaciones. Para este punto yo dije “ok, una relación una a muchos… fácil”, la cosa es que el cliente me dijo que quería que hubiera la posibilidad de capturar uno o varios de los datos mencionados DESDE EL PRINCIPIO, vaya, que hubiera un botón en el que al darle click aparecieran nuevos campos en los cuales capturar. A esta petición dije “claro que se puede hacer”, aunque no tuviera idea de cómo hacerlo, ya que al tratarse de un lenguaje web, supuse que no sería tánfácil como en un lenguaje visual como Delphi (que nadie usa en el campo laboral) o Visual Basic.

Así, me puse s investigar y encontré que la solución no era tan difícil y yacía en algo que ya he utilizado, pero no tan a fondo: JavaScript.
Hasta ese entonces había usado JavaScript para validaciones de campos, y además accesando directamente en dicho campo usando lo siguiente:

document.nombredeforma.nombredecampo.value o el atributo que se quisiera accesar/modificar.

De entrada, se pueden utilizar funciones un poco más genéricas para buscar la reutilización de código de la siguiente forma:

document.getElementById(“iddelobjeto”).value

Con esto en mente, entra algo que nunca había usado y no entendía por qué Dreamweaver lo añadía: el id. Es una forma de identificar los objetos aparte del nombre que tienen, algo así como un alias. También existe el tag, pero no me he visto en la necesisdad de usarlo aún… pero nunca se sabe.

Sabiendo esto, entendí mejor lo que encontré (hubo varias alternativas, pero la que voy a mencionar es la que mejor me acomodó): usas un div (otra cosa que no sabía para qué eran aparte de usar capas y alineaciones).

El div, por lo que entendí, se utiliza para agrupar objetos dentro de un bloque, siempre y cuando esté identificado (si no tiene el atributo id entonces no tiene mucho caso usarlo, salvo por alineación, pero vendría siendo igual que usar un p). Esto vendía siendo:

<div id=”iddelobjeto”></div>

Ya con esto, se pone el botón o link que va a accesar a una función JavaScript del nombre que se elija (href= u onclick= “javascript:nombredelafuncion(parametros);”) y dicha función tendría lo siguiente:

function nombredelafuncion(parametros){
getElementById(“iddelobjeto”).innerHTML(+)=”Código HTML que se quiera insertar”;
}

Si vas a agregar el/los objetos y ya no lo vas a quitar entonces es todo lo que necesitas, pero digamos que (como en mi caso) quieres la habilidad de quitar y poner los objetos, entonces la cosa requiere un poco más de código.
Para el div que se creó se le debe crear un div “hijo”, el cuál va a contener nuestro código HTML, en otras palabras:

function addcot(){
document.registro.count_cot.value++; //contador creado para llevar el control de nombres
var par=document.getElementById(“cotizaciones”); //guardamos en una variable la localización del div padre
var newdiv=document.createElement(“div”);  //creamos un nuevo div
newdiv.setAttribute(“id”, ‘mag_cot_div’+document.registro.count_cot.value); //agregamos el atributo id al div creado, usando el contador
newdiv.innerHTML=’Valor $<input type=”text” id=”mag_cotizacion_valor’+document.registro.count_cot.value+’” name=”mag_cotizacion_valor’+document.registro.count_cot.value+’” size=”15″/> No. de cotización<input type=”text” id=”mag_cotizacion’+document.registro.count_cot.value+’” name=”mag_cotizacion’+document.registro.count_cot.value+’” size=”15″/><input type=”button” onclick=javascript:removecot(“‘+document.registro.count_cot.value+’”) value=”Quitar cotización” />’; //ponemos nuestro código HTML que queremos añadir
par.appendChild(newdiv); //asignamos el div”hijo” creado al div “padre”
}

El código es íntegro de mi sistema, el cuál usa asignaciones directas de objetos porque todavía no usaba por completo el getElementById, pero pienso pulir el código una vez haya terminado de programarlo.

Como pueden ver en el código HTML añadido, se agregan 2 inputs con el nombre numerado (por eso el contador), esto para poder eliminarlo en caso de ser necesario con la función removecot():

function removecot(num){ //recibe el número del div a eliminar
var par=document.getElementById(“cotizaciones”); //obtenemos el div padre
olddiv=document.getElementById(“mag_cot_div”+num); //obtenemos el div hijo
olddiv.parentNode.removeChild(olddiv); //eliminamos el div hijo
}

Aunque las lineas de código son algunas cuantas, el proceso es bastante fácil una vez que te aprendes bien las instrucciones (sobre todo recordando dónde van las mayúsculas).

A base de esto, comencé a utilizar más el atributo div, porque veo que funciona, como por ejemplo para hacer una validación de campos vacíos, en donde anteriormente usaba un if-sote, pero una vez que usas el div con los nombres apropiadamente numerados, puedes usar un simple ciclo para revisar que esten vacios o no, entre algunas cosas.

Ni el id ni el tag afectan los nombres que PHP utiliza para extraer los datos ($_GET["nombre"] y $_POST["nombre"]), así que puedes usar dichos atributos para hacer diferentes cosas con otros nombres.

Edit: se me olvidaba mencionar que si haces un refresh de la página, los divs añadidos se pierden, pero el contador se queda en el valor que haya incrementado, así que por ello es recomendable usar una función que reinicie las variables usadas en un evento “onload”.

Nothing is true, everything is permitted
:, ,

  • http://feranmx.blogspot.com feranmx

    Chido!… aun que yo diría que AJAX es la ley, pero esta bien.. pues es AJAX es JavaScript mejorado y recargado con XML y CSS… por cierto, si te adentras en AJAX veras que ya están esas funciones hechas y te ahorrarás mucho trabajo..

    Saluuuuudddd-os

  • Lusanagi Nightroad

    claro que con ajax este tipo de cosas pueden ser un poco más fáciles, pero nunca me he metido a aprenderlo, así que no sé si en verdad envía datos por POST o GET :S

  • http://feranmx.blogspot.com feranmx

    PERO CLARO QUE LO HACE!!!… crees que si no lo haría seguiría existiendo como base para formularios?

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!