TransWikia.com

Salto de linea en javascript / ajax

Stack Overflow en español Asked by TomassTeran on November 29, 2021

Tengo un inconveniente al momento de escribir/editar tengo la etiqueta (contenteditable)

Al momento de editar no guarda el salto de linea PERO, coloco el salto en linea en codigo html o le agrego el tag r, actualiza el codigo y me da el salto de linea.

bueno le agrego imagen para explicarme mejor.

Como deseo que guarde:

introducir la descripción de la imagen aquí

como guarda:

introducir la descripción de la imagen aquí

Le agrego el salto en linea r n y
:

introducir la descripción de la imagen aquí

Y resulta que si me funciona

introducir la descripción de la imagen aquí

Pasemos al codigo.

Tengo la informacion:

<td id="Cel:<?php echo $id; ?>" contenteditable="true"> <div style="width: 700px"><?php echo str_replace("r", "<br>",$cel); ?><div></td>

Lo cual esta dentro de un while

Envio la informacion mediante un boton:

<td><input type="button" class="btn btn-success" href="#" onclick="realizaProceso(<?php echo $id ;?>); return false;" value="Enviar" /></td>

Lo recibe:

    <script type="text/javascript">
      $(function(){
        //Mensaje
        var message_status = $("#status");
        $("td[contenteditable=true]").blur(function(){
          var id = $(this).attr("id");
          var value = $(this).text();
            $.post('editar.php' , id + "=" + value, function(data){
                if(data != '')
              {
                message_status.show();
                message_status.html(data);
                //hide the message
                setTimeout(function(){message_status.html("REGISTRO ACTUALIZADO CORRECTAMENTE");},2000);
              } else {
                //message_status().html = data;
              }
          });
        });
      });

El PHP que edita la base de datos:

foreach($_POST as $rownumber_name => $val) {

//remember to clean post values
 $rownumber = $rownumber_name;
 $val = $val;
 //from the fieldname:rownumber_id we need to get rownumber_id
  $split_data = explode(':', $rownumber);
  $rownumber_id = $split_data[1];
  $rownumber_name = $split_data[0];
$sql_1 = "UPDATE `menssagee` SET `text_message` = '$val' WHERE `id` = $rownumber_id";
if ($db->query($sql_1)) {
$last_id = $db->insert_id;
//echo $sql_1;
echo "Registro Editado Correctamente: <img src='images/loader.gif' height='15px'>";
} else {
printf("Errormessage: %sn", $db->error);
}
}

He intentado antes de guarda los datos colocarle la funcion de str_replace a la variable (val), pero aun asi no me guarda el salto de linea.


Actualizacion:

Codigo JS

$("#texto").on('blur', actualiza);
var message_status = $("#status");
function actualiza() {
    var id = $(this).attr("id");
    let valor = $("#texto").text();
    console.log(valor);
    $('#formato').html(valor);
    $('#sinbr').html(valor);
    $('#conbr').html(valor.replace(/n/g, '<br>'));

    $.post('editar.php', id + "=" + valor, function (data) {
      if (data != '') {
        message_status.show();
        message_status.html(data);
        setTimeout(function() {
          message_status.html("REGISTRO ACTUALIZADO");
        }, 2000);
      } else {
        message_status().html = data;
      }
    });
}

actualiza();

El envio de datas me esta dando lio en este momento

introducir la descripción de la imagen aquí

One Answer

Al parecer, el problema es que jQuery.text() devuelve solo el texto del contenedor, eliminando etiquetas y saltos de línea. Usando funciones nativas de javascript e innerText se respetan los saltos de línea.

Para agregar la información en la petición AJAX, es conveniente usar FormData en lugar de ponerlos en una cadena y enviar por pares nombre -> valor para facilitar su manejo al procesar en PHP.

// Contenedor para mensajes de resultados
let message_status = $('#message-status');

// Asignar evento a celdas con contenido editable
$("td[contenteditable=true]").on('blur', actualiza);

// Recibir evento como parámetro
function actualiza(e) {
    // Obtener elemento editado desde el evento, con target
    let item = e.target;
    // Separar letras y números de ID
    let [prefijo, id] = item.id.split('-');
    let text_message = item.innerText;
    
    // Verificando que se puede obtener ID
    console.log(prefijo, id);
    
    // Preparar datos para enviar por formulario
    let datos = {
        "id": id,
        "text_message": text_message
    };

    $.post('editar.php',
        datos,
        function(data) {
            if(data != '') {
                message_status.show();
                message_status.html(data);
                //hide the message
                setTimeout(function() {
                    message_status.html("REGISTRO ACTUALIZADO CORRECTAMENTE");
                }, 2000);
            } else {
                message_status().html = data;
            }
        }
    );
}
#texto, #formato, #sinbr, #conbr, #conbr2 {
    margin:20px;
    padding:10px;
}

#texto { background:#eee; }
#formato { background:#fee; white-space:pre-wrap; }
#sinbr { background:#efe; }
#conbr { background:#eef; }
#conbr2 { background:#ffd; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="message-status"></div>
<table>
<tr>
<td id="Cel-123" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
</table>

Después, en PHP puedes acceder a cada elemento por su nombre (id y text_message) y debes escapar el valor del texto para evitar errores en la consulta.

<?php
// Asegurar que ID está presente en $_POST y es numérico
$id = (isset($_POST['id'])) ? (int) $_POST['id'] : 0;
$text_message = (isset($_POST['text_message'])) ? $_POST['text_message'] : 0;

// Validar la información
if($id <= 0) {
    die('ID incorrecta, debe ser mayor que cero.');
}
if(trim($text_message) == '') {
    die('El texto no puede quedar vacío.');
}
// Preparar texto para insertar en base de datos,
// la función correcta depende del motor y librería que estás usando
// este ejemplo funciona con mysqli
$text_message = $db->real_escape_string($text_message);

$sql_1 = "UPDATE `menssagee` SET `text_message` = '$text_message' WHERE `id` = $id";
if ($db->query($sql_1)) {
    echo "Registro Editado Correctamente: <img src='images/loader.gif' height='15px'>";
} else {
    printf("Errormessage: %sn", $db->error);
}

Muy importante: Te estoy sugiriendo preparar los datos con una función de la librería mysqli porque desconozco lo que estás usando. Debes adaptarlo de acuerdo a lo que tienes en tu clase de conexión a base de datos.

Si bien, esto puede solucionar el problema al actualizar, lo ideal es que uses consultas preparadas para mejorar la seguridad en tu proyecto.

Answered by Triby on November 29, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP