jQuery toggle（）在Rails中不起作用

Question

I am shifting my front-end web page to the rails environment.I am using the date time picker plugin https://puranjayjain.github.io/md-date-time-picker/ to select dates and time. 我将前端网页转移到Rails环境中，使用日期时间选择器插件https://puranjayjain.github.io/md-date-time-picker/选择日期和时间。 On clicking the text field which should ideally display the date picker, the date picker shows up for a split second and goes off. 单击理想情况下应显示日期选择器的文本字段时，日期选择器将显示一秒钟并关闭。 I am not getting any error in the console as well. 我在控制台中也没有收到任何错误。

Javascript (for the first date picker): Javascript（用于第一个日期选择器）：

var inputStartDate = document.querySelector('#start-date');
    var outputStartDate = document.querySelector('#start-date-label');

var dialogStartDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(50,'years')
    });

    dialogStartDate.trigger = inputStartDate;

    inputStartDate.addEventListener('click', function() {
        console.log(18);
        dialogStartDate.toggle();
        $('.container-div').toggle();
    });

    inputStartDate.addEventListener('onOk', function() {
        console.log(19);
        var startDate = dialogStartDate.time.toString();
        var startDateFormat = moment(startDate).format('LL');
        outputStartDate.innerHTML = startDateFormat;
        $('#start-date-label').css('color','blue');
        $('.container-div').show();
    });

    inputStartDate.addEventListener('onCancel',function(){
        console.log(20);
        $('.container-div').show();
    });

HTML: HTML：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMS scheduling site</title>

  <!--css stylesheets-->
  <%= stylesheet_link_tag "jquery-ui.min" %>
  <%= stylesheet_link_tag "material.min" %>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
        rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
  <%= stylesheet_link_tag "mdDateTimePicker" %>
  <%= stylesheet_link_tag "style" %>

</head>

<body>
<div class="container-div">
  <!-- Colored FAB button with ripple -->
  <button id="fab" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
  </button>

  <style>

  </style>

  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title" id="text-div">
      <h2 id="title-text" class="mdl-card__title-text">CAMPAIGN</h2>
      <br>
      <br>
      <span id="success">Success!</span>
    </div>
    <div class="mdl-card__supporting-text">
      <form action="#">

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="campaign-name">
          <label class="mdl-textfield__label" for="phone-number-receiver">Campaign Name</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="phone-number-receiver">
          <label class="mdl-textfield__label" for="phone-number-receiver">Phone Number for recipient</label>
          <span class="mdl-textfield__error">Input is not a number!</span>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="start-date">
          <label class="mdl-textfield__label" for="start-date" id="start-date-label">Enter start date</label>
        </div>


        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="end-date">
          <label class="mdl-textfield__label" for="end-date" id="end-date-label">Enter end date</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="start-time">
          <label class="mdl-textfield__label" for="end-date" id="start-time-label">Enter time</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield less-margin">
          <textarea class="mdl-textfield__input" type="text" id="sms-msg" rows="8" columns="40"></textarea>
          <label class="mdl-textfield__label" for="sms-msg">Text lines...</label>

        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="break-msg" value="1">
          <label class="mdl-textfield__label" for="break-msg">Number of Pages</label>
        </div>
      </form>
    </div>
  </div>
</div>


<%= javascript_include_tag "jquery-3.0.0.min" %>
<%= javascript_include_tag "jquery-ui.min" %>
<%= javascript_include_tag "material.min" %>
<%= javascript_include_tag "moment.min" %>
<%= javascript_include_tag "draggabilly.pkgd.min" %>
<%= javascript_include_tag "mdDateTimePicker" %>
<%= javascript_include_tag "app" %>
</body>

</html>

How to get the time and date pickers to display correctly? 如何使时间和日期选择器正确显示？

Answer 1

You must be including jquery in application.js! 您必须在application.js中包含jquery！ This happens due to the duplication of jquery file. 发生这种情况是由于jquery文件重复造成的。

jQuery toggle（）在Rails中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-12 13:37:10

jQuery toggle（）在Rails中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-12 13:37:10

解决方案1
1 已采纳 2017-01-12 13:37:10