Actualizar al datos

hpereira · #1 (**permalink**) 21/07/2010, 14:04

Hola amigos

tengo una duda

Como puedo hacer para actualisar mis datos que despliego en una tabla, yo quiero dar click sobre un dato y luego escribir y que quitarme se ese campo o dar click se me autulice mi informacion

Estoy usando php y mysql y asi despliego mi informacion

<td><? echo $amo10["seguro"];?></td>

Gracias espero de su ayuda

Adler · #2 (**permalink**) 21/07/2010, 16:58

Hola

A ver si es esto lo que buscas

Código PHP:

Ver original<?php
header('content-type: text/html; charset: utf-8');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<style type="text/css">
.color0 {background: orange;}
.color1 {background: yellow;}
</style>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
 
function captura_objeto(idnombre) {
    if (ns6) {
    return document.getElementById(idnombre);
    } else if (ie4) {
    return document.all[idnombre];
    } else if (ns4) {
    return document.layers[idnombre];
    } else{
    return null;
    }
}
 
 
 
function creaAjax(){
    var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
    var ajax = false;
    for(var i=0 ; !ajax && i<ajaxs.length ; i++){
        try{ 
            ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
        }
        catch(e) { 
            ajax = false; 
        }
    }
    if(!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
    }
    return ajax;
}
 
 
 
var control = true;
function ActivarDesactivar_campos(Id, bol, acc) {
//alert(bol+ " - " +control);
var Id_tr = captura_objeto(Id);
var td = Id_tr.getElementsByTagName("TD");
var div = Id_tr.getElementsByTagName("DIV");
 
    if(control == bol && bol == true && acc == 0) {
 
        div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
        var elemento1 = document.createElement("INPUT");
        elemento1.setAttribute("type","text");
        elemento1.setAttribute("size","10");
        elemento1.setAttribute("maxlength","20");
        elemento1.setAttribute("name","nombre");
        elemento1.setAttribute("id","nombre");
        elemento1.setAttribute("value", div[1].innerHTML);
        td[1].appendChild(elemento1);
 
        div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
        var elemento2 = document.createElement("SELECT");
        elemento2.setAttribute("size","1");
        elemento2.setAttribute("name","privilegio");
        elemento2.setAttribute("id","privilegio");
        opcioncur = document.createElement("OPTION");
        opcioncur.textContent = "Tipo de Permiso";
        opcioncur.value = div[2].innerHTML;
        elemento2.appendChild(opcioncur);
        opcion1 = document.createElement("OPTION");
        opcion1.textContent = "Alto";
        opcion1.value = "A";
        elemento2.appendChild(opcion1);
        opcion2 = document.createElement("OPTION");
        opcion2.textContent = "Medio";
        opcion2.value = "D";
        elemento2.appendChild(opcion2);
        opcion3 = document.createElement("OPTION");
        opcion3.textContent = "Bajo";
        opcion3.value = "F";
        elemento2.appendChild(opcion3);
        td[2].appendChild(elemento2);
 
control = (bol == true ? false : true);
 
    } else if(control == bol && bol == false && acc == 0) {
 
        var elem1 = document.getElementById("nombre");
        var padre1 = elem1.parentNode;
        padre1.removeChild(elem1);
        div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
 
        var elem2 = document.getElementById("privilegio");
        var padre2 = elem2.parentNode;
        padre2.removeChild(elem2);
        div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
 
control = (bol == true ? false : true);
        
    } else if(control == bol && bol == false && acc == 1) {
 
 
// --- REVISAMOS LOS VALORES (sin son iguales no se usa Ajax)
var elem1_old = div[1].innerHTML
var elem1 = document.getElementById("nombre");
var elem2_old = div[2].innerHTML
var elem2 = document.getElementById("privilegio");
 
        if (elem1_old == elem1.value && elem2_old == elem2.value) {
            div[1].textContent = elem1_old;
            div[2].textContent = elem2_old;
 
        // ---- ELIMINA LOS ELEMENTOS
            var padre1 = elem1.parentNode;
            padre1.removeChild(elem1);
            var padre2 = elem2.parentNode;
            padre2.removeChild(elem2);
 
        // ---- MUESTRA REGISTRO SIN ACTUALIZAR
            div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
            div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
control = true;
 
        } else {
 
// ---- ACTUALIZA REGISTRO
var url = "Otorgar_Permisos_Ajax2.php"
var ajax=creaAjax();
//var elem1 = document.getElementById("nombre");
//var elem2 = document.getElementById("privilegio");
ajax.open('POST',url,true);
ajax.onreadystatechange = function() {
 
            if (ajax==null){
                alert ("Tu navegador web no soporta AJAX!");
                return;
            }
 
            if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){
 
                    } else if (ajax.readyState==4) {
                            if (ajax.status==200) {        
                    var valores = unescape(ajax.responseText);  
                    div[1].textContent = valores.split(",")[0];
                    div[2].textContent = valores.split(",")[1];
 
            // ---- ELIMINA LOS ELEMENTOS
                    var padre1 = elem1.parentNode;
                    padre1.removeChild(elem1);
                    var padre2 = elem2.parentNode;
                    padre2.removeChild(elem2);
 
            // ---- MUESTRA REGISTRO ACTUALIZADO
                    div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
                    div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
 
                            } else if (ajax.status==404) {
                                            alert("La dirección no existe");
 
                                                    } else {
                                        alert("Se ha producido un error");
                                                    }
                                        }
                    }
control = true;
    
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            ajax.setRequestHeader('Content-Length', Id_tr.length);  
    ajax.send('id='+Id+'&nombre='+elem1.value+'&nombre_old='+div[1].innerHTML+'&privilegio='+escape(elem2.value)+'&privilegio_old='+escape(div[2].innerHTML));
            return;
        }
    }
}
</script>
</head> 
<body> 
<table width="100%" border="1px">
<tr>
<th></th>
<th>ID</th>
<th>NOMBRE</th>
<th>PRIVILEGIOS</th>
</tr>
 
<?php 
include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.inc.php");  
$bd = new ClassConexionBD('database');
$bd->ConexionBD();
 
$sql = $bd->consulta("SELECT Id, nombre, privilegio FROM Usuarios");
 
    if($bd->RS($sql)>0) {  
$tabla = 0;
        while($registros = $bd->arreglo($sql)){  
$resto = ($tabla % 2);
            switch ($resto) { // Coloreamos cada tr        
                case 0: $estilo = "color0"; break;        
                case 1: $estilo = "color1"; break;
            }
 
//------------------------- Valores de la consulta -------------------------
?>
<tr width="100%" id="<?=$registros["Id"]?>">
<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>
<td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
<div id="<?=$tabla?>[]" style="display:block;"><?=$registros["Id"]?></div>
</td>
<td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
<div id="<?=$tabla?>[]" style="display:block;"><?=$registros["nombre"]?></div>
</td>
<td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
<div id="<?=$tabla?>[]" style="display:block;"><?=$registros["privilegio"]?></div>
</td>
</tr>
<?php
$tabla++;
//------------------------------------------------------
        }
    }
$bd->limparRS($sql);
$bd->limpiarCon();
?>
</table>
</body> 
</html>

otorgar_permisos_ajax2.php

Código PHP:

Ver original<?php
header('content-type: text/html; charset: utf-8');
$campos_valor_actualizar = Array();
$respuesta = "";
 
$nomb = trim($_POST["nombre"]);
$nomb_old = trim($_POST["nombre_old"]);
$priv = trim($_POST["privilegio"]);
$priv_old = trim($_POST["privilegio_old"]);
 
if ($nomb == $nomb_old) {
$respuesta = $nomb_old;
} else {
$respuesta = $nomb;
array_push($campos_valor_actualizar, "nombre = '".$nomb."'");
}
 
if ($priv == $priv_old) {
$respuesta .= "," .$priv_old;
} else {
$respuesta .= "," .$priv;
array_push($campos_valor_actualizar, "privilegio = '".$priv."'");
}
 
include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.inc.php");  
$bd = new ClassConexionBD('database');
$bd->ConexionBD();
 
$sql = $bd->consulta("UPDATE Usuarios SET " .implode(",", $campos_valor_actualizar). " WHERE Id = ".$_POST["id"]."");
//$bd->limparRS($sql);
$bd->limpiarCon();
 
 
echo $respuesta;
?>

Suerte

cesarpunk · #3 (**permalink**) 22/07/2010, 11:09

Creo que sería más sencillo el Ajax.InPlaceEditor del scriptaculous, lo puedes adecuar a muchos elementos de un formulario o lista. Suerte.

hpereira · #4 (**permalink**) 22/07/2010, 11:45

Existen algunos ejemplos de Ajax.InPlaceEditor

Porque la verdad no lo conosco soy nuevo en todo esto de ajax

Potro · #5 (**permalink**) 22/07/2010, 11:58

Aqui te dejo un ejemplo muy basico..

http://www.java2s.com/Code/JavaScrip...tionEditor.htm

Saludos...