как я решу это? Uncaught TypeError: Невозможно прочитать свойство 'which' из неопределенного - Material design bootstrap - PullRequest
Новая
       24

как я решу это? Uncaught TypeError: Невозможно прочитать свойство 'which' из неопределенного - Material design bootstrap

0 голосов
/ 06 января 2020

Я не в порядке в javascript и css. Я пытаюсь создать страницу входа, используя шаблон, который sh использует MD bootstrap. но когда я нажимаю кнопку "давайте go", я получаю сообщение об ошибке. Я искал это на inte rnet. но я не смог найти решение.

Это моя страница: 

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="<?php echo base_url() ?>assets/img/apple-icon.png">
  <link rel="icon" type="image/png" href="<?php echo base_url() ?>assets/img/favicon.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>
    Student Management | Login
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- CSS Files -->
  <link href="<?php echo base_url() ?>assets/css/material-dashboard.minf066.css?v=2.1.0" rel="stylesheet" />
  <!-- pnotify css -->
  <link href="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />
  <!-- material icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

</head>

<body class="off-canvas-sidebar">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
    <div class="container">
      <div class="navbar-wrapper">
        <a class="navbar-brand" href="#pablo">Login Page</a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item  active ">
            <a href="<?php echo base_url() ?>view_controller/login" class="nav-link">
              <i class="material-icons">fingerprint</i> Login
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
  <div class="wrapper wrapper-full-page">
    <div class="page-header login-page header-filter" filter-color="white" style="background-image: url('<?php echo base_url() ?>assets/img/login.jpg'); background-size: cover; background-position: top center;">
      <!--   you can change the color of the filter page using: data-color="blue | purple | green | orange | red | rose " -->
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">
            <form class="form" method="post" action="<?php echo base_url() ?>user_controller/user_login">
              <div class="card card-login card-hidden">
                <div class="card-header card-header-rose text-center">
                  <h4 class="card-title">Login</h4>
                </div>
                <div class="card-body ">
                  <p class="card-description text-center">Or Be Classical</p>
                  <span class="bmd-form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="material-icons">email</i>
                        </span>
                      </div>
                      <input type="email" id="inputEmail" class="form-control" placeholder="Email...">
                      <div id="statusEmail"></div>
                    </div>
                  </span>
                  <span class="bmd-form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="material-icons">lock_outline</i>
                        </span>
                      </div>
                      <input type="password" id="inputPassword" class="form-control" placeholder="Password...">
                      <div id="statusPassword"></div>
                    </div>
                  </span>
                </div>
                <div class="card-footer justify-content-center">
                  <a href="" id = "submitButton" class="btn btn-rose btn-link btn-lg">Lets Go</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class="container">
          <div class="copyright float-right">
            &copy;
            <script>
              document.write(new Date().getFullYear())
            </script>, made with <i class="material-icons">favorite</i> by
            <a href="http://www.prox.lk" target="_blank">Pro-X Technologies</a> in Sri Lanka.
          </div>
        </div>
      </footer>
    </div>
  </div>
  <input type="hidden" value="<?php echo base_url()?>" id="baseUrl">
  <!--   Core JS Files   -->
  <script src="<?php echo base_url() ?>assets/js/core/jquery.min.js"></script>
  <script src="<?php echo base_url() ?>assets/js/core/popper.min.js"></script>
  <script src="<?php echo base_url() ?>assets/js/core/bootstrap-material-design.min.js"></script>
  <script src="<?php echo base_url() ?>assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
  <!--  Notifications Plugin    -->
  <script src="<?php echo base_url() ?>assets/js/plugins/bootstrap-notify.js"></script>
  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="<?php echo base_url() ?>assets/js/material-dashboard.minf066.js?v=2.1.0" type="text/javascript"></script>
  <script>
    $(document).ready(function() {
      md.checkFullPageBackgroundImage();
      setTimeout(function() {
        // after 1000 ms we add the class animated to the login/register card
        $('.card').removeClass('card-hidden');
      }, 700);
    });
  </script>
  <!-- custom javascript ----- login page.js -->
  <script src="<?php echo base_url() ?>assets/js/customjs/login.js" type="text/javascript"></script>
  <!-- pnotify js -->
  <script type="text/javascript" src="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/iife/PNotify.js"></script>
  <script type="text/javascript" src="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
</body>
</html>

Это мой внешний js файл 

$(document).on('click','#submitButton',function(e){
    e.preventDefault();
    let password = document.getElementById('inputPassword');
    let email = document.getElementById('inputEmail');
    let endpoint = document.getElementById('baseUrl')+'user_controller/user_login';

    $.ajax({
        url:endpoint,
        type:'post',
        dataType:'json',
        data:{
            email:email,
            password:password
        },
        success:function (response) {

            document.getElementById('inputEmail').classList.remove("is-valid");
            document.getElementById('inputEmail').classList.remove("is-invalid");
            document.getElementById('statusEmail').classList.remove("valid-feedback");
            document.getElementById('statusEmail').classList.remove("invalid-feedback");

            document.getElementById('inputPassword').classList.remove("is-valid");
            document.getElementById('inputPassword').classList.remove("is-invalid");
            document.getElementById('statusPassword').classList.remove("valid-feedback");
            document.getElementById('statusPassword').classList.remove("invalid-feedback");

            if (response.form_err) {
                let form_err = response.form_err;
                if (form_err.email == "") {
                    document.getElementById('inputEmail').classList.add("is-valid");
                    document.getElementById('statusEmail').classList.add("valid-feedback");
                    document.getElementById('statusEmail').innerHTML = "Email is valid.";
                } else {
                    document.getElementById('inputEmail').classList.add("is-invalid");
                    document.getElementById('statusEmail').classList.add("invalid-feedback");
                    document.getElementById('statusEmail').innerHTML = form_err.email;
                }
                if (form_error.password == "") {
                    document.getElementById('inputPassword').classList.add("is-valid");
                    document.getElementById('statusPassword').classList.add("valid-feedback");
                    document.getElementById('statusPassword').innerHTML = "Password is correct.";
                } else {
                    document.getElementById('inputPassword').classList.add("is-invalid");
                    document.getElementById('statusPassword').classList.add("invalid-feedback");
                    document.getElementById('statusPassword').innerHTML = form_err.password;
                }
            } else if (response == true) {
                // PNotify.success({
                //     title: 'Success!',
                //     text: 'Now you will redirected to the admin panel.'
                // });
            }
        },
        error: function (err) {
            // console.log(err);
            // PNotify.error({
            //     title: 'Oh No!',
            //     text: 'Something terrible happened.'
            // });
        } 
    });
  });

Когда я нажимаю на кнопку let go, получаем ошибку, подобную этой: 

bootstrap-material-design.min.js:1 Uncaught TypeError: Cannot read property 'which' of undefined
    at Object.isChar (bootstrap-material-design.min.js:1)
    at bootstrap-material-design.min.js:1
    at e (jquery.min.js:2702)
    at Ab (jquery.min.js:2695)
    at Ab (jquery.min.js:2697)
    at Object.<anonymous> (jquery.min.js:2693)
    at Function.each (jquery.min.js:128)
    at Ab (jquery.min.js:2692)
    at Ab (jquery.min.js:2697)
    at Ab (jquery.min.js:2697)

Как мне решить эту ошибку? Я не мог найти решение для поиска в Google.

...