Tengo el siguiente HTML. Es un formulario dentro de una ventana modal:
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel"> <div class="modal-dialog wide-modal" role="document"> <form novalidate> <div class="modal-content"> .... </div> </form> </div> </div>Cada vez que se abre el formulario, quiero mostrar una versión nueva del formulario, libre de entradas antiguas o mensajes de error. El siguiente controlador obtiene los datos de los campos ocultos más el HTML del formulario. Puedo obtener los datos del formulario junto con el HTML sin procesar del formulario a través de una solicitud de Ajax:
$(document).on('click', '#por-detail-tbl .dropdown-menu', e => { // This route will get fresh form HTML also. $.get(`/projects/${$(e.target).attr('project-id')}`, res => { $('#requestModal').replaceWith(res.html) ...more code here to populate hidden fields... }) }) Esperaría que el elemento $('#requestModal') se reemplace con lo que sea res.html (en este caso, una nueva versión del formulario). En cambio, res.html se inserta como último elemento en el cuerpo del documento. El antiguo $('#requestModal') todavía está allí.
Aquí hay un fragmento de res.html :
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel"> <div class="modal-dialog wide-modal" role="document"> <form novalidate> <div class="modal-content"> ... </div> </form> <div> </div>Puedo usar esta técnica con éxito en otras devoluciones de llamada de Ajax. ¿Alguna idea de por qué este se está comportando de manera extraña?
En realidad, desea la función .html() de jQuery aquí.
En su código original, la función replaceWith() reemplaza $('#requestModal') . Pero el elemento que reemplazó es el elemento que Bootstrap manipuló para realizar el comportamiento modal que espera.
Entonces, creo que realmente desea establecer el contenido del elemento div.modal-dialog solo en el form y sus elementos secundarios. Si puede reducir res.html a solo el formulario y los elementos secundarios, puede cambiar $('#requestModal').replaceWith(res.html) a $('#requestModal').find('div.modal-dialog').html(res.html) .