Estoy usando ajax para hacerlo y estoy respondiendo con res.end en el backend, pero hasta ahora, solo puedo POST una vez. Aquí está mi código:
app.post("/awesome", passwordless.restricted({ failureRedirect: "/" }), (req, res, next) => { // ...do a bunch of stuff res.end(); }); $("[data-new-save]").on("click", function () { $.ajax({ url: "/awesome", type: "POST", data: awesomeDetails, success: function () { console.log("Cool beans"); refreshContent(); // Re-renders content // Feedback $("nav").after("<div class=\"flash success\">Success!</div>"); setTimeout(function () { $(".flash").remove(); }, 5000); }, error: function () { console.log("Welp"); // Feedback $(".navigation").after("<div class=\"flash error\">Failure</div>"); setTimeout(function () { $(".flash").remove(); }, 5000); } }); });Esto suena como un caso para la delegación de eventos. La mejor suposición que tengo es que su función refreshContent() está eliminando los elementos originales [data-new-save] y creando otros nuevos. Esto hará que se elimine el evento de click vinculado, ya que es una propiedad de los nodos DOM que existían cuando se llamó originalmente. Puede evitar esto delegando el evento a un nodo DOM que no se "actualiza", supongo que la etiqueta <body> no se vuelve a dibujar, solo un conjunto de elementos secundarios, por lo que si apunta a <body> y busque selectores que coincidan con "[data-new-save]" , debería funcionar correctamente:
$('body').on('click', "[data-new-save]", function () { $.ajax({ url: "/awesome", type: "POST", data: awesomeDetails, success: function () { console.log("Cool beans"); refreshContent(); // Re-renders content // Feedback $("nav").after("<div class=\"flash success\">Success!</div>"); setTimeout(function () { $(".flash").remove(); }, 5000); }, error: function () { console.log("Welp"); // Feedback $(".navigation").after("<div class=\"flash error\">Failure</div>"); setTimeout(function () { $(".flash").remove(); }, 5000); } }); });Esto es lo que usé para algo similar:
$(document).ready(function () { $('#myform').on('submit', function(e) { e.preventDefault(); $.ajax({ url : $(this).attr('action') || window.location.pathname, type: "GET", data: $(this).serialize(), success: function (data) { $("#form_output").html(data); }, error: function (jXHR, textStatus, errorThrown) { alert(errorThrown); } }); }); });