Django, Javascript: Formulário injetado no DOM via javascript innerHtml trava o guia chrome do google no envio. Funciona no IE
Eu escrevi um bookmarklet que recebe um formulário do Django e o insere no Dom através do innerHtml de um novo elemento div criado via javascript e anexado ao corpo de um documento html existente. O primeiro envio é uma requisição ajax (funciona bem), se o formulário for rejeitado pelo Django devido a um usuário desconhecido, a função submit será desassociada do ajax e reenviada sem ajax para uma janela pop-up para autenticar o usuário sem o CORS. O processo funciona perfeitamente no IE, mas trava a aba do Chrome quando o botão Enviar é clicado.
Testes: pensei que talvez fosse o envio inicial de ajax que estava causando o problema. No entanto, se eu usar o mesmo processo sem ajax após a injeção, o envio falhará também. Se eu copiar o código html do navegador após a conclusão da injeção e criar um novo documento html, abra-o no chrome e tudo funcionará bem. Além disso, se eu excluir o div que contém os campos do formulário antes da injeção, o botão de envio funcionará. Isso me leva a acreditar que tem algo a ver com a injeção do formulário depois que o Dom na página existente foi carregado. Existe uma maneira de recarregar o Dom sem uma atualização de página ou forçar o innerHtml a registrar corretamente no Dom na injeção?
Não há erros de console, apenas um aww, snap! Somethng deu errado ao exibir esta página da web.
Para replicar o problema, siga estas etapas: (Estou no Windows 8 com Chrome versão 23.0.1271.64 m)
(passo 1) goto an immage url: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(passo 2) vá para o console chrome e digite o seguinte 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);
(etapa 3) Clique em enviar e veja o crash do Chrome!
(Passo 4) Se o mesmo código é carregado antes do carregamento do DOM, ele funciona. Cole o seguinte em um novo documento de texto e salve como .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(passo 5) Abra o arquivo .html com o chrome e o envio não falhará.