Загрузите Bootsrap JS в веб-виджет JavaScript

Question

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

Вот мой код в моем файле JS.

(function () {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
        console.log("jQuery LOADED");
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js");


        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    console.log(window.jQuery.fn.jquery);
                    scriptLoadHandler();
                }
            };
        } else {
            console.log("ONLOAD STATE");
            script_tag.onload = scriptLoadHandler;
        }
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }


    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
        // Call our main function

        main();
    }

    /******** Our main function ********/
    function main() {
        jQuery(document).ready(function ($) {
            /******* Load Bootstrap JS *******/
            var bootstrap_script = document.createElement('script');
            bootstrap_script.setAttribute("type", "text/javascript");
            bootstrap_script.setAttribute("src",
                    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);

            /******* Load Bootstrap CSS *******/
            var bootstrap_css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
            });
            bootstrap_css_link.appendTo('head');

            /******* Load HTML *******/
            var jsonp_url = "example.com/srtest?callback=?";
            $.getJSON(jsonp_url, function (data) {
                $("#myModal_srsr").modal("show");
            });
        })
    }

})(); // We call our anonymous function immediately

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

1. Ошибка типа: $(...). Модальная не является функцией
2. Ошибка: JavaScript Bootstrap требует jQuery

В данных я возвращаю объект json.

$data = json_encode(array("html"=>'<!-- Modal -->
<div id="myModal_srsr" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is awesome.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>'));

Любая помощь будет оценена.

Благодарю.

Answer 1

Я решил проблему, просто удалив

var jQuery;

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

Ошибка: JavaScript Bootstrap требует jQuery

Надеюсь, это кому-нибудь поможет.:)

Приветствия.