javascript сайта работает в android, windows, linux и во всех браузерах, но не в ma c, ios в любом браузере - PullRequest
Новая
       10

javascript сайта работает в android, windows, linux и во всех браузерах, но не в ma c, ios в любом браузере

0 голосов
/ 14 июля 2020

Я использую очень простой c java скрипт на сайте, который отлично работает на всех устройствах, кроме яблок. Я пробовал 

setting headers and status code from my flask server

disabling jquery

using ' instead of "

disabling all css

Понятия не имею, почему это не работает. У меня нет ma c, я тестировал его на iphone и пытался использовать стек браузера, но по какой-то причине он вообще не запускает никакие машины.

Я wi sh Я мог бы поделитесь кодом, но он кажется лишним.

Что мне здесь не хватает?

Я добавлю сюда css html и js!

HTML

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

<head>
  <!-- Required meta tags-->
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
<meta http-equiv='Content-Type' content='text/html' />

  <!-- Title Page-->
  <title>CITS AA</title>

  <!-- Icons font CSS-->
  <link href='{{ url_for('static',filename='vendor/mdi-font/css/material-design-iconic-font.min.css') }}'
    rel='stylesheet' media='all' />
  <link href='{{ url_for('static',filename='vendor/font-awesome-4.7/css/font-awesome.min.css') }}' rel='stylesheet'
    media='all' />
  <!-- Font special for pages-->
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i'
    rel='stylesheet' />

  <!-- Vendor CSS-->
  <link href='{{ url_for('static',filename='vendor/select2/select2.min.css') }}' rel='stylesheet' media='all' />
  <link href='{{ url_for('static',filename='vendor/datepicker/daterangepicker.css') }}' rel='stylesheet' media='all' />

  <!-- Main CSS-->
  <link href='{{ url_for('static',filename='css/main.css') }}' rel='stylesheet' media='all' />
</head>

<body>
  <div class='page-wrapper bg-blue p-t-100 p-b-100 font-robo'>
    <div class='wrapper wrapper--w680'>
      <div class='card card-1'>
        <div class='card-heading'></div>
        <div class='card-body'>
          <h2 class='title'>CITS Attendance Automated</h2>
     
            <div class='input-group'>
              <input  class='input--style-1' type='text' placeholder='NAME' name='name'
                value='{{ user }}' disabled />
            </div>
            <div class='row row-space'>
              <div class='col-2'>
                <div class='col-4'>Select Your Course</div>
                <div class='input-group'>
                  <div class='rs-select2 js-select-simple select--no-search'>
                    <select name='courses' id='courses' value='' onchange='validate()'>
                      {% for course in courses %}
                      <option
                        value='{{ '{}-{}-{}-{}'.format(course['registrationSemester'],course['registrationYear'],course['cCourseId'],course['section']) }}'>
                        {{ '{}-{}-{}-{}'.format(course['registrationSemester'],course['registrationYear'],course['cCourseId'],course['section']) }}
                      </option>
                      {% endfor %}
                    </select>
                    <div class='select-dropdown'></div>
                  </div>
           
                </div>
              </div>
            </div>
              <div class='row row-space'>
              <div class='col-4 error' id='courses-error'></div>
            </div>
            <div class='row row-space'>
              <div class='col-2'>
                <div class='col-2'>Class Code</div>
                <div class='input-group'>
                  <input  id='classcode' class='input--style-1 input' type='text'
                    placeholder='classcode' name='classcode' disabled />
                </div>
              </div>
              <div class='col-2'>
                <div class='col-2'>Section</div>
                <div class='input-group'>
                  <input id='section' class='input--style-1 input' type='number' placeholder='section' name='section'
                     disabled value='' />
                </div>
              </div>
            </div>
            <div class='row row-space'>
              <div class='col-2'>
                <div class='col-2'>Date</div>

                <div class='input-group'>
                  <input  class='input--style-1 js-datepicker' type='text' placeholder=''
                    name='date' value='{{ date }}' id='date' disabled />
                </div>
              </div>
              <div class='col-2'>
                <div class='col-2'>Semester</div>
                <div class='input-group'>
                  <input id='semester' class='input--style-1 input' type='text' placeholder='semester' name='semester'
                    disabled />
                </div>
              </div>
            </div>
            <div class='row-space'>
              <div class='input-group'>
                <div class='col-4'>
                  Meeting URL
                </div>
                <input class='input--style-1 input' type='text' name='meeturl' id='meeturl' oninput='validate()' />
              </div>
            </div>
            <div class='row row-space'>
              <div class='col-4 error' id='meeturl-error'></div>
            </div>
            <div class='row row-space'>
              <div class='input-group'>
                <div class='col-4'>Meet Code</div>
                <input class='input--style-1 input' type='text' placeholder='code' name='meetcode' id='meetcode'
                  disabled />
              </div>
            </div>
            <div class='row row-space'>
              <div class='p-t-20'>
                <button class='btn btn--radius btn--red' id='submit' onclick='submitData()' disabled>
                  Submit
                </button><span id='messages' style='padding-left: 5px;'>Click Submit to Confirm</span>

              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <script defer src='{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}'></script>
  <script defer src='{{ url_for('static',filename='vendor/select2/select2.min.js') }}'></script>
  <script defer src='{{ url_for('static',filename='vendor/datepicker/moment.min.js') }}'></script>
  <script defer src='{{ url_for('static',filename='vendor/datepicker/daterangepicker.js') }}'></script>
  <script defer src='{{ url_for('static',filename='js/global.js') }}'></script>
</body>
</html>

CSS

.font-robo {
  font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row-space {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.col-2 {
  width: -webkit-calc((100% - 60px) / 2);
  width: -moz-calc((100% - 60px) / 2);
  width: calc((100% - 60px) / 2);
}

@media (max-width: 767px) {
  .col-2 {
    width: 100%;
  }
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

li > ol,
li > ul {
  margin-bottom: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  min-width: 0;
  /* [1] */
  border: 0;
}

button {
  outline: none;
  background: none;
  border: none;
}

.page-wrapper {
  min-height: 100vh;
}

body {
  font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

h6 {
  font-size: 13px;
}

.bg-blue {
  background: #2c6ed5;
}

.p-t-100 {
  padding-top: 100px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-b-100 {
  padding-bottom: 100px;
}

.wrapper {
  margin: 0 auto;
}

.wrapper--w680 {
  max-width: 680px;
}

.btn {
  line-height: 40px;
  display: inline-block;
  padding: 0 25px;
  cursor: pointer;
  font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
  color: #fff;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 14px;
  font-weight: 700;
}

.btn--radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn--green {
  background: #57b846;
}
.btn--red {
  background: crimson;
}
.btn--yellow {
  background: gold;
}

.btn--green:hover {
  background: #4dae3c;
}

td.active {
  background-color: #2c6ed5;
}

input[type='date' i] {
  padding: 14px;
}

.table-condensed td,
.table-condensed th {
  font-size: 14px;
  font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
  font-weight: 400;
}

.daterangepicker td {
  width: 40px;
  height: 30px;
}

.daterangepicker {
  border: none;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  display: none;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
}

.daterangepicker::after,
.daterangepicker::before {
  display: none;
}

.daterangepicker thead tr th {
  padding: 10px 0;
}

.daterangepicker .table-condensed th select {
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 14px;
  padding: 5px;
  outline: none;
}

input {
  outline: none;
  margin: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 2px solid #ccc;
}

.input-icon {
  position: absolute;
  font-size: 18px;
  color: #ccc;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

.input--style-1 {
  padding: 9px 0;
  color: #000;
}
.error {
  color: crimson;
}

.input--style-1::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #555;
}

.input--style-1:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #555;
  opacity: 1;
}

.input--style-1::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #555;
  opacity: 1;
}

.input--style-1:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #555;
}

.input--style-1:-ms-input-placeholder {
  /* Microsoft Edge */
  color: #555;
}

/* ==========================================================================
   #SELECT2
   ========================================================================== */
.select--no-search .select2-search {
  display: none !important;
}

.rs-select2 .select2-container {
  width: 100% !important;
  outline: none;
}

.rs-select2 .select2-container .select2-selection--single {
  outline: none;
  border: none;
  height: 34px;
}

.rs-select2
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 34px;
  padding-left: 0;
  color: #000;
}

.rs-select2
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: 32px;
  right: 4px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.rs-select2
  .select2-container
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none;
}

