контент из XMLHttpRequest response с помощью innerHTML не работает
Доброго времени суток, есть проблема с использованием вставленного динамического контента в див. Пример кода который работает
есть html страничка в ней подключен скрипт
<script type="text/javascript">$(document).ready(function(){ $('.selectboxss').selectbox(); });</script>
и еще один скрипт который вставляет в див контент из XMLHttpRequest response с помощью innerHTML. Пример выполнения innerHTML во втором скрипте с которым работает первый скрипт
document.getElementById('gg').innerHTML =('<div class="selectboxss"><div class="selectboxssvalue"><span>Язык</span><img src="arrow.png" class="arrowselect" /></div><ul class="selectboxssmenu"><li class="selectoption"><span class="flag-ru"></span> Русский</li><li class="selectoption"><span class="flag-en"></span> Английский</li><li class="selectoption"><span class="flag-fr"></span> Французский</li><li class="selectoption"><span class="flag-de"></span> Немецкий</li><li class="selectoption"><span class="flag-it"></span> Итальянский</li><li class="selectoption"><span class="flag-es"></span> Испанский</li></ul></div>');
Пример выполнения innerHTML во втором скрипте с которым НЕ работает первый скрипт
document.getElementById('gg').innerHTML = this.response;
Собственно рабочий вариант возник из вставки того что приходит в response статически. почему если инером вставлять переменную респон не работает первый скрипт, а если инером вставить текст который в респонсе то работает? текст респонса взял из консоли хрома. |
Я почти ничего не понял, но думаю проблема либо в контексте, либо в том, что запрос асинхронный.
|
m4ybe,
На момент загрузки документа $(document).ready у вас еще нет $('.selectboxss'), который появится после обработки ответа от сервера. Попробуйте
document.getElementById('gg').innerHTML = this.response;
$('.selectboxss').selectbox();
|
я уже думал о том что его нет,но я добавляю скрипт в самом верху и в хедер и если инер текстом то работает а если инер респонсом нет
последовательность действий, те в люом случае сначало идет скрипт а потом уже элемент или это не так?
this.addScript();
document.getElementById(id).innerHTML = this.response;
document.getElementById('gg').innerHTML =('<div class="selectboxss"><div class="selectboxssvalue"><span>Язык</span><img src="arrow.png" class="arrowselect" /></div><ul class="selectboxssmenu"><li class="selectoption"><span class="flag-ru"></span> Русский</li><li class="selectoption"><span class="flag-en"></span> Английский</li><li class="selectoption"><span class="flag-fr"></span> Французский</li><li class="selectoption"><span class="flag-de"></span> Немецкий</li><li class="selectoption"><span class="flag-it"></span> Итальянский</li><li class="selectoption"><span class="flag-es"></span> Испанский</li></ul></div>');
var js = {
idBox: 'js',
url_wiget: 'https://www.exmoneta.ru/init.php',
url_style: 'https://www.exmoneta.ru/wp-content/themes/exchangeboxtheme2/style.css',
init: function(id) {
if (!id) { id = this.idBox; }
if (document.getElementById(id)) {
this.addStyle();
this.addScript();
try {
var XHR = ("onload" in new XMLHttpRequest())?XMLHttpRequest:XDomainRequest;
var xhr = new XHR();
xhr.open('GET', this.url_wiget, true);
xhr.onload = function() {
if (this.response) {
document.getElementById(id).innerHTML = this.response;
console.log(this.response);
}
}
xhr.onerror = function() { console.log('onerror '+this.status); }
xhr.send();
document.getElementById('gg').innerHTML =('<div class="selectboxss"><div class="selectboxssvalue"><span>Язык</span><img src="arrow.png" class="arrowselect" /></div><ul class="selectboxssmenu"><li class="selectoption"><span class="flag-ru"></span> Русский</li><li class="selectoption"><span class="flag-en"></span> Английский</li><li class="selectoption"><span class="flag-fr"></span> Французский</li><li class="selectoption"><span class="flag-de"></span> Немецкий</li><li class="selectoption"><span class="flag-it"></span> Итальянский</li><li class="selectoption"><span class="flag-es"></span> Испанский</li></ul></div>');
} catch(e) {}
}
else { console.log('The specified block id="'+id+'" is missing'); }
},
addStyle: function() {
style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = this.url_style;
document.head.appendChild(style);
},
addScript: function() {
script = document.createElement('script');
script.async=false;
script.setAttribute('type', 'text/javascript');
script.innerHTML=('$(document).ready(function(){ $(\'.selectboxss\').selectbox(); });');
document.head.appendChild(script);
},
};
|
Цитата:
Если скрипт поставить вперед элемента, то ему не с чем будет работать. upd. Вместо "xhr.response" попробуйте "xhr.responseText". upd2. Еще у вас в строке 19 идет обращение к элементу с ID 'js', а в строке 25 с ID 'gg'. Так и задумано? |
это просто вывод в какой див выводить, те я для себя вывожу в тот что с id респонс а в gg уже скопированный текст из респонс. попробую текст. Да вот вы пишите сначала элемент, а потом скрипт, но получается мой скрипт этому протеворечит потому что я снчала делаю addscript а потом innerhtml. и вообще я уже просто в html вставляю элемент и скрипт, хоть до хоть после всегда работает
|
xhr.responseText не заработало
|
m4ybe,
В вашем примере пост №4 сразу после строки 20 (или вместо 20) вставьте
$('.selectboxss').selectbox();
И не забудьте убрать строку 25 |
Да все всем спасибо уже сделал только воткнул туда полную вставку скрипта
script = document.createElement('script');
script.async=false;
script.setAttribute('type', 'text/javascript');
script.innerHTML=('$(document).ready(function(){ $(\'.selectboxss\').selectbox(); });');
document.head.appendChild(script);
|
m4ybe,
Зачем? И еще с $(document).ready? Достаточно одной строки в обработке ответа с сервера |
| Часовой пояс GMT +3, время: 06:07. |