Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Crear campos editables de una base de datos

Estas en el tema de Crear campos editables de una base de datos en el foro de Frameworks JS en Foros del Web. Buenas...! recurro a uds porq necesito ayuda.... ya no se que hacer. me dijeron que con ajax puedo resulverlo. estoy creando un sitio donde se ...
  #1 (permalink)  
Antiguo 16/06/2010, 07:25
 
Fecha de Ingreso: abril-2010
Mensajes: 17
Antigüedad: 14 años, 8 meses
Puntos: 0
Crear campos editables de una base de datos

Buenas...!
recurro a uds porq necesito ayuda.... ya no se que hacer. me dijeron que con ajax puedo resulverlo.
estoy creando un sitio donde se muestre los campos de una base de datos.
pero esos datos deben estar en una CAJA DE TEXTO (para poderlos modificar) y debe tener un boton guardar.. ya hice la base de datos. la llene aparte (ABAJO) y funciona. pero con los campos de texto estoy perdido...



Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mostrar Todo</title>
</head>

<body>
<form name="pepe" action="index.php" method="post">
<table border ='1' cellspacing='0'>

<?php
include ("acceso.inc.php");
$resultado mysql_query ($sql);
$campos mysql_num_fields ($resultado);
$filas mysql_num_rows ($resultado);



echo 
"<p> Cantidad de Equipos Conectados: <b> $filas </b> </p>\n";



echo 
"<tr>"//crea la fila
for ($i 0$i $campos$i++) {
    
$nombrecampo mysql_field_name ($resultado$i);
    echo 
" <th> $nombrecampo</th>";
}

echo 
"</tr>\n"//cerrar fila

// NUEVO

while ($row mysql_fetch_array($resultado)) {
$valor"j";

echo 
'<tr>';
echo 
' <td><input name="ip" type="text" id="nombre" value="<?php $valor ?>" >';

echo 
'  <td><input type="text" name="direccion" value="<?php  echo $row[Departamento]; ?>" />';
echo 
'<td width="25%">'.$row[fecha].'</td>';
echo 
'<td width="10%">'.$row['Responsable'].'</td>';
echo 
'<td width="10%">'.$row['Notas'].'</td>';
echo 
'</tr>';

}

mysql_free_result($resultado);
//fin NUEVO









mysql_close ($dp);

?>
</table>
<input type="submit" name="boton" />
</form>




<form action=" "  method="post">

<table border ='1' cellspacing='0'>
<tr>

  <td><input name="nombre" type="text" id="nombre" value="<?php $row[IP]?>" />
    <?php
include ("acceso.inc.php");
if (isset (
$_POST['submit'])) {
    if (empty (
$_POST['IP'])) {
        echo 
"<p> Introduzca una <b> IP </b>.  valida</p>";
    } else if (
strlen ($_POST['Departamento']) <3) {
        echo 
"<p> El Departamento debe tener como mínimo <b> 3 </b> caracteres</p>";
    } else {
$sql "INSERT INTO direcciones (IP, Departamento, Responsable, Notas) 
VALUES ('$_POST[IP]', '$_POST[Departamento]', '$_POST[Responsable]', '$_POST[Notas]')"
;
$resultado mysql_query ($sql);
    if (
$resultado) {
        echo 
"<p> Datos Agregados con exito</p>";
    } else { 
        echo 
"<p> Datos no agregados</p>";
    }
}
echo 
"[ <a href='javascript:history.back()' > Volver  </a>] - 
[<a href='$_SERVER[PHP_SELF]' > Introducir Nueva Fla </a>]"
;
} else {
    
$sql2="SELECT * FROM categorias";
    
$resultado2 mysql_query ($sql2);
    
$campocat "";
    while (
$row mysql_fetch_assoc ($resultado2)) {
        
$campocat .="<option value='$row [id]' > $row[categoría] </option>\n";    
}

echo <<<FORMULARIO

<form action= "
{$_SERVER['PHP_SELF']}" method= "post">
<table>
Recuerde escribir todos los datos en <b> MAYUSCULA</b> <br>
<tr> <td> IP: </td> <td> <input type= "text" name= "IP" > </td> </tr>
<tr> <td> Departamento: </td> <td> <input type= "text" name= "Departamento" > </td> </tr>
<tr> <td> Responsable: </td> <td> <input type= "text" name= "Responsable" > </td> </tr>
<tr> <td> Notas: </td> <td> <input type= "text" name= "Notas" > </td> </tr>

<tr> <td> </td> </td> <input type="submit" value="Introducir Datos" name="submit"> </td> </tr>
</table>
</form>

FORMULARIO;
mysql_close ($dp);
}
?>
  </table>
</form>
</body>
</html>

espero que me puedan ayudar..


P.D.: ( quien me ayude puedo recompenzar con hosting y base de datos por el favor)


gracias
  #2 (permalink)  
Antiguo 16/06/2010, 12:21
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Crear campos editables de una base de datos

Hola

