Laravel 5.4 Uncaught Error: Bootstrap требуется jQuery - PullRequest
0 голосов
/ 02 мая 2020

Мое Laravel APP не отвечает на запросы мобильных устройств, и я думаю, что это из-за Uncaught Error: Bootstrap requires jQuery

Уже задано бесчисленное множество вопросов Stackoverflow, но ни один из них не помог мне.

Уже пробовал следующие решения: Laravel - Bootstrap's JavaScript требует jQuery ошибка

https://laracasts.com/discuss/channels/general-discussion/bootstraps-javascript-requires-jquery-error

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

Вот как это выглядит на мобильном телефоне:

enter image description here

Файл основного блейда list.blade. php

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!------ Include the above in your HEAD tag ---------->
<style>
    body {
        /* Safari 4-5, Chrome 1-9 */
        /*background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));*/

        /* Safari 5.1+, Chrome 10+ */
        /*background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);*/

        /* Firefox 3.6+ */
        /*background: -moz-radial-gradient(circle, #1a82f7, #2F2727);*/

        /* IE 10 */
        /*background: -ms-radial-gradient(circle, #1a82f7, #2F2727);*/
        height: 600px;
    }

    .centered-form {
        margin-top: 60px;
    }

    label.label-floatlabel {
        font-weight: bold;
        color: #46b8da;
        font-size: 11px;
    }

    .panel-body {
        background: #EEEEEE !important;
    }

    .panel-heading {
        background-color: #CCCCCC !important;
        text-align: center !important;
    }

    .panel-default {
        border: 1px solid black;
        border-radius: 0px !important;
        margin-bottom: 0px !important;
    }

    .box-body {
        margin-bottom: 14px;
    }

    .btn-info {
        background-color: #2d78c2 !important;
        border-color: #2d78c2 !important;
    }
    #res_title{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    #res_desc{
        font-size: 10px;
        overflow-wrap: break-word;
        height: 30px;
        overflow: hidden;
    }
    #res_result{
        font-size: 10px;
        font-weight: 600;
    }
    #items{
        width: 100px;
        border: 1px solid black;
        padding: 5px;
        margin-right: 3px;
        height: 100px;
    }
    #result_box_div
    {
        margin-top: 20px;
        display: inline-flex;
    }
</style>

<script type="text/javascript" src="https://www.clubdesign.at/floatlabels.js"></script>

<div class="container">
    <div class="row centered-form">
        <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2">
            <div class="panel panel-default">
                <!-- <div class="panel-heading">
                        <h3 class="panel-title">Charging Parameter</h3>
                    </div>-->
                <div class="panel-body">
                    {!! csrf_field() !!}
                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label"><b>Battery Mode & lManufacturer :</b></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->Manufacture->battery_manufaturer_name ?> &
                                <?php echo $record->Model->model_number ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_batter_voltage') ? ' has-error' : '' }}">
                                    <label class="control-label">Voltage of each battery :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_batter_voltage ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('battery_system') ? ' has-error' : '' }}">
                                    <label class="control-label">Number of total batteries :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->battery_system ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_amp_hours') ? ' has-error' : '' }}">
                                    <label class="control-label">Amp-hour capacity of each battery :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_amp_hours ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_system_voltage') ? ' has-error' : '' }}">
                                    <label class="control-label">System Voltage : </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_system_voltage ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-heading" style="text-align:center !important;">
                    <!--<p><b>P3 = <?php echo $p3_variable; ?></b></p>-->
                    <a href="{{ url('/') }}?cp_id={{$record->id}}" class="btn btn-primary"><i class="fa fa-arrow-left"></i> Edit</a>
                </div>
            </div>
        </div>
    </div>

    <!--special notes-->
    <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2" style="margin-left: 15.8% !important;">
        <div id="result_box_div">
            <?php echo $battery_profiledata; ?>
        </div>
    </div>

</div>

<script>
    $(function () {
        $('input').floatlabel({
            labelEndTop: 0
        });
    });
</script>

1 Ответ

1 голос
/ 02 мая 2020

Вы должны загрузить jQuery перед загрузкой Bootstrap JS

использовать это

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

вместо

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

также bootstrap 3.1.0 требуется Jquery версия 1.9.0 или выше https://github.com/twbs/bootstrap/blob/v3.1.0/bower.json

  "dependencies": {
    "jquery": ">= 1.9.0"
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...