Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   контент из XMLHttpRequest response с помощью innerHTML не работает (https://javascript.ru/forum/events/72364-kontent-iz-xmlhttprequest-response-s-pomoshhyu-innerhtml-ne-rabotaet.html)

m4ybe 24.01.2018 11:25

контент из 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 статически. почему если инером вставлять переменную респон не работает первый скрипт, а если инером вставить текст который в респонсе то работает? текст респонса взял из консоли хрома.

Nexus 24.01.2018 11:35

Я почти ничего не понял, но думаю проблема либо в контексте, либо в том, что запрос асинхронный.

Dilettante_Pro 24.01.2018 11:41

m4ybe,
На момент загрузки документа $(document).ready у вас еще нет $('.selectboxss'), который появится после обработки ответа от сервера.
Попробуйте
document.getElementById('gg').innerHTML = this.response;
$('.selectboxss').selectbox();

m4ybe 24.01.2018 12:07

я уже думал о том что его нет,но я добавляю скрипт в самом верху и в хедер и если инер текстом то работает а если инер респонсом нет
последовательность действий, те в люом случае сначало идет скрипт а потом уже элемент или это не так?
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); 
    }, 
};

Nexus 24.01.2018 12:09

Цитата:

Сообщение от m4ybe
те в люом случае сначало идет скрипт а потом уже элемент или это не так?

Сначала должен идти элемент, после элемента скрипт, который должен работать с этим элементом.
Если скрипт поставить вперед элемента, то ему не с чем будет работать.

upd. Вместо "xhr.response" попробуйте "xhr.responseText".

upd2. Еще у вас в строке 19 идет обращение к элементу с ID 'js', а в строке 25 с ID 'gg'.
Так и задумано?

m4ybe 24.01.2018 12:33

это просто вывод в какой див выводить, те я для себя вывожу в тот что с id респонс а в gg уже скопированный текст из респонс. попробую текст. Да вот вы пишите сначала элемент, а потом скрипт, но получается мой скрипт этому протеворечит потому что я снчала делаю addscript а потом innerhtml. и вообще я уже просто в html вставляю элемент и скрипт, хоть до хоть после всегда работает

m4ybe 24.01.2018 12:52

xhr.responseText не заработало

Dilettante_Pro 24.01.2018 13:12

m4ybe,
В вашем примере пост №4 сразу после строки 20 (или вместо 20) вставьте
$('.selectboxss').selectbox();

И не забудьте убрать строку 25

m4ybe 24.01.2018 13:32

Да все всем спасибо уже сделал только воткнул туда полную вставку скрипта
script = document.createElement('script');
	script.async=false;
    script.setAttribute('type', 'text/javascript');   
	script.innerHTML=('$(document).ready(function(){ $(\'.selectboxss\').selectbox(); });');
    document.head.appendChild(script);

Dilettante_Pro 24.01.2018 14:35

m4ybe,
Зачем? И еще с $(document).ready?
Достаточно одной строки в обработке ответа с сервера


Часовой пояс GMT +3, время: 14:58.