Hola amigos, bueno buscando por la red encontre un ejemplo de un codigo para modificar un registro o valor de una BD, sin refrescar usando ajax. Esto lo encontre en formatoweb, no se si infrinja algo poneiendo el nombre, si lo hago me lo dicen ya que respeto el derecho de autor. pero Bueno el problema es que he intentado comprenderlo un poco, e intente unas variantes. pero no logro hacer que me funcione. por ejemplo en el ejemplo de esta pagina q menciono pues al hacer click en uno de los campos el input se crea y tb se actualiza dicho campo, pero al intentar hacerlo lo mismo en mi prueba pues no funciona, Cabe indicar que lo estoy usando en otra tabla con otros campos y pues con otra idea.
Aca les pongo el codigo que habia cambiado a ver si me dan una orientacion..
Código PHP:
<?php
include 'conexion.php';
conectar();
//$consulta=mysql_query("SELECT valor FROM ingreso_db");
$result=mysql_query("SELECT * FROM sedapal");
desconectar();
/*
// Capturo los valores de la DB para mostrarlos apenas se carga la pagina
$campo1=mysql_fetch_row($consulta);
$campo2=mysql_fetch_row($consulta);
*/
function opt_mant($result)
{
$i=0;
if ($row = mysql_fetch_array($result))
{
do{
$i=0;
while ($i < mysql_num_fields($result))
{
?>
<div id="demo" style="width:600px;">
<div id="demoArr" onclick="creaInput(this.id, '<?$row[$i]?>')"><?=$row[$i];?></div>
<div class="mensaje" id="error"></div>
</div>
<?
$i++;
}
}while ($row = mysql_fetch_array($result));
}else {
echo "<p>¡No se ha encontrado ningún registro!</p>\n";
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
Este contenido es de libre uso y modificación bajo la siguiente licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/deed.es
Sobre el reconocimiento:
Todos los códigos han sido realizados con la idea de que sirvan para colaborar con el aprendizage de aquellos que se están introduciendo
en estas tecnologías y no con el objetivo de que sean utilizados directamente en sitios web. No obstante si utilizas algún código en tu sitio
(ya sea sin modificar o modificado), o si ofreces los fuentes para descargar o si bien decides publicar alguno de los artículos debes cumplir con:
-Colocar un link a http://www.formatoweb.com.ar/ajax/ visible por tus usuarios como forma de mención a la fuente original del contenido.
-Enviar un correo a [email protected] informando la URL donde el contenido se ha publicado o se va a publicar en un futuro.
-Si publicas los fuentes para descargar este texto no debe ser eliminado ni alterado.
Más ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax/
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: [email protected]
-->
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Ingreso a base de datos, codigo fuente - ejemplo</title>
<link rel="stylesheet" type="text/css" href="ingreso_sin_recargar.css">
<script type="text/javascript" src="ingreso_sin_recargar.js"></script>
</head>
<body>
<?opt_mant($result);?>
</body>
</html>
Como ven es la unica variante que le hago no he tocado los otros archivos, ya que al parecer le pasa el id y y el valor y con eso lo maneja, pero no entiendo mucho como funciona las funciones en js. Espero me orienten y gracias, por el tiempo.. .. aca les pongo el js.
Código PHP:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objeto AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function eliminaEspacios(cadena)
{
// Funcion equivalente a trim en PHP
var x=0, y=cadena.length-1;
while(cadena.charAt(x)==" ") x++;
while(cadena.charAt(y)==" ") y--;
return cadena.substr(x, y-x+1);
}
function cargaDatos(idDiv, idInput)
{
var valorInput=document.getElementById(idInput).value;
var divError=document.getElementById("error");
// Elimino todos los espacios en blanco al principio y al final de la cadena
valorInput=eliminaEspacios(valorInput);
// Valido con una expresion regular el contenido de lo que el usuario ingresa
var reg=/(^[a-zA-Z0-9._áéíóúñ¡!¿? -]{1,40}$)/;
if(!reg.test(valorInput))
{
// Si hay error muestro el div que contiene el error
divError.innerHTML="El texto ingresado no es válido"
divError.style.display="block";
}
else
{
// Si no hay error oculto el div (por si se mostraba)
divError.style.display="none";
mostrandoInput=false;
document.getElementById(idDiv).innerHTML=valorInput;
// Creo objeto AJAX y envio peticion al servidor
var ajax=nuevoAjax();
ajax.open("GET", "ingreso_sin_recargar_proceso.php?dato="+valorInput+"&actualizar="+idInput, true);
ajax.send(null);
}
}
var mostrandoInput=false;
function creaInput(idDiv, idInput)
{
/* Funcion encargada de cambiar el texto comun de la fila por un campo input que conserve
el valor que tenia ese campo */
var divError=document.getElementById("error");
/* Solo mostramos el input si ya no esta siendo mostrado y si ademas el div del error no esta en pantalla */
if(!mostrandoInput && divError.style.display!="block")
{
// Obtenemos el div contenedor del futuro input
var divContenedor=document.getElementById(idDiv);
// Creamos el input
divContenedor.innerHTML="<input type='text' onBlur='cargaDatos(\""+idDiv+"\", \""+idInput+"\")' value='"+divContenedor.innerHTML+"' Name='"+idInput+"' maxlength='40'>";
// Colocamos el cursor en el input creado
document.getElementById(idInput).focus();
// Establecemos a true la variable para especificar que hay un input en pantalla y no se debe crear otro hasta que este se oculte
mostrandoInput=true;
}
}