Django, Javascript: el formulario inyectado en DOM a través de javascript innerHtml bloquea la pestaña de Google Chrome al enviar. Trabaja en IE
He escrito un bookmarklet que recibe un formulario Django y lo inserta en el Dom a través del innerHtml de un nuevo elemento div creado a través de javascript y adjuntado al cuerpo de un documento html existente. El primer envío es una solicitud ajax (funciona bien), si Django rechaza el formulario debido a un usuario desconocido, la función de envío no está vinculada a ajax y se reenvía sin ajax a una ventana emergente para autenticar al usuario sin CORS. El proceso funciona perfectamente en IE pero bloquea la pestaña de cromo cuando se hace clic en el botón de envío.
Pruebas: pensé que tal vez era el envío inicial de ajax el que estaba causando el problema. Sin embargo, si uso el mismo proceso sin ajax tras la inyección, el envío también falla. Si copio el código html desde el navegador después de que se complete mi inyección y creo un nuevo documento html y luego lo abro en Chrome, todo funciona bien. Además, si elimino la división que contiene los campos del formulario antes de la inyección, el botón de envío funciona. Esto me lleva a creer que tiene algo que ver con inyectar el formulario después de que se haya cargado el Dom en la página existente. ¿Hay alguna forma de volver a cargar el Dom sin una actualización de la página o forzar el innerHtml para que se registre correctamente en el Dom en la inyección?
Sin errores de consola, solo un aww, snap! Algo salió mal al mostrar esta página web.
Para replicar el problema, siga estos pasos: (Estoy en Windows 8 con Chrome versión 23.0.1271.64 m)
(paso 1) Ir a una url immage: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(paso 2) Ve a la consola de Chrome e ingresa el siguiente código:
o = document.createElement("div");
o.setAttribute("id", "overlay");
o.innerHTML = '<div class="modal fade" id="new-pin"><div class="modal-header"><h3>New Pin</h3></div><form action="" enctype="multipart/form-data" method="get" id="ajaxform" name="pin_form" class="form-horizontal"><div class="modal-body"><div id="div_id_url" class="control-group"><label class="control-label" for="id_url">URL</label><div class="controls"><input type="text" name="url" id="id_url" /></div></div><div id="div_id_image" class="control-group"><label class="control-label" for="id_image">or Upload</label><div class="controls"><input type="file" name="image" id="id_image" /></div></div><div id="div_id_description" class="control-group"><label class="control-label" for="id_description">Description</label><div class="controls"><textarea id="id_description" rows="10" cols="40" name="description"></textarea></div></div><div id="div_id_tags" class="control-group"><label class="control-label" for="id_tags">Tags</label><div class="controls"><input type="text" name="tags" id="id_tags" /></div></div></div><div class="modal-footer"><div class="messageContainer"></div><button id="btnsubmit" type="submit" class="btn btn-primary">Submit</button><a id="cancel" onclick="removeOverlay()" data-toggle="modal" class="btn">Cancel</a></div></form></div>';
document.body.appendChild(o);
(paso 3) Haga clic en enviar y ver Chrome crash!
(etapa 4) Si se carga exactamente el mismo código antes de la carga de DOM, funciona. Pegue lo siguiente en un nuevo documento de texto y guárdelo como .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(paso 5) Abra el archivo .html con chrome y enviar no se bloqueará.