Имя: Пароль:
IT
Веб-мастеринг
Как подгрузить javascript после добавления ссылки на него AJAX-ом
0 План счетов
 
24.02.14
13:15
Есть сайт.
На основной странице ссылка на скрипты:
<script type="text/javascript" src="<?php echo $baseUrl ?>/public/scripts/jquery-1.4.2.min.js"></script>

На сайте есть блок. доступный нескольким пользователям, данные в этот блок подгружаются AJAX-ом, HTML текст в этом блоке, содержит ссылку на скрипт: <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"; type="text/javascript"></script>

После загрузки AJAX-ом этот подгружаемый скрипт не работает, я так понимаю т.к. он не загружен, т.к. AJAX вернул мне только текст, а загрузка скрипта не произошла.


Если этот скрипт вставить в начало основной страницы, то все работает. Если страницу которую я хочу получить загружаю без использования AJAX-а то тоже все работает.

Но я так не хочу, хочу чтоб скрипт заработал после загрузки AJAX-a.

Как загрузить данный скрипт после того как AJAX добавит его в блок?
1 Asmody
 
24.02.14
13:26
(0) как грузишь?
2 qeos
 
24.02.14
13:27
события, не?

я хз что такое AJAX.. я вот пользуюсь JQuery.. у него есть технология ажах... и события по завершении и т.п.
3 План счетов
 
24.02.14
13:32
(1)
Да просто гружу, в (0) вроде все описал.

Есть страница, есть в ней сслки на скрипты которые нужны всем, есть в ней <div id=mydiv>

еще есть ссылка по которой запускается аякс, аякс в mydiv добавляет HTML текст Element.innerHTML = req.responseText;

в req.responseText есть ссылка на скрипт на api-maps.yandex.ru  и вот этот скрипт не работает, если он добавлен аяксом
4 План счетов
 
24.02.14
15:34
Вроде получается, пока реализовал так:
после обработки Аякса
в


if (req.readyState == 4){            
        if(req.status==200){

// загрузка стороннего скрипта
var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU';
                document.body.appendChild(script);                

// И далее мой скрипт
                start_api_yandex();
5 kokamoonga
 
24.02.14
17:21
(4) Если уж на то пошло, то инициализацию лучше связывать не с завершением ajax-вызова, а с событием onload самого скрипта, ибо эти два события напрямую никак не связаны. Вызов может завершиться, а скрипт не подгрузиться и будет эффект как в (0) только без видимых причин.

Если же ajax подгружает что-то необходимое для работы скрипта помимо его самого, то в callback ajax-вызова можно ставить какой-то флаг, или при инициализации проверять наличие необходимого на странице или в самой функции start_api_yandex().

if (req.readyState == 4){            
        if(req.status==200){

// загрузка стороннего скрипта
var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU';
                script.onload =  start_api_yandex();
                document.body.appendChild(script);    

Или просто в исходном коде ответа:
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU";; type="text/javascript" onload="start_api_yandex(); "></script>
6 План счетов
 
25.02.14
10:32
(5) >> Вызов может завершиться, а скрипт не подгрузиться

Пока так и получается, даже если и использовать onload

script.onload =  start_api_yandex();

все равно скрипт не успевает загрузится
стартует мой start_api_yandex() и выдает ошибку.

В коде для проверки был Alert(), с ним скрипт успевает загрузится, ошибки нет, как глушу Alert - мой скрипт не работает.

что не верно делаю?
7 kokamoonga
 
25.02.14
10:41
(6) код можно посмотреть?
8 План счетов
 
25.02.14
10:46
(7) код уже тут уже весь дан

function StartAjax_get_data($baseUrl, $URL,
..........................
if (req.readyState == 4){            
        if(req.status==200){
var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU';                
                document.body.appendChild(script);                
                script.onload = start_api_yandex($URL);




function start_api_yandex($URL){
        //alert('Пауза, для продолжения нажмите ОК');    
        var myMap = new ymaps.Map("map", {center: [61.6626, 50.8405],zoom: 16});

Если alert закоментирован то ошибка ymaps - неопределен
9 План счетов
 
25.02.14
10:46
+(8)
и так тоже пробовал

script.onload = start_api_yandex($URL);
document.body.appendChild(script);
10 kokamoonga
 
25.02.14
10:56
(9) как вариант можно попросить подождать. Что-то типа так:

function start_api_yandex($URL, d) {
    //alert('Пауза, для продолжения нажмите ОК');  
    if (!ymaps) {
        window.setTimeout(start_api_yandex($URL, d + 1));
    } else {
         var myMap = new ymaps.Map("map", {center: [61.6626, 50.8405], zoom: 16});
}
    }
11 kokamoonga
 
25.02.14
10:58
(10) +

window.setTimeout(start_api_yandex($URL, d + 1), 500); // время ожидания разумеется надо указать.
12 План счетов
 
25.02.14
11:04
(11) спасибо, буду пробовать.
13 kokamoonga
 
25.02.14
11:07
(12) имей в виду, что это что-то среднее между кодом и псевдокодом.

например если ymaps === undefined, тогда !ymaps === true
14 План счетов
 
25.02.14
13:33
Все оказалось чуть сложнее.
(10) не работает, валит в ошибку стек переполнен.

Смотрю дамп загрузки скрипта, нет события onload
как я понял, скрипт не загружен, и событие загрузки не возникает.
Поиском нашел: http://learn.javascript.ru/onload-onerror

сделал, как там написано:

    function afterLoad() {                    
                    start_api_yandex($URL);
                    }                    
                script.onreadystatechange = function() {                    
                  if (this.readyState == "complete") { // на случай пропуска loaded                    
                    afterLoad();
                  }                    
                  if (this.readyState == "loaded") {                    
                    setTimeout(afterLoad, 0);  // (1)                    
                    // убираем обработчик, чтобы не сработал на complete                    
                    this.onreadystatechange = null;
                  }                    
                }

и заработало.
15 kokamoonga
 
25.02.14
19:05
(14) у этого кода есть одно слабое место:)

"Пример вызывает afterLoad после загрузки скрипта. Работает только в IE"
16 Torquader
 
25.02.14
22:57
Когда писал обработки под старый Ie понял, что если хочется рабочий скрипт, то загрузить его в память как тескт, а потом скормить eval и всё.
Кстати, таким "макаром" можно переопределять функции.
17 kokamoonga
 
25.02.14
22:59
(16) Проще использовать библиотечные обертки. С тем же jQuery таких проблем никогда не имел.