.rs-select2
  .select2-container
  .select2-selection--single
  .select2-selection__arrow:after {
  font-family: 'Material-Design-Iconic-Font';
  content: '\f2f9';
  font-size: 18px;
  color: #ccc;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.rs-select2
  .select2-container.select2-container--open
  .select2-selection--single
  .select2-selection__arrow::after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.select2-container--open .select2-dropdown--below {
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  overflow: hidden;
}

/* ==========================================================================
   #TITLE
   ========================================================================== */
.title {
  margin-bottom: 37px;
}

/* ==========================================================================
   #CARD
   ========================================================================== */
.card {
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
}

.card-1 {
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}

.card-1 .card-heading {
  background: url('../iub.jpg') center center/cover no-repeat;
  padding-top: 210px;
}

.card-1 .card-body {
  padding: 0 90px;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media (max-width: 767px) {
  .card-1 .card-body {
    padding: 0 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

JS

(function ($) {
  /*==================================================================
        [ Daterangepicker ]*/
  try {
    $('.js-datepicker').daterangepicker({
      singleDatePicker: true,
      showDropdowns: true,
      autoUpdateInput: false,

      locale: {
        format: 'DD/MM/YYYY',
      },
    });

    var myCalendar = $('.js-datepicker');
    var isClick = 0;

    $(window).on('click', function () {
      isClick = 0;
    });

    $(myCalendar).on('apply.daterangepicker', function (ev, picker) {
      isClick = 0;
      $(this).val(picker.startDate.format('DD-MM-YYYY'));
    });

    $('.js-btn-calendar').on('click', function (e) {
      e.stopPropagation();

      if (isClick === 1) isClick = 0;
      else if (isClick === 0) isClick = 1;

      if (isClick === 1) {
        myCalendar.focus();
      }
    });

    $(myCalendar).on('click', function (e) {
      e.stopPropagation();
      isClick = 1;
    });

    $('.daterangepicker').on('click', function (e) {
      e.stopPropagation();
    });
  } catch (er) {
    console.log(er);
  }
  /*[ Select 2 Config ]
        ===========================================================*/

  try {
    var selectSimple = $('.js-select-simple');

    selectSimple.each(function () {
      var that = $(this);
      var selectBox = that.find('select');
      var selectDropdown = that.find('.select-dropdown');
      selectBox.select2({
        dropdownParent: selectDropdown,
      });
    });
  } catch (err) {
    console.log(err);
  }
})(jQuery);

function validate() {
  let error = 0;

  let courses = document.getElementById('courses');
  let meeturl = document.getElementById('meeturl');

  if (courses.value && courses.value != '') {
    let [semester, year, classcode, section] = document
      .getElementById('courses')
      .value.toString()
      .split('-');
    document.getElementById('classcode').style = 'font-weight: bold';
    document.getElementById('section').style = 'font-weight: bold';
    document.getElementById('semester').style = 'font-weight: bold';
    document.getElementById('classcode').value = classcode;
    document.getElementById('section').value = section;
    document.getElementById('semester').value = semester;
    document.getElementById('courses-error').innerText = '';
  } else {
    error++;
    document.getElementById('courses-error').innerText =
      'Please select a course';
  }

  if (meeturl.value && meeturl.value != '') {
    let parsed = meeturl.value
      .toString()
      .match(
        /(?<=https:\/\/meet.google.com\/)[a-z0-9]{3}-[a-z0-9]{4}-[a-z0-9]{3}?/gi
      );
    if (parsed && parsed.length > 0) {
      let meetcode = parsed[0].toString().replace(/-/g, '').toUpperCase();
      if (meetcode && meetcode.length == 10) {
        document.getElementById('meetcode').value = meetcode;
        document.getElementById('meetcode').style = 'font-weight: bold';
        document.getElementById('meeturl-error').innerText = '';
      } else {
        document.getElementById('meeturl-error').innerText = 'Incorrect URL';
        document.getElementById('meetcode').value = '';
        error++;
      }
    } else {
      document.getElementById('meeturl-error').innerText =
        'Incorrect/Empty URL';
      document.getElementById('meetcode').value = '';
      error++;
    }
  } else {
    document.getElementById('meeturl-error').innerText = 'Empty URL';
    document.getElementById('meetcode').value = '';
    error++;
  }

  if (error != 0) {
    document.getElementById('submit').disabled = true;
    document.getElementById('submit').classList.remove('btn--green');
    document.getElementById('submit').classList.add('btn--red');
  } else {
    document.getElementById('submit').disabled = false;
    document.getElementById('submit').classList.remove('btn--red');
    document.getElementById('submit').classList.add('btn--green');
  }
}
function submitData() {
  if (
    document.getElementById('meetcode').value &&
    document.getElementById('meeturl').value &&
    document.getElementById('classcode').value &&
    document.getElementById('section').value &&
    document.getElementById('date').value &&
    document.getElementById('semester').value
  ) {
    send = {
      meetcode: document.getElementById('meetcode').value,
      meeturl: document.getElementById('meeturl').value,
      classcode: document.getElementById('classcode').value,
      section: document.getElementById('section').value,
      date: document.getElementById('date').value,
      semester: document.getElementById('semester').value,
    };
    document.getElementById('submit').classList.remove('btn--green');
    document.getElementById('submit').classList.add('btn--yellow');
    document.getElementById('submit').disabled = true;
    fetch('', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(send),
    }).then(async function (response) {
      let data = await response.json();
      if (data.valid) {
        document.getElementById('messages').innerText = 'Done, enjoy teaching';
        document.getElementById('messages').style = 'color: green;';
        Array.from(document.getElementsByClassName('input')).forEach(function (
          item
        ) {
          item.value = '';
        });
        document.getElementById('submit').classList.remove('btn--yellow');
        document.getElementById('submit').classList.add('btn--green');
        document.getElementById('submit').disabled = false;
      } else {
        document.getElementById('messages').innerText =
          'Something went wrong, reload and try again';
        document.getElementById('messages').style = 'color: red;';
      }
    });
  } else {
    document.getElementById('messages').innerText =
      'Please fill the form properly';
    document.getElementById('messages').style = 'color: red;';
  }
}
validate();

1 Ответ

0 голосов
/ 28 июля 2020

Фактическая причина была связана с определенным c набором регулярных выражений. Прогнозирование пока не будет работать ни на каких устройствах Apple, поэтому код не работает при запуске с устройств Apple. Я решил это, используя другой шаблон регулярного выражения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...