Bootstrap карусель не работает в AJAX - PullRequest
Новая
       52

Bootstrap карусель не работает в AJAX

0 голосов
/ 09 октября 2019

Я пытаюсь загрузить загрузочную карусель, используя AJAX. AJAX возвращает данные HTML. HTML загружается на мою страницу, и все связанные JS и CSS также загружаются на страницу. Но карусель это не прокрутка.

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

Вот мой код index. php 

<!doctype html>
<html lang="en">
<head>
    <title>Example of the Demo</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
        </div>
        <div id="carousel"></div>
    </div>    
    <script src="widget.js"></script>
</body>
</html>

Widget.js 

(function () {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.4.1') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");        
        script_tag.setAttribute("crossorigin", "anonymous");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else { // Other browsers
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } 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 CSS *******/
            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "http://localhost/demo/php_test_hrn/css/bootstrap.min.css"
            });
            css_link.appendTo('head');

            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "http://localhost/demo/php_test_hrn/js/bootstrap.min.js");
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

            /******* Load HTML *******/
            // We can use jQuery 1.4.2 here
            $.get("http://localhost/demo/php_test_hrn/carousel.php", function (data) {
                $("#carousel").html(data);
            });

        });
    }

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

Carousel.php 

<div class="row">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://localhost/demo/php_test_hrn/images/img1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://localhost/demo/php_test_hrn/images/img2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://localhost/demo/php_test_hrn/images/img3.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

1 Ответ

0 голосов
/ 09 октября 2019

после вызова ajax, вам нужно запустить карусель вручную через $('.carousel').carousel()

, это должно работать; 

$.get("http://localhost/demo/php_test_hrn/carousel.php", function (data) {
               $("#carousel").html(data);
               setTimeout(function(){ // just being safe
                   $('.carousel').carousel();
               },20);
});
...