jQuery toggle() funktioniert nicht in Schienen

Ich verschiebe meine Front-End-Webseite auf die Schienen-Umgebung.Ich benutze das Datum Zeitauswahl-Plugin https://puranjayjain.github.io/md-date-time-picker/, um Datum und Uhrzeit auszuwählen. Wenn Sie auf das Textfeld klicken, das idealerweise die Datumsauswahl anzeigen soll, wird die Datumsauswahl für einen Sekundenbruchteil angezeigt und erlischt. Ich bekomme auch keinen Fehler in der Konsole.jQuery toggle() funktioniert nicht in Schienen

Javascript (für die erste Datumsauswahl):

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:

<!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>

Wie die Zeit und das Datum Kommissionierer bekommt korrekt angezeigt werden?

Quelle

2017-01-12 Rimil Dey

Was ist das Container-Div in Ihrem Code in js? –

@kartikupadhyay - es ist ein Container für den gesamten Code, der Inhalt verschwindet, wenn die Datumsauswahl erscheint und umgekehrt –

Sie müssen jquery in application.js enthalten! Dies geschieht aufgrund der Duplizierung der JQuery-Datei.

Quelle

2017-01-12 13:37:10

Vielen Dank! :) –

jQuery toggle() funktioniert nicht in Schienen

Antwort

Verwandte Themen