Django, Javascript: форма, введенная в DOM через javascript innerHtml, приводит к сбою вкладки Google Chrome при отправке. Работает в IE
Я написал букмарклет, который получает форму Django и вставляет ее в Dom с помощью innerHtml нового элемента div, созданного с помощью javascript и добавленного в тело существующего HTML-документа. Первым представлением является запрос ajax (работает нормально), если Django отклонил форму из-за неизвестного пользователя, функция submit не связана с ajax и повторно отправляется без ajax во всплывающее окно для аутентификации пользователя без CORS. Процесс работает безупречно в IE, но при нажатии кнопки «Отправить» происходит сбой вкладки Chrome.
Тесты: я подумал, что, возможно, проблема была в первоначальном представлении Ajax. Тем не менее, если я использую тот же процесс без AJAX при внедрении, отправить также не удается. Если я скопирую html-код из браузера после того, как моя инъекция будет завершена, и создам новый html-документ, то открою его в chrome, все работает нормально. Кроме того, если я удаляю div, содержащий поля формы, до внедрения, кнопка отправки работает. Это наводит меня на мысль, что это как-то связано с введением формы после загрузки Dom на существующей странице. Есть ли способ перезагрузить Dom без обновления страницы или заставить innerHtml правильно зарегистрироваться в Dom при внедрении?
Никаких ошибок консоли, просто ооо, хватит! Somethng пошло не так при отображении этой веб-страницы.
Чтобы повторить проблему, выполните следующие действия: (Я нахожусь на Windows 8 с версией Chrome 23.0.1271.64 m)
(шаг 1) перейти к URL-адресу изображения: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(шаг 2) перейдите в консоль Chrome и введите следующий код:
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);
(шаг 3) Нажмите «Отправить» и увидите сбой Chrome!
(шаг 4) Если точно такой же код загружен до загрузки DOM, он работает. Вставьте следующее в новый текстовый документ и сохраните как .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(шаг 5) Откройте файл .html с помощью Chrome и отправить не будет сбой.