Fatal编程技术网
  • javascript/
  • Javascript 未加载bootstrap4切换库

Javascript 未加载bootstrap4切换库

javascript twitter-bootstrap button

Javascript 未加载bootstrap4切换库,javascript,twitter-bootstrap,button,Javascript,Twitter Bootstrap,Button,我很难理解javascript在页面上的加载顺序。 这就是我要做的 查询rest api并获取数据。-嗯 一旦检索到数据，我想“切换”boostrap按钮。换句话说，我想打开关闭的按钮 问题：当我在按钮上使用引导切换方法时，不断出现以下错误错误：未捕获（承诺中）类型错误：$（…）。Bootstraptogle不是函数 试验 功能测试（数据）{ console.log（“在此登录”）； 控制台日志（数据）； //我们要在这里做点什么，然后 //根据api返回的结果打开按钮。 结果=[13,12

我很难理解javascript在页面上的加载顺序。 这就是我要做的

  • 查询rest api并获取数据。-嗯
  • 一旦检索到数据，我想“切换”boostrap按钮。换句话说，我想打开关闭的按钮
    • 问题：当我在按钮上使用引导切换方法时，不断出现以下错误错误：未捕获（承诺中）类型错误：$（…）。Bootstraptogle不是函数

    
试验
功能测试（数据）{
console.log（“在此登录”）；
控制台日志（数据）；
//我们要在这里做点什么，然后
//根据api返回的结果打开按钮。
结果=[13,12,11]
打开按钮（结果）
}
功能开启按钮（结果）{
//此函数将使用发送的结果打开
//按钮…但是我不能使用它，因为引导程序会切换
//找不到库。
//这将抛出一个错误
$（'13'）.bootstrapToggle（'on'，true）；
}
取（'http://127.0.0.1:8000/endpoint_that_gives_me_data')
.then（response=>response.json（））
.然后（数据=>测试（数据））；

上面的按钮将永远不会打开，因为我一直收到以下错误：Uncaught（承诺中）TypeError:$（…）。bootstraptogle不是一个函数
    有人有什么想法吗

    <!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Test</title>

  <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Autocomplete things -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <!-- Bootstrap toggle -->
  <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

  <!-- ChartJS things -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

</head>

<body>

<input id="13" class="checkbox" type="checkbox" data-toggle="toggle" data-onstyle="success">


<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
function test(data) {
    console.log("in here");
    console.log(data);
    //  Going to do something with the data here and then
    //  turn on button based on the results returned from api.
    results = [13,12,11]
    turnonbuttons(results)
}

function turnonbuttons(results) {
        // This function will use the results sent in to turn on the
    // the buttons....however I can't use it because the bootstrapToggle
    // library is not found.

    // This will throw an error
    $('#13').bootstrapToggle('on', true);
}


fetch('http://127.0.0.1:8000/endpoint_that_gives_me_data')
  .then(response => response.json())
  .then(data => test(data));
</script>

<p>
   The button above will never turn on because I keep getting this error: Uncaught (in promise) TypeError: $(...).bootstrapToggle is not a function
</p>


    </body>
</html>