Lo primero es aconsejarte que te leas algún tutorial sobre AJAX

Te dejo un código con lo que se produce lo que te ocupa. Necesitas crear una tabla con tres campos (Id, nombre y permiso)

otorgar_permisos.php
Código PHP:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <style type="text/css">
  6. .color0 {background: orange;}
  7. .color1 {background: yellow;}
  8. </style>
  9. <script type="text/javascript">
  10. var ns4 = (document.layers)? true:false
  11. var ie4 = (document.all)? true:false
  12. var ns6 = (document.getElementById)? true:false
  13.  
  14. function captura_objeto(idnombre) {
  15.     if (ns6) {
  16.     return document.getElementById(idnombre);
  17.     } else if (ie4) {
  18.     return document.all[idnombre];
  19.     } else if (ns4) {
  20.     return document.layers[idnombre];
  21.     } else{
  22.     return null;
  23.     }
  24. }
  25.  
  26.  
  27.  
  28. function creaAjax(){
  29.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  30.     var ajax = false;
  31.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  32.         try{
  33.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  34.         }
  35.         catch(e) {
  36.             ajax = false;
  37.         }
  38.     }
  39.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  40.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  41.     }
  42.     return ajax;
  43. }
  44.  
  45.  
  46.  
  47. var control = true;
  48. function ActivarDesactivar_campos(Id, bol, acc) {
  49. //alert(bol+ " - " +control);
  50. var Id_tr = captura_objeto(Id);
  51. var td = Id_tr.getElementsByTagName("TD");
  52. var div = Id_tr.getElementsByTagName("DIV");
  53.  
  54.     if(control == bol && bol == true && acc == 0) {
  55.  
  56.         div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  57.         var elemento1 = document.createElement("INPUT");
  58.         elemento1.setAttribute("type","text");
  59.         elemento1.setAttribute("size","10");
  60.         elemento1.setAttribute("maxlength","20");
  61.         elemento1.setAttribute("name","nombre");
  62.         elemento1.setAttribute("id","nombre");
  63.         elemento1.setAttribute("value", div[1].innerHTML);
  64.         td[1].appendChild(elemento1);
  65.  
  66.         div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  67.         var elemento2 = document.createElement("SELECT");
  68.         elemento2.setAttribute("size","1");
  69.         elemento2.setAttribute("name","privilegio");
  70.         elemento2.setAttribute("id","privilegio");
  71.         opcioncur = document.createElement("OPTION");
  72.         opcioncur.textContent = "Tipo de Permiso";
  73.         opcioncur.value = div[2].innerHTML;
  74.         elemento2.appendChild(opcioncur);
  75.         opcion1 = document.createElement("OPTION");
  76.         opcion1.textContent = "Alto";
  77.         opcion1.value = "A";
  78.         elemento2.appendChild(opcion1);
  79.         opcion2 = document.createElement("OPTION");
  80.         opcion2.textContent = "Medio";
  81.         opcion2.value = "D";
  82.         elemento2.appendChild(opcion2);
  83.         opcion3 = document.createElement("OPTION");
  84.         opcion3.textContent = "Bajo";
  85.         opcion3.value = "F";
  86.         elemento2.appendChild(opcion3);
  87.         td[2].appendChild(elemento2);
  88.  
  89. control = (bol == true ? false : true);
  90.  
  91.     } else if(control == bol && bol == false && acc == 0) {
  92.  
  93.         var elem1 = document.getElementById("nombre");
  94.         var padre1 = elem1.parentNode;
  95.         padre1.removeChild(elem1);
  96.         div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  97.  
  98.         var elem2 = document.getElementById("privilegio");
  99.         var padre2 = elem2.parentNode;
  100.         padre2.removeChild(elem2);
  101.         div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  102.  
  103. control = (bol == true ? false : true);
  104.        
  105.     } else if(control == bol && bol == false && acc == 1) {
  106.  
  107.  
  108. // --- REVISAMOS LOS VALORES (sin son iguales no se usa Ajax)
  109. var elem1_old = div[1].innerHTML
  110. var elem1 = document.getElementById("nombre");
  111. var elem2_old = div[2].innerHTML
  112. var elem2 = document.getElementById("privilegio");
  113.  
  114.         if (elem1_old == elem1.value && elem2_old == elem2.value) {
  115.             div[1].textContent = elem1_old;
  116.             div[2].textContent = elem2_old;
  117.  
  118.         // ---- ELIMINA LOS ELEMENTOS
  119.             var padre1 = elem1.parentNode;
  120.             padre1.removeChild(elem1);
  121.             var padre2 = elem2.parentNode;
  122.             padre2.removeChild(elem2);
  123.  
  124.         // ---- MUESTRA REGISTRO SIN ACTUALIZAR
  125.             div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  126.             div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  127. control = true;
  128.  
  129.         } else {
  130.  
  131. // ---- ACTUALIZA REGISTRO
  132. var url = "Otorgar_Permisos_Ajax.php"
  133. var ajax=creaAjax();
  134. //var elem1 = document.getElementById("nombre");
  135. //var elem2 = document.getElementById("privilegio");
  136. ajax.open('POST',url,true);
  137. ajax.onreadystatechange = function() {
  138.  
  139.             if (ajax==null){
  140.                 alert ("Tu navegador web no soporta AJAX!");
  141.                 return;
  142.             }
  143.  
  144.             if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){
  145.  
  146.                     } else if (ajax.readyState==4) {
  147.                             if (ajax.status==200) {        
  148.                     var valores = unescape(ajax.responseText); 
  149.                     div[1].textContent = valores.split(",")[0];
  150.                     div[2].textContent = valores.split(",")[1];
  151.  
  152.             // ---- ELIMINA LOS ELEMENTOS
  153.                     var padre1 = elem1.parentNode;
  154.                     padre1.removeChild(elem1);
  155.                     var padre2 = elem2.parentNode;
  156.                     padre2.removeChild(elem2);
  157.  
  158.             // ---- MUESTRA REGISTRO ACTUALIZADO
  159.                     div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  160.                     div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  161.  
  162.                             } else if (ajax.status==404) {
  163.                                             alert("La dirección no existe");
  164.  
  165.                                                     } else {
  166.                                         alert("Se ha producido un error");
  167.                                                     }
  168.                                         }
  169.                     }
  170. control = true;
  171.    
  172.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  173.             ajax.setRequestHeader('Content-Length', Id_tr.length); 
  174.     ajax.send('id='+Id+'&nombre='+escape(elem1.value)+'&nombre_old='+escape(div[1].innerHTML)+'&privilegio='+escape(elem2.value)+'&privilegio_old='+escape(div[2].innerHTML));
  175.             return;
  176.         }
  177.     }
  178. }
  179. </script>
  180. </head>
  181. <body>
  182. <table width="100%" border="1px">
  183. <tr>
  184. <th></th>
  185. <th>ID</th>
  186. <th>NOMBRE</th>
  187. <th>PRIVILEGIOS</th>
  188. </tr>
  189.  
  190. <?php
  191. include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.php");  
  192. $bd = new ClassConexionBD('database');
  193. $bd->ConexionBD();
  194.  
  195. $sql = $bd->consulta("SELECT Id, nombre, privilegio FROM Usuarios");
  196.  
  197.     if($bd->RS($sql)>0) {  
  198. $tabla = 0;
  199.         while($registros = $bd->arreglo($sql)){  
  200. $resto = ($tabla % 2);
  201.             switch ($resto) { // Coloreamos cada tr        
  202.                 case 0: $estilo = "color0"; break;        
  203.                 case 1: $estilo = "color1"; break;
  204.             }
  205.  
  206. //------------------------- Valores de la consulta -------------------------
  207. ?>
  208. <tr width="100%" id="<?=$registros["Id"]?>">
  209. <th><img src="./cancelar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, false, 0);" />&nbsp;<img src="./editar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, false, 1);" />&nbsp;<img src="./mostar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, true, 0);" /></th>
  210. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  211. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["Id"]?></div>
  212. </td>
  213. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  214. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["nombre"]?></div>
  215. </td>
  216. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  217. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["privilegio"]?></div>
  218. </td>
  219. </tr>
  220. <?php
  221. $tabla++;
  222. //------------------------------------------------------
  223.         }
  224.     }
  225. $bd->limparRS($sql);
  226. $bd->limpiarCon();
  227. ?>
  228. </table>
  229. </body>
  230. </html>

