3

alguien me podría ayudar o dar a conocer el como puedo ver las etiquetas que guardo en una base de datos es decir:

1.tengo una tabla de respuestas , en la columna de contenido_res vemos como hay un texto guardado con una etiqueta de imagen
imagen de tabla

2.visualizo esa tabla, y vemos como se carga la imagen del tomate
introducir la descripción de la imagen aquí

3.al momento de editarlo desaparece mágicamente la etiqueta de img introducir la descripción de la imagen aquí

anexo codigo de editar

 <!--Modal para CRUD-->
    <div class="modal fade bd-example-modal-xl" id="modalCRUD" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="formTitulos">    
                 <div class="modal-body">
                    <div class="form-group">

                        <label for="" class="col-form-label">respuesta:</label>
                          <textarea  type="text" class="form-control is-invalid" id="contenido_res" placeholder="Escribe una respuesta"  rows="15" cols="20" name="contenido_res" required></textarea>
                        
                    </div>
                   
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancelar</button>
                    <button type="submit" id="btnGuardar" class="btn btn-dark">Guardar</button>
                </div>
            </form>    
        </div>
    </div>
</div>  

con este codigo edito en el js

//Editar        
$(document).on("click", ".btnEditar", function() {
  opcion = 2; //editar
  fila = $(this).closest("tr");
  id_respuestas = parseInt(fila.find('td:eq(0)').text()); //capturo el ID                   
  contenido_res = fila.find('td:eq(1)').text();


  $("#contenido_res").val(contenido_res);


  $(".modal-header").css("background-color", "#198754");
  $(".modal-header").css("color", "white");
  $(".modal-title").text("Editar Respuesta");
  $('#modalCRUD').modal('show');
});

¿hay alguna forma de que cargue también la etiqueta al momento de editar la respuesta?

1 respuesta 1

2

Para conseguir el contenido en html en lugar de texto puro puedes usar el método html() de jquery, por lo tanto debes modificar esta línea:

contenido_res = fila.find('td:eq(1)').text();

por esta otra:

contenido_res = fila.find('td:eq(1)').html();

Ejemplo:

$(document).on("click", ".btnEditar", function() {
  opcion = 2; //editar
  fila = $(this).closest("tr");
  id_respuestas = parseInt(fila.find('td:eq(0)').text()); //capturo el ID                   
  contenido_res = fila.find('td:eq(1)').html();


  $("#contenido_res").val(contenido_res);


  $(".modal-header").css("background-color", "#198754");
  $(".modal-header").css("color", "white");
  $(".modal-title").text("Editar Respuesta");
  $('#modalCRUD').modal('show');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<table>
<tr><td></td><td>Texto puro <img src="lalala"></td><td><button class="btnEditar">
Editar
</button></td></tr>

</table>


<!--Modal para CRUD-->
    <div class="modal fade bd-example-modal-xl" id="modalCRUD" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="formTitulos">    
                 <div class="modal-body">
                    <div class="form-group">

                        <label for="" class="col-form-label">respuesta:</label>
                          <textarea  type="text" class="form-control is-invalid" id="contenido_res" placeholder="Escribe una respuesta"  rows="15" cols="20" name="contenido_res" required></textarea>
                        
                    </div>
                   
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancelar</button>
                    <button type="submit" id="btnGuardar" class="btn btn-dark">Guardar</button>
                </div>
            </form>    
        </div>
    </div>
</div>  

1
  • 1
    te agradezco mucho @masterguru con ese pequeño cambio obtuve el resultado que quería
    – jorgeedc
    Commented el 5 abr. 2022 a las 21:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.