Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.01.2018, 11:25
Новичок на форуме
Отправить личное сообщение для m4ybe Посмотреть профиль Найти все сообщения от m4ybe
 
Регистрация: 24.01.2018
Сообщений: 5

контент из 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 статически. почему если инером вставлять переменную респон не работает первый скрипт, а если инером вставить текст который в респонсе то работает? текст респонса взял из консоли хрома.
Ответить с цитированием
  #2 (permalink)  
Старый 24.01.2018, 11:35
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,760

Я почти ничего не понял, но думаю проблема либо в контексте, либо в том, что запрос асинхронный.
Ответить с цитированием
  #3 (permalink)  
Старый 24.01.2018, 11:41
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

m4ybe,
На момент загрузки документа $(document).ready у вас еще нет $('.selectboxss'), который появится после обработки ответа от сервера.
Попробуйте
document.getElementById('gg').innerHTML = this.response;
$('.selectboxss').selectbox();
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2018, 12:07
Новичок на форуме
Отправить личное сообщение для m4ybe Посмотреть профиль Найти все сообщения от m4ybe
 
Регистрация: 24.01.2018
Сообщений: 5

я уже думал о том что его нет,но я добавляю скрипт в самом верху и в хедер и если инер текстом то работает а если инер респонсом нет
последовательность действий, те в люом случае сначало идет скрипт а потом уже элемент или это не так?
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); 
    }, 
};
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2018, 12:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,760

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

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

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

Последний раз редактировалось Nexus, 24.01.2018 в 12:17.
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2018, 12:33
Новичок на форуме
Отправить личное сообщение для m4ybe Посмотреть профиль Найти все сообщения от m4ybe
 
Регистрация: 24.01.2018
Сообщений: 5

это просто вывод в какой див выводить, те я для себя вывожу в тот что с id респонс а в gg уже скопированный текст из респонс. попробую текст. Да вот вы пишите сначала элемент, а потом скрипт, но получается мой скрипт этому протеворечит потому что я снчала делаю addscript а потом innerhtml. и вообще я уже просто в html вставляю элемент и скрипт, хоть до хоть после всегда работает
Ответить с цитированием
  #7 (permalink)  
Старый 24.01.2018, 12:52
Новичок на форуме
Отправить личное сообщение для m4ybe Посмотреть профиль Найти все сообщения от m4ybe
 
Регистрация: 24.01.2018
Сообщений: 5

xhr.responseText не заработало
Ответить с цитированием
  #8 (permalink)  
Старый 24.01.2018, 13:12
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

И не забудьте убрать строку 25
Ответить с цитированием
  #9 (permalink)  
Старый 24.01.2018, 13:32
Новичок на форуме
Отправить личное сообщение для m4ybe Посмотреть профиль Найти все сообщения от m4ybe
 
Регистрация: 24.01.2018
Сообщений: 5

Да все всем спасибо уже сделал только воткнул туда полную вставку скрипта
script = document.createElement('script');
	script.async=false;
    script.setAttribute('type', 'text/javascript');   
	script.innerHTML=('$(document).ready(function(){ $(\'.selectboxss\').selectbox(); });');
    document.head.appendChild(script);
Ответить с цитированием
  #10 (permalink)  
Старый 24.01.2018, 14:35
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
XMLHttpRequest не работает lgv Firefox/Mozilla 0 14.04.2010 17:07
Не работает innerHTML OlegALL Элементы интерфейса 2 23.01.2010 19:51
свойство innerHTML в Opera и Firefox работает не корректно? figaro Javascript под браузер 1 05.11.2009 00:57
DatePicker не работает при сипользование innerHTML AJlekceu jQuery 2 26.10.2008 17:49
Не работает innerHTML для textarea в ФФ ropil Сайт Javascript.ru 5 06.05.2008 19:53