Mostrando las entradas con la etiqueta Ajax. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Ajax. Mostrar todas las entradas

martes, 2 de junio de 2015

Aparecer datos en las cajas de texto con Ajax

Primero el formulario:


<head>
<script type="text/javascript" src="requestname.js"/>
</head>
<body>
...
<input class="q" type="text" name="cod" id="cod" onkeyup="sendRequest(this.value);" />
//onkeyup llama a la petición asincrónica. Puede ser onSelect o onChange si es un combo box...
<div id="descr"></div>
//Importante aquí el nombre(id) del DIV.
...
</body>

Ahora el "requestname.js":

function
createRequestObject () {
var request;
try {
request = new
XMLHttpRequest;
} catch (microsoft) {
try {
request = new
ActiveXObject("Msxml2.XMLHTTP");
} catch (old_microsoft) {
try
{
request = new ActveXObject("Microsoft.XMLHTTP");
} catch (failed)
{
request =false;
alert("Error iniciando la petición al
Servidor!");
}
}
}
return request;
}
// Crea el objeto
XMLHttpRequest
var http = createRequestObject();

function
sendRequest(q) {
// Abre el script PHP de la consulta
'nombre'
http.open('get', 'infoprod.php?cod='+q);

http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 &&
http.status == 200){
// Text returned FROM the PHP script
var
response = http.responseText;
if(response) {
// UPDATE ajaxTest
content
document.getElementById("descr").innerHTML = response;
}

}
}
Y por último el "infoprod.php", que busca en la BD: (por cierto, es en postgresql)

<?php
include_once('config.php');
pg_connect($bd_url);

if(isset($_GET['cod']))
{
$searchString = $_GET['cod'];
if($searchString != NULL)
{
$consulta = pg_query("SELECT descripcion,existencias FROM productos
WHERE codigo = '".$searchString."';");
if(pg_num_rows($consulta) >
0)
{
$nombre=pg_fetch_result($consulta,0,0);
$existencias=pg_fetch_result($consulta,0,1);
echo
'<h3>Producto:<br />'.$nombre.'</h3>';
echo
'<h3>Existencias:&nbsp;&nbsp;&nbsp;&nbsp;'.number_format($existencias,2,'.','
').' kg</h3>';
}
else if (trim($_GET['cod'])!='') {echo
'Código inexistente';}
else {
echo '<h3> </h3>';
echo
'<h3> </h3>';
}
}
}
?>

Bueno y eso debe funcionar: al escribir se produce un evento que dispara el request.js y hace que busque en la base de datos usando php teniendo como parámetro el texto escrito; el resultado se escribe en el DIV con el id especificado.

miércoles, 1 de octubre de 2014

Inserción de Datos con Ajax y POO con PHP

Tenemos la tabla Empleado. También disponemos de la Clase DBManager, esta Clase la vamos a usar
para verificar y realizar la conexión a la Base de Datos.
La Clase cEmpleado se encuentra en el archivo cEmpleado.php, a esta Clase vamos agregarle un método para que guarde un nuevo registro en la tabla Empleado. A este método lo llamaremos crear() el cual tendrá como parámetros de entrada los datos que se requiere del empleado: Nombre, Departamento, Sueldo. Hay que tener en cuenta que el campo idempleado incrementa automáticamente, por ello no lo incluimos dentro de los parámetros.
Veamos como quedaría este método en el archivo cEmpleado.php:

<?php 
 include_once("DBManager.php");
 
 //implementamos la clase empleado
 class cEmpleado{
 
  //constructor 
  function cEmpleado(){
  }
 
  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }
 
  //* inserta un nuevo empleado en la base de datos *//
  function crear($nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "INSERT INTO empleados (nombres, departamento, sueldo) 
    VALUES ('$nom','$dep',$suel)";
    $result = mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }
 
 }
?>

Ya tenemos la Clase cEmpleado con su nuevo método listo para ser usado en cualquier momento. Ahora continuando con el desarrollo vamos a listar todos los empleados de la tabla Empleados. A este archivo lo llamamos consulta.php y va usar las clase cEmpleado. Esta vez vamos a listar los resultados en una tabla HTML. Veamos:

<?php
 include_once("cEmpleado.php");
 
 //creamos el objeto $objempleados de la clase cEmpleado
 $objempleados=new cEmpleado;
 
 //la variable $lista consulta todos los empleados
 $lista= $objempleados->consultar();
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row = mysql_fetch_array($lista)){
  echo "<tr>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Veamos ahora, el proceso de guardado o inserción de los datos en la tabla Empleado, vamos a llamar a este archivo registro.php y notemos que se crea un objeto de la clase cEmpleado y usamos el método crear() donde especificamos los parámetros requeridos. Al final hace un include al archivo consulta.php para listar los nuevos datos.

<?php
 include_once("cEmpleado.php");
 
 //variables POST
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);
 
 //creamos el objeto $objempleados
 //y usamos su método crear
 $objempleados=new cEmpleado;
 if ($objempleados->crear($nom,$dep,$suel)==true){
  echo "Registro grabado correctamente";
 }else{
  echo "Error de grabacion";
 }
 include('consulta.php');
