0

Estoy tratando de actualizar la base de datos mientras se tipea en un div editable mediante jquery. He tratado de usar keyup pero no obtiene los datos escritos...

 $('#textBox').keyup(function(e) {
      let text = $('#textBox').val();
   $.ajax({
        url: 'cont/actualizar_contenido.php',
        type: 'POST',
        data: {text},
        success: function(response){
          console.log(text);  
        }
   });
<input type="hidden" name="myDoc" id="textBoxes">
<div class="imagen" id="textBox" contenteditable="true"></div>

tambien he tratado de obtener los datos mediante document.getElementById('textBox').value pero en ese caso me da valor undefined

Ya no se que mas hacer si pueden darme alguna idea se los agradeceria mucho,,,

2
  • Según entiendo quieres ir actualizando la base de datos cada vez que se escribe algo en el div; eso no seria muy recomendable o entendí mal ?
    – soyunewok
    Commented el 17 sept. 2020 a las 2:08
  • 1
    Estás tomando un atributo incorrecto. Como escribes dentro de un div el atributo a manejar es innerHtml como usas JQuery lo puedes leer y asignar así: let text = $('#textBox').html(); Pero ten presente que no es rentable en términos de rendimiento y transferencia de datos actualizar la BD caracter a caracter
    – quevedo
    Commented el 17 sept. 2020 a las 3:49

2 respuestas 2

0

3 cosas

1.-mediante ajax no podrás ya que es demasiado lento, por lo general una petición tarda casi 1 segundo por lo que si escribes muy rápido enviaras decenas de peticiones y nada te asegura que la ultima que enviaste sea la que efectivamente se ejecute de ultimo por lo que el ultimo dato guardado en tu base de datos no será necesariamente lo ultimo que quedo escrito en tu texto input, aparte que serian demasiadas peticiones, no es optimo, podrías colapsar tu sistema muy rápido.

2.- si lo que quieres hacer es una especie de comunicación en tiempo real, existe algo llamado web sockets, puedes usar una librería llamada socket.io o también una tecnología llamada MQTT que están diseñadas para transmitir datos en tiempo real mediante llamadas o eventos y así poder generar eventos que se disparen y hagan cosas. pero si piensas almacenar estos datos en una base de datos, no te recomiendo ni SQL ni mongo, debes usar bases de datos especializadas para esto, Firebase tiene una.

3.- para obtener el dato de un input en tiempo real y usarlo en una variable utilizando javascript, debes usar el evento oninput

<input type="text" id="myInput" oninput="myFunction()">

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

quizás te sirva esta publicación :

¿Como puedo obtener en tiempo real el valor de un select?

0

Gracias por la información, este trabajo en realidad es para un programa tipo powerpoint, donde lo que queria era que el usuario no tenga necesidad de estar clickeando en insertar en cada nueva diapositiva que crea. lo solucione der esta manera...

    <div class="imagen" id="textBox" contenteditable="true"></div>
    <textarea name="text" id="text" style="display:none;"></textarea>



    $(document).keyup(function(e) {    
    $('#text').val($('#textBox').html()); 
    let texto = $('textarea#text').val();      
    $.post('actualizar_contenido.php', {texto}, function (response) {
    fetchContent();
    })
    });

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.