Jquery Ajax：尝试提取请求并将其输入到bootstrap轮播中

Question

I am trying to pull ads into a bootstrap carousel on a chrome extension, first I got an error that said

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I did some research and found the error was because I did not have the item active class and now I am trying to find a work around but cannot. I am trying to basically see if I can add a div after the one that contains the active. Here is my code and what I have tried...

main.js - variables and some functions have been taken out due to a large file

var myFuncs = { //Put in a class so I don't have to type it multiple times 
    ajaxRequest: function(target, method, url)
    {
        $.ajax({
            url: url,
            method: method,
            success: function(data) 
            {
                $(target).html(data).after(".item active");
            }
        });
    }
};

l1.addEventListener("mouseover", function() {
    l1.className = "active";
}, false);
l1.addEventListener("mouseout", function() {
    l1.className = ""; //Hackish but it works - class still appears but is not assigned 
}, false); //The other event listeners that do the same are taken out to avoid a long question they are all the same basically but l1 is changed to l2-l8

l1.addEventListener("click", function() {
    if (ajaxTarget[0].style.display === "none")
    {
        ajaxTarget[0].style.display = "block";
    }
    myFuncs.ajaxRequest(".b", "POST", ""); //Sensitive information taken out for stackoverflow question
}, false); Again l2-l8 was taken out to avoid a long question

I have no problems in the console.log. Here is my PHP...

<?php
    $servername = "";
    $username = "";
    $passcode = "";
    $dbname = "";

    $conn = mysqli_connect($servername, $username, $passcode, $dbname);

    if (!$conn)
    {
        echo 'Could not connect';
    }
    else 
    {
        try
        {
            $sql_query = mysqli_query($conn, "SELECT * FROM `adDatabase`");
            while ($row = mysqli_fetch_array($sql_query))
            {
                $id = $row['ID'];
                $img = $row['img'];
                $image = '<section class="item"><img src="data:image/png;base64,'.base64_encode( $row['food'] ).'" style="height: 12em; width: 12em; margin: 1em; padding: 0.9em; " ></section>';
                echo $image;
            }
        }
        catch(Exception $e)
        {
            echo $e;
        }
    }
?>

The images show up just fine in this PHP file, but when I try to load after the active class nothing shows up could I get some help on this?

Answer 1

If you already have an active item, then you insert a new one after it you need to call $("#your-container").carousel("next"). Bootstrap will take care the rest thing(remove .active from current item and set .active to new item)