1

Estoy desarrollando una aplicación, en la cual tengo un par de textbox como input, el objetivo es que, el usuario escriba un número de orden en el input y hacer una consulta a la base de datos para sacar información de ese número de orden y al final colocar esa información en una tabla. En seguido muestro una pantalla de la web:

introducir la descripción de la imagen aquí

El problema que tengo es que, en el contenedor "search by", cuando el usuario busca la información por orden aparece un el input, coloca el nombre de orden y esta va y busca a la BD, después mediante ajax hago la escritura en la tabla.. el problema viene cuando quiero hacer un sort con los eventos de data table, al hacer clic a cualquiera de ellos los datos que coloque en mi tabla desaparecen, por ejemplo:

Aqui tengo mis datos en la tabla sin hacer clic a cualquier evento

Aquí tengo el dato en mi tabla al enviarlo mediante un boton con submit y ajax, cuando doy clic en el evento desaparecen mis datos: introducir la descripción de la imagen aquí

Alguien sabe como puedo solucionar esto?, es decir, que cuando de clic en cualquier evento, mis datos esten guardado y no se pierdan.

Dejo el código html:

Formulario de los inputs

  <!-- Order or MFGN form begin-->
        <p class="ibm-margin-top-2" id="order">
          <label for="order-mfgn" class="" id="Enter"> Enter order</label>
          <span class="ibm-center-block">
            <input type="text" id="order-value"> <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-order" type="submit" name="order">Submit</button>
          </span>
        </p>
        <p class="ibm-margin-top-2" id="mfgn">
          <label for="mfgn-value" class="" id="Enter"> Enter mfgn </label>
          <span class="ibm-center-block">
            <input type="text" id="mfgn-value" > <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-mfgn" type="submit">Submit</button>
          </span>
        </p>
      </form>
      <!-- Enter the order MFGN end -->

contenedor de la tabla (jinja2)

  <div class="ibm-col-12-8 ibm-margin-top-3">
    <!-- table container begin-->

    {% block table %} {% endblock %}
  </div>

Javascript para obtener los datos y enviarlos a la tabla

$(document).ready(function() {
$('#submit-order').click(function(evt) {
evt.preventDefault();

var order = $('#order-value').val();
data = {
  order: order
}
console.log(data);


$.ajax({
  type: "POST",
  url: "/",
  data:data,
  success: function(response) {
    // console.log('The data is send successfully' + response.order);
    $('#data').html(
      "<tr>"+
      "<td>"+ response.order+"</td>"+
      "<td>"+ response.Mfgn+"</td>"+
      "<td>"+response.Test+"</td>"+
      "<td>"+response.Date+"</td>"+
      "<td>"+ response.Expected+"</td>"+
      "</tr>"
    )
    $('#Enter').value = "";

  }
    });
});

 // $('#submit-mfgn').click(function() {
//   // alert('clic')
//   console.log('clic');
 });
 });

1 respuesta 1

0

Tu problema son los botones submit,

no se que funciones estés utilizando, pero los submit siempre envían una petición al servidor que trae una nueva forma limpia.

tienes dos opciones :

1.- ver de que manera puedes cambiar esos submit a que sean botones normales con ajax
2.- agregar el metodo "get" a tus submit para que todos los valores de tu form sean reenviados en la URL y de ahi puedas leerlos para colocarlos con javascript nuevamente en sus respectivos controles

ejemplo:

  <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-mfgn" type="submit" method="get">Submit</button>

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.