otorgar_permisos_ajax.php
Código PHP:
Ver original
  1. <?php
  2. $campos_valor_actualizar = Array();
  3. $respuesta = "";
  4.  
  5. $nomb = trim($_POST["nombre"]);
  6. $nomb_old = trim($_POST["nombre_old"]);
  7. $priv = trim($_POST["privilegio"]);
  8. $priv_old = trim($_POST["privilegio_old"]);
  9.  
  10. if ($nomb == $nomb_old) {
  11. $respuesta = $nomb_old;
  12. } else {
  13. $respuesta = $nomb;
  14. array_push($campos_valor_actualizar, "nombre = '".$nomb."'");
  15. }
  16.  
  17. if ($priv == $priv_old) {
  18. $respuesta .= "," .$priv_old;
  19. } else {
  20. $respuesta .= "," .$priv;
  21. array_push($campos_valor_actualizar, "privilegio = '".$priv."'");
  22. }
  23.  
  24. include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.php");  
  25. $bd = new ClassConexionBD('database');
  26. $bd->ConexionBD();
  27.  
  28. $sql = $bd->consulta("UPDATE Usuarios SET " .implode(",", $campos_valor_actualizar). " WHERE Id = ".$_POST["id"]."");
  29. //$bd->limparRS($sql);
  30. $bd->limpiarCon();
  31.  
  32.  
  33. echo $respuesta;
  34. ?>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Etiquetas: ajax, caja, cajas, php, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:16.