+7 495 008 8452
  • Загрузка
Выберите ваш цвет

Выполнение jQuery-скриптов, в возвращаемых ajax-запросом данных

Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.


Если кому то все же интересно, в итоге поисков получил:

В ситуации когда нам, в силу каких то причин, необходимо выполнить некий js код, полученный с помощью ajax запроса следует:

в callback функцию, добавить такое вот ухищрение:
Код
success:function (data) { 
    
   /*Здесь дата закидывается в нужный нам тэг, акцентировать на этом внимание не стану, 
    дальше интереснее - 
   */          

    var totalContainer =  document.getElementsByTagName('body')[0];
    //тут может быть и document.getElementsByTagName('head')[0] определяем место, куда будет добавлен полученный js
    var ajaxRespondScripts = data.getElementsByTagName("script"), scriptContainer = document.createElement('script'), concatScript;
    //получение скриптов пришедших в ответе
    //создание тэга script в котором будут собраны все скрипты, на случай, например если их в ответе несколько и все они в разных тэгах script
    //переменная под конкатенацию всех скриптов

    ajaxRespondScripts.length ? console.log('В теле ajax ответа, найдено скриптов - ' + ajaxRespondScripts.length) : console.log('В теле ajax ответа, не найдены скрипты.');
   //эту строку использовал в процессе отладки, удалять не стал, с содержимым все ясно

    for(i=0; i<ajaxRespondScripts.length; i++)
    {
        console.log('Содержимое скрипта №' + i + ':\u000d' + ajaxRespondScripts[i].innerHTML);
        //еще немного console.log для будущей иллюстрации
        concatScript += ajaxRespondScripts[i].innerHTML;
        //собираем содержимое скриптов, в одной переменной
    }

    scriptContainer.type = 'text/javascript';
    //тут все очевидно
    scriptContainer.appendChild(document.createTextNode(concatScript));
    //создаем текстовый узел, инициализированный собранной ранее строкой, содержащей наши скрипты
    totalContainer.appendChild(scriptContainer);
   //цепляем собранный скрипт
} 


В шаблоне, разместил два inline скрипта, в обоих, есть обработчики события "click" по ссылке, а во втором, самовызывающаяся функция. Это принципиальный момент, понятно, что страница давно загружена, и полученные скрипты не попадут в событие 'ready', но выполнение кода, нужно как то инициировать и желательно не прибегая к опасному методу eval.
Для этого я и добавляю, скрипт в конец body, дабы иметь возможность использовать библиотеки и прочие подключенные ранее файлы скриптов, а функции использую - самовызывающиеся.

Код
<script type="text/javascript">
    $('#js-load-script-test').on('click', function(){
        console.log('JS-inline код, в теле .php шаблона (ответ на ajax запрос).');
    });
</script>
<script type="text/javascript">
    $('#js-load-script-test').on('click', function(){
        console.log('Второй скрипт в теле .php шаблона.');
    });
    (function(){
        console.log('Самовызывающаяся функция в теле .php шаблона. \u000dЕё выполнение подтверждает, допустимость, отказа от метода eval.');
        console.log('Также, решение работает в связке с любыми, подключенными ранее библиотеками (к вопросу о конфликте с JQuery).\u000d' +
            'Подтверждение - срабатывание $("#js-load-script-test").html(), его результат: ' + $("#js-load-script-test").html());
    })();
</script> 
Ну и наконец, результаты

Спешу поделиться, потому, не привел, все это к приличному виду, не ругайте за всякие мелочи...)
И разумеется интересно было бы услышать ваше мнение и замечания по каким то серьезным ошибкам.

 

 

Источник: http://dev.1c-bitrix.ru/community/forums/messages/forum7/topic57860/message303883/#message303883

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...