?>

Ahora las funciones en JavaScript, creamos 3 funciones: 1) para crear el objeto XMLHttpRequest, 2) para enviar y recibir los datos del empleado para que sean guardados en la tabla Empleado y 3) para limpiar las cajas de texto del formulario. El archivo ajax.js va así:

function objetoAjax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
 
function enviarDatosEmpleado(){
 //donde se mostrará lo resultados
 divResultado = document.getElementById('resultado');
 divResultado.innerHTML= '<img src="anim.gif">';
 
 //valores de las cajas de texto 
 nom=document.nuevo_empleado.nombres.value;
 dep=document.nuevo_empleado.departamento.value;
 suel=document.nuevo_empleado.sueldo.value;
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 
 //uso del medoto POST 
 //archivo que realizará la operacion
 //registro.php
 ajax.open("POST", "registro.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divResultado.innerHTML = ajax.responseText
 
   //llamar a funcion para limpiar los inputs
   LimpiarCampos();
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
 //enviando los valores
 ajax.send("nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}
 
//limpiando las cajas de texto
function LimpiarCampos(){
 document.nuevo_empleado.nombres.value="";
 document.nuevo_empleado.departamento.value="";
 document.nuevo_empleado.sueldo.value="";
 document.nuevo_empleado.nombres.focus();
}

Finalmente, el archivo index.php que contendrá un formulario con caja de texto para escribir los datos del empleado y una lista de los empleados registrado. Una vez que pulsamos el botón Grabar, los datos se guardarán en la tabla Empleado y la lista se actualizará automaticamente. Dentro de las etiquetas <head></head> hacemos referencia al archivo ajax.js, en el atributo onsubmit de la etiqueta <form> especificamos la función enviarDatosEmpleado() y en la dentro de las etiquetas <div id="resultado"></div> en la parte final hacemos un include al archivo consulta.php. El archivo quedaría así:

<html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="nuevo_empleado" action="" onSubmit="enviarDatosEmpleado(); return false">
<h2>Nuevo empleado</h2>
<p>Nombres 
<label>
<input name="nombres" type="text" />
</label>
</p>
<p>Departamento 
<label>
<select name="departamento">
<option value="Informatica">Informatica</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Administracion">Administracion</option>
<option value="Logistica">Logistica</option>
</select>
</label>
</p>
<p>Sueldo <strong>S/.</strong>
<label>
<input name="sueldo" type="text" />
</label>
</p>
<p>
<label>
<input type="submit" name="Submit" value="Grabar" />
</label>
</p>
</form>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Se habrá dado cuenta que hemos incluido un método a la clase cEmpleado y ello sin alterar el método anterior. Incluso hemos usado el método consultar() que ya estaba allí. Esto nos hace ver que si programamos Orientando a Objetos, nuestro código se hace flexible y reutilizable.

martes, 30 de septiembre de 2014

Adicionar Filas a Tablas Dinamicamente mediante Ajax

Veamos como quedaría nuestra función PHP agregaFila()

function agregarFila($formulario){
    $respuesta = new xajaxResponse();
 extract($formulario);
 $id_campos = $cant_campos = $num_campos+1;
 $str_html_td1 = "$txtNombre" ;
    $str_html_td2 = "$txtEdad";
    $str_html_td3 = "$txtDireccion";
    $str_html_td4 = "$selSexo";
    $str_html_td5 = "$selEstCivil";
    $str_html_td6 = '<img src="images/delete.png" width="16" height="16" alt="Eliminar" 
onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){xajax_eliminarFila('. $id_campos .', proyecto.cant_campos.value);}"/>';
 
 if($num_campos == 0){ // creamos un encabezado de lo contrario solo agragamos la fila
  $respuesta->addCreate("tbDetalle", "tr", "rowDetalle_0");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_01");    //creamos los campos
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_02");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_03");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_04");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_05");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_06");
 
        $respuesta->addAssign("tdDetalle_01", "innerHTML", "Nombre");   //asignamos el contenido
        $respuesta->addAssign("tdDetalle_02", "innerHTML", "Edad");
        $respuesta->addAssign("tdDetalle_03", "innerHTML", "Direccion");
        $respuesta->addAssign("tdDetalle_04", "innerHTML", "Sexo");
        $respuesta->addAssign("tdDetalle_05", "innerHTML", "Estado Civil");
        $respuesta->addAssign("tdDetalle_06", "innerHTML", "Eliminar");
 }
    $idRow = "rowDetalle_$id_campos";
    $idTd = "tdDetalle_$id_campos";
 $respuesta->addCreate("tbDetalle", "tr", $idRow);
    $respuesta->addCreate($idRow, "td", $idTd."1");     //creamos los campos
    $respuesta->addCreate($idRow, "td", $idTd."2");
    $respuesta->addCreate($idRow, "td", $idTd."3");
    $respuesta->addCreate($idRow, "td", $idTd."4");
    $respuesta->addCreate($idRow, "td", $idTd."5");
    $respuesta->addCreate($idRow, "td", $idTd."6");
/*
 *     Esta parte podria estar dentro de algun ciclo iterativo  */
 
    $respuesta->addAssign($idTd."1", "innerHTML", $str_html_td1);   //asignamos el contenido
    $respuesta->addAssign($idTd."2", "innerHTML", $str_html_td2);
    $respuesta->addAssign($idTd."3", "innerHTML", $str_html_td3);
    $respuesta->addAssign($idTd."4", "innerHTML", $str_html_td4);
    $respuesta->addAssign($idTd."5", "innerHTML", $str_html_td5);
    $respuesta->addAssign($idTd."6", "innerHTML", $str_html_td6);
 
/*  aumentamos el contador de campos  */
 
 $respuesta->addAssign("num_campos","value", $id_campos);
 $respuesta->addAssign("cant_campos" ,"value", $id_campos);
 return $respuesta;
}
El HTML para esta aplicacion:
<form name="proyecto" id="proyecto" action="" method="post">
<input type="hidden" id="num_campos" name="num_campos" value="0" />
<input type="hidden" id="cant_campos" name="cant_campos" value="0" />
<div id="cont" class="container">
<fieldset>
 <legend>El formulario</legend>
