Материализовать периодическую ошибку JS - PullRequest
Новая
       7

Материализовать периодическую ошибку JS

0 голосов

Я разрабатываю сайт для корпорации, в которой я работаю, и на этот раз я решил разработать его с использованием Materialise CSS в качестве инфраструктуры пользовательского интерфейса.Это выглядит действительно красиво, и мне нравятся его функции, хотя у меня есть одна большая проблема.Периодическая ошибка!Это означает, что когда я загружаю сайт, иногда я получаю ошибку js.Например, у меня есть выпадающий список с именем selectDatabase (это объект, который я определил).Если я перезагрузю страницу пару раз, этого не произойдет!Раскрывающийся список инициализируется, как и должно быть.У вас есть представление о том, что здесь может быть не так?

Детали проекта:
Каркас: Asp.net Core 2.0 MVC

HTML-код: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320" />
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
    <title>AutoTest Validation</title>
</head>
<body>
    <div class="visible-print print-logo"><i class="icon-logo"></i></div>
    <div class="content-wrapper">
        <div class="mega-menu">
            <div class="container nav-top">
                <div class="row">
                    <div class="col s12">
                        <a class="logo" href="/">
                            <i class="icon-logo"></i>
                        </a>
                        <span class="logo-text">
                            <i class="icon-logo-text"></i>
                            <i class="icon-logo-text-oneline"></i>
                        </span>
                        <a href="#" class="mobile-btn menu-btn">
                            <i class="icon-mobile-menu"></i>
                        </a>
                        <div class="logo-title">
                            <div class="userDropdownWrapper">
                                <a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
                                    <img id="userpicture" src="~/images/profile.svg" class="avatar">
                                    <span id="userfirstname"></span>
                                    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                                </a>
                            </div>
                            <ul id="dropdown" class="dropdown-content">
                                <li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
                                <li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
                                <li class="divider"></li>
                            </ul>
                            <div id="databaseSelectInputField" class="input-field">
                                <select id="databaseSelect">
                                    <option value="1" selected>AutoTest</option>
                                    <option value="2">AutoTest2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-nav">
                <div class="container">
                    <div class="row">
                        <div class="col s12">
                            <ul>
                                <li><a href="/">DashBoard</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sub-nav">
                <div class="container">
                    <div class="row">
                        <div class="col s12">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 sub-nav-items">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="container maincontainer" id="followMe">
                @RenderBody()
            </div>
        </div>
        <div class="footer-links">
            <ul>
                <li><a href="http://www.corporation.com">corporation.com</a></li>
                <li><a href="https://workplace.corporation.net/">Portal</a></li>
            </ul>
        </div>
    </div>
    <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '/lib/corporationtheme/js/app/main.js';
        document.body.appendChild(script);
    </script>
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
    <script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
    <script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Код JS: 

let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
    selectDatabase = $('#databaseSelect');
    selectUser = $('#userSelect');
    dropdownUser = $("#userDropdown");
    getUserProfile();
    selectDatabase.formSelect();
    selectUser.formSelect();
    dropdownUser.dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Error that sometimes appear

Ответы [ 2 ]

0 голосов

Хорошо.Похоже, я нашел проблему.Main.Js вмешивался в Materalize и вызывал ошибку.Я нашел более простой файл main.js для нашей темы.Теперь ошибки исчезли, и сайт работает как шарм.Спасибо за вашу помощь, ребята.

0 голосов
/ 24 мая 2018

Трудно ответить на этот вопрос, не имея возможности протестировать несколько вещей, но я все равно попробую:)

Похоже, что иногда Materialise js не загружается должным образом, или (что я считаюнаиболее вероятно) загружается после использования вашей функции.

Таким образом, решение таково:

Убедитесь, что вы используете свой код после загрузки Materialise js.Вы можете сделать это несколькими способами.Проще всего было бы добавить атрибут defer к тегу скрипта в html, который загружает js в порядке тегов в html.

Пример 

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>
...