Bootstrap carousel is not working in AJAX

Question

I am trying to load bootstrap carousel using AJAX. AJAX return HTML data. HTML is load into my page and all the related JS and CSS is loaded into the page as well. But carousal is not scrolling.

I want to create widget of Jquery which run this carousel any website, after just include the.js on any website

Here is my code 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>

Answer 1

after the ajax call, you need to run carousel manually via $('.carousel').carousel()

this should work;

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

Bootstrap carousel is not working in AJAX

Question

1 answers

solution1
0 2019-10-09 05:21:23

Bootstrap carousel is not working in AJAX

Question

1 answers

solution1 0 2019-10-09 05:21:23

solution1
0 2019-10-09 05:21:23