<div class="top">
 <label class="label" for="txtNombre">Nombre:</label>
<div class="div_texbox">
<input type="text" id="txtNombre" name="txtNombre" value="" class="textbox" /></div>
 
        <label class="label" for="txtEdad">Edad:</label>
<div class="div_texbox">
<input type="text" id="txtEdad" name="txtEdad" value="" class="textbox txtUser" /></div>
 
        <label class="label" for="txtDireccion">Direccion:</label>
<div class="div_texbox">
<input type="text" id="txtDireccion" name="txtDireccion" value="" class="textbox txtCmt" /></div>
 
        <label class="label" for="selSexo">Sexo:</label>
<div class="div_texbox">
<select id="selSexo" name="selSexo" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Hombre">Hombre</option>
                <option value="Mujer">Mujer</option>
            </select>
</div>
 
        <label class="label" for="selEstCivil">Estado Civil:</label>
<div class="div_texbox">
<select id="selEstCivil" name="selEstCivil" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Soltero">Soltero</option>
                <option value="Casado">Casado</option>
                <option value="Viudo">Viudo</option>
            </select>
</div>
</div>
 
</fieldset>
<div class="button_div">
<input type="reset" id="btnCancel" name="btnCancel" value="Cancelar" class="buttons_CANCEL" onclick="xajax_cancelar();" />
<input type="button" id="btnAgregar" name="btnAgregar" value="Agregar Persona" class="buttons_aplicar" onclick="xajax_agregarFila(xajax.getFormValues('proyecto'));" />
</div>
 
<fieldset class="fieldset">
    <legend class="legend">
        Detalle de Personas
    </legend>
<div class="clear"></div>
<div id="form3" class="form-horiz">
<table width="100%" id="tblDetalle" class="listado">
<tbody id="tbDetalle"></tbody>
</table>
</div>
 
</fieldset>
</div>
</form>
Y como sabroso entremes, le traemos… la función que elimina las filas
agregadas por la función anterior.
function eliminarFila($id_campo, $cant_campos){
 $respuesta = new xajaxResponse();
 $respuesta->addRemove("rowDetalle_$id_campo"); //borro el detalle que indica el parametro id_campo
 -- $cant_campos; //Resto uno al numero de campos y si es cero borro todo
 if($cant_campos == 0){
  $respuesta->addRemove("rowDetalle_0");
  $respuesta->addAssign("num_campos", "value", "0"); //dejo en cero la cantidad de campos para seguir agregando si asi lo desea el usuario
  $respuesta->addAssign("cant_campos", "value", "0");
 }
    $respuesta->addAssign("cant_campos", "value", $cant_campos);
 return $respuesta;
}