JQuery на документ готов Ajax вставляет HTML, HTML немедленно исчезает
Идея состоит в том, чтобы перебрать элементы div в теле, div с классом «editable», а затем добавить скрипт html из соответствующего идентификатора в базу данных (позже будет реализована отправка изменений). хотя HTML.
Нижний колонтитул имеет два сценария. Первый изменяет этот div, чтобы стать встроенной редактируемой областью, если администратор вошел в систему. (Используя CKeditor)
Второй сценарий — это сценарий, готовый для документов, он извлекает HTML-содержимое div из базы данных. Он срабатывает независимо от статуса входа.
<script>
$(document).ready(function(){
$(".editable").each(function(){
var div = $(this).attr('id');
var divstring = "#" + div;
$.post("getdbhtml.php",
{
id:div
}).done(function( html ) {
$(divstring).html(html);
});
});
});
</script>
и это простой документ getdbhtml.php, который возвращает содержимое div
$id = $_POST['id'];$query = "select * from edit where div_id='$id' limit 1";
$result = $db->doQuery($query) or die(mysql_error());
while($row = $result->fetch_object()) {
$content = $row->content;
}
echo $content;
Происходит загрузка страницы, мигает вставленный html-контент, а затем гаснет. Около каждой десятой загрузки страницы это фактически придерживается.
Я догадываюсь, что ckeditor все еще генерирует себя, когда запускается второй скрипт, но я попытался это исправить, сделав его «готовым к работе». Тем не менее, он по-прежнему мигает, даже если администратор не вошел в систему, другими словами, когда ckeditor не запускается.
Было бы глупо ставить задержку на второй скрипт. Я также попытался сделать второй скрипт как расширение первого .done (html {}) ;. Я также попытался сделать это с помощью обычного вызова $ .ajax () вместо специализированной записи, но он ведет себя так же.
Есть идеи, почему это происходит, или как это исправить?
РЕДАКТИРОВАТЬ:
Веб-страница довольно проста, цель div это:
<div id="inner" style="padding-top: 0; margin-top: 0;">
<div contenteditable="true" id="editor1" class="editable" style="padding: 0; margin: 0;">
</div>
</div>
В отладчике chrome ckeditor добавляет значительное количество классов в # editor1
<div contenteditable="true" id="editor1" class="editable cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" style="padding: 0px; margin: 0px; position: relative;" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_44"></div>
В коде, который вставляется прямо сейчас, нет символов html, я просто хочу, чтобы вставка работала, прежде чем исправлять проблемы с тегами html.
Это звучит примерно так: «Теперь у тебя есть шанс зарегистрироваться на XYZ». без кавычек.
Решение
Я придумал решение, и именно так выложен нижний колонтитул
Сначала скрипт библиотеки
<script src="path/ckeditor.js"></script>
Два сценария ckeditor не так хорошо играли, поэтому я поместил экземпляр сценария в документ.
<script>
$(document).ready(function(){
...ckeditor instance...
});
</script>
И у скрипта контента базы данных ajax был документ с небольшой задержкой, добавленный в конец:
<script>
$(document).ready(function(){
});
setTimeout(
function()
{
$(".editable").each(function(){
var div = $(this).attr('id');
var divstring = "#" + div;
$.post("getdbhtml.php",
{
id:div
}).done(function( html ) {
$(divstring).html(html);
});
});
}, 100);
</script>
Пару раз это уже ловило, так что небольшая задержка в 100, похоже, решает проблему времени. Это вряд ли заметно и хорошо для этой цели редактирования.
Я думаю, что это происходит потому, что экземпляр ckeditor заканчивает тем, что изменяет div, в том числе содержимое div каким-то образом усекается / модифицируется (по умолчанию он добавляет p-теги, хотя я его отключил). Поэтому возможно, что он перезаписывал содержимое после Ajax уже запущен (хотя они были заказаны в порядке завершения).
Другие решения
Других решений пока нет …