[SOLUCIONADO] convertir cadena de texto en inputs de una tabla que muestra varios registros de BD

[Carlos1975]

Buenos dias a todos

Tengo una tabla que muestra varios registros de una BD en la cual incluyo un boton con la opcion de modificar los registros mostrados.

Me gustaria que al darle al boton modificar, 2 de los registros mostrados se convirtieran en inputs y apareciera un botón para poder hacer un UPDATE en la BD

Se que se puede hacer con jquery y con javascript pero me pierdo un poco con estos lenguajes. Si me pudieran dar alguna ayuda seria de agradecer.

Código PHP:

<?php
 
include("mysql.php");
 
$idp = $_GET['producto'];
$db = new MySQL();
$listar = $db -> consulta("SELECT * FROM tbl_img_productos WHERE idProducto = ".$idp."");
 
if ($db -> num_rows($listar) > 0) {
 
        echo '<table class="display">';
        echo '<thead><tr>';
        echo '<td width="5%">Estado</td>';
        echo '<td width="10%" align="center">Imagen</td>';
        echo '<td width="30%">Nombre de la imagen</td>';
        echo '<td width="30%">Titulo de la imagen</td>';
        echo '<td width="15%">&nbsp;</td>';
        echo '<td width="15%">&nbsp;</td>';
        echo '</tr></thead>';
    
    while ($row = ($db -> fetch_array($listar))) {
 
        echo '<tbody><tr class="selected">';
    
    if ($row["status"] == 1) { 
        echo '<td align="center"><img src="img/ico/p_active.png" width="25" height="18"></td>'; 
    } else { 
        echo '<td><img src="img/ico/p_inactive.png" width="25" height="18"></td>'; 
    }
    
        echo '<td><a target="_blank" href="../img/p/'.$idp.'/'.$row['strIdentificador'].'"><img src="../img/p/'.$idp.'/'.$row['strIdentificador'].'" width="70" height="70"></a></td>';
        
?>
 
<!-- 
 
A partir de aqui es donde muestro los 2 registros que quiero transformar en inputs  
 
-->
 
    <td id="datos"><?php echo $row['strNombreImagen'] ?></td>
        <td id="datos"><?php echo $row['strTituloImagen'] ?></td>
        
<!-- 
 
Este es el boton que quiero que muestre los inputs y el nuevo boton para poder hacer el UPDATE en la BD 
 
-->     
        
        <td align="center">
            <div class="btn-group pull pull-right">
                <a href="actions/files_save_img.php?id=<?php echo $row["idImagen"] ?>&nombre=<?php echo $row['strNombreImagen'] ?>&titulo=<?php echo $row['strTituloImagen'] ?>&producto=<?php echo $idp ?>" class="btn btn-mini"><i class="icon-pencil"></i> &nbsp;Modificar</a>
 
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i class="caret"></i>&nbsp;</button>            
<ul class="dropdown-menu">
<li><a href="" onclick="javascript:if(confirm('Está seguro que desea eliminar la imagen?')) document.location = 'actions/files_delete.php?id=<?php echo $row["idImagen"] ?>&producto=<?php echo $idp ?>'; return false;">
<i class="icon-trash"></i> &nbsp;Eliminar</a></li>
</ul>
            </div>
        </td>
    </tr>
    
<?php
 
    }
    
    echo '</tbody></table>';
    
}
 

Gracias de antemano por su ayuda.

[Alexis88]

En lugar de imprimir directamente los datos, puedes mostrarlos en cajas de texto y, a estas últimas, aplicarles la propiedad readOnly para que no puedan ser modificados.

Código PHP:

<td>
    <input 
        type = "text" 
        value = "<?php echo $row['strNombreImagen']; ?>" 
        onclick = "modificar(this)" 
        onkeypress = "guardar(event, this)" 
        readOnly />
</td>
<td>
    <input 
        type = "text" 
        value = "<?php echo $row['strTituloImagen']; ?>" 
        onclick = "modificar(this)" 
        onkeypress = "guardar(event, this)" 
        readOnly />
</td>
 

Como verás, además del atributo readOnly, les asigné dos funciones que se ejecutarán en dos casos en particular. La primera, para cuando se le de un clic a la caja de texto (modificar()) y la segunda, para cuando se pulse una tecla mientras la caja de texto tenga el enfoque (guardar()). A la primera, le envío a la propia caja de texto como parámetro, mientras que a la segunda, le envío el objeto del evento y a la caja de texto.

Las funciones serían así:

Código Javascript:

function modificar(caja){
    if (caja.readOnly){
        caja.readOnly = false;
    }
    else{
        caja.readOnly = true;
    }
}
 
function guardar(evento, caja){
    var ajax = new XMLHttpRequest();
 
    if (evento.keyCode == 13){
        ajax.open("GET", "tupagina.php?valor=" + caja.value, true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4 && ajax.status == 200){
                alert(ajax.responseText);
            }
        };
        ajax.send();
        caja.readOnly = true;
    }
}
 

En la primera función (modificar()), recibo a la caja de texto y evalúo el estado de su atributo readOnly; si este es true (colocando la expresión de esa manera en la condición, se evalúa si es true o false), le asigno false a dicho atributo para que se pueda escribir en la caja de texto, caso contrario, le vuelvo a asignar true.

En la segunda función (guardar()), recibo al objeto del evento y a la caja de texto. Primero, declaro a la variable ajax y le asigno un objeto XMLHttpRequest para poder realizar una petición asíncrona (Ajax), luego, evalúo el código interno de la tecla pulsada; si este es igual a 13, que es el código que corresponde a la tecla ENTER, envío el valor de la caja de texto hacia la página que deberá actualizar el dato en la base de datos.

Esta parte sería más o menos así:

Código PHP:

$valor = $_GET['valor'];
if (mysqli_query($conexion, "UPDATE tabla SET campo = '$valor' WHERE {aquí va tu condición}"){
    echo 'El dato ha sido actualizado';
}
else{
    echo 'No se pudo actualizar el dato';
}
 

Si te fijas, ya sea cuando se logre o no actualizar el dato en la base de datos, se imprime un mensaje; dicho mensaje será lo que se devolverá a la petición asíncrona y que recibirás en ajax.responseText, el cual muestro mediante un mensaje de alerta.

Finalmente, vuelvo a asignar true al atributo readOnly de la caja de texto, para que nuevamente solo se muestre el dato y no se lo pueda modificar hasta que se le vuelva a dar un clic a la caja de texto.

Saludos

[Carlos1975]

Gracias por tu respuesta la cual es bastante practica pero no es exactamente los que busco.

Yo muestro los datos por filas y en cada fila hay un boton (modificar) el cual debe mostrar los inputs de la fila correspondiente para luego poder enviar los datos a traves de otro boton (guardar) que tambien debe aparecer con los inputs.

Cambiar la cadena de texto por los inputs lo he desarrollado con toggle();

Código Javascript:

function mostrarInputs() {
        
    $('.mostrar').toggle();
    $('.oculto').toggle();
    e.preventDefault();
 
}
 

pero sigo sin poder sacar los inputs en la fila que corresponden, solo se muestra la última fila. Una vez conseguido esto ya paso los datos por GET a la hoja donde tengo el UPDATE.

Si hay alguna idea seria de agradecer.

Gracias de todas formas

[Alexis88]

Pero date cuenta de que lo que te estoy proponiendo es más práctico y termina haciendo lo mismo: Modificando los datos y guardándolos en la base de datos.

Si hay algo que no te haya quedado claro, puedes preguntarme.

Saludos

[Carlos1975]

Hola Alexis

Se que es más práctico usar este código pero prefiero usar las librerias Jquery y no volverme loco con Ajax. Demasiados lenguajes de programación y javascript y yo no somos demasiado amigos que digamos, aunque al final lo seremos

He probado tu código de esta forma:

Código Javascript:

function guardar(evento, caja) {
    var ajax;
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    if (evento.keyCode == 13) { 
        ajax.open("GET", "actions/files_save_img?valor=" + caja.value, true);
        ajax.onreadystatechange = function() {
            if (ajax.readyState == 4 && ajax.status == 200) {
                alert(ajax.responseText);
            }
        };
    ajax.send();
    caja.readOnly = true;
    }
}
 

No me funciona el objeto XMLHttpRequest, no se a que es debido.

Creo que lo que falla no es el código sino la forma de exponerlo ya que la tabla la muestro con un WHILE de PHP y creo que no realiza bien la funcion de guardar debido a ello, No se si estoy en lo cierto ya que me queda mucho por aprender.

De todas formas hago incapié en mostrar un boton de modificar y en mostrar los input con un boton de guardar. Este trabajo es para una administración de una tienda online y los clientes que la usen deben de tener bien claro lo que pueden o no hacer en ella.

Gracias por tus respuestas y tu ayuda, siempre de agradecer. Y encima rápidas, cosa que valoro bastante en este foro.

Si supieras otra manera de hacerlo con Jquery o simple javascript sería de gran ayuda

salu2

y gracias de nuevo

[Carlos1975]

Problema resuelto y al final con Ajax

Alexis te dejo que me eches la bronca

Dejo el codigo para los que lo necesiten, siempre son opciones para todos

Jquery + Ajax

Código Javascript:

$(document).ready( function() {
        
    $('input').blur( function() {
        var field  = $(this);
        var parent = field.parent().attr('id');
        
        if ($('#' + parent).find(".ok").length) {
            $('#' + parent + ' .ok').remove();
            $('#' + parent + ' .loader').remove();
            $('#' + parent).append('<div class="loader"><img src="img/ico/loader.gif"/></div>').fadeIn('slow');
        } else {
            $('#' + parent).append('<div class="loader"><img src="img/ico/loader.gif"/></div>').fadeIn('slow');
        }
        
        var dataString = 'field=' + $(this).attr('name') + '&value=' + $(this).val();
        $.ajax({
            type: "POST",
            url:  "actions/files_save_img.php",
            data: dataString,
            success: function(data) {
                field.val(data);
                $('#' + parent + ' .loader').fadeOut( function() {
                    $('#' + parent).append('<div class="ok"><img src="img/ico/ok.png"/></div>').fadeIn('slow');
                });
            }
        });
    });
});
 

Y el codigo de los inputs

Código HTML:

<td id="N<?php echo $row["idImagen"] ?>" class="input">
    <input type="text" id="strNombreImagen" name="strNombreImagen" value="<?php echo $row["strNombreImagen"] ?>">
</td>
<td id="T<?php echo $row["idImagen"] ?>" class="input">
    <input type="text" id="strTituloImagen" name="strTituloImagen" value="<?php echo $row["strTituloImagen"] ?>"><?php echo $row["idImagen"] ?>
</td>
 

el archivo UPDATE en PHP, sin terminar todavia.

Código PHP:

require_once('../../bd/connect.php');
 
sleep(1);
$columna = $_POST['field'];
$valor = $_POST['value'];
 
$updateSQL = sprintf("UPDATE tbl_img_productos SET '".$columna."' = '".$valor."' WHERE idImagen = $idImagen");
 

Saludos y gracias de nuevo

[Alexis88]

Iniciado por Carlos1975

No me funciona el objeto XMLHttpRequest, no se a que es debido.

Debes de ser un poco más específico cuando dices que "no me funciona". Podrías ver en la consola qué devuelve la respuesta de esta manera:

Código Javascript:

if (ajax.readyState == 4 && ajax.status == 200) {
    console.log(ajax.responseText);
}
 

Iniciado por Carlos1975

Creo que lo que falla no es el código sino la forma de exponerlo ya que la tabla la muestro con un WHILE de PHP y creo que no realiza bien la funcion de guardar debido a ello, No se si estoy en lo cierto ya que me queda mucho por aprender.

En realidad, eso no tiene nada que ver. Si tus <input> tienen la forma que te mostré, deberían de guardar los datos sin problema alguno, de hecho, hice una pequeña prueba localmente y funcionó. Quizá no estás recibiendo correctamente al dato en el archivo PHP o algo está ocurriendo ahí que no devuelve la respuesta. Para averiguar eso, debes de depurar el código y como estás realizando una petición asíncrona (Ajax), debes de trabajar con la consola del navegador.

Iniciado por Carlos1975

De todas formas hago incapié en mostrar un boton de modificar y en mostrar los input con un boton de guardar. Este trabajo es para una administración de una tienda online y los clientes que la usen deben de tener bien claro lo que pueden o no hacer en ella.

Por ese lado podría tener más sentido el hacer uso de todo eso, aunque con unos años trabajando en este negocio, he aprendido que los clientes quieren que todo sea simple y rápido, es decir, si van a ingresar o editar, por ejemplo, 400 registros, quieren que la interfaz les permita hacerlo de una manera rápida, para no perder tiempo. Por eso te lo puse de esa manera, para que todo lo haga en un mismo elemento y con tan solo un clic y pulsar la tecla ENTER una vez.

Iniciado por Carlos1975

Se que es más práctico usar este código pero prefiero usar las librerias Jquery y no volverme loco con Ajax. Demasiados lenguajes de programación y javascript y yo no somos demasiado amigos...

Te entiendo, pero la manera correcta de empezar en esto es primero aprender acerca de los lenguajes de programación y luego sobre sus librerías. En realidad, trabajar con Ajax utilizando código JavaScript nativo, no es complicado, son solo unas cuantas líneas que, a diferencia de usar una librería, evitarán que tengas la necesidad de cargar miles de bytes de código para utilizar unos cuantos métodos, los cuales podrían ser reemplazados por unas líneas de código nativo. Tómalo como un consejo.

Saludos