I'm developping a chatbot. At some point, I ask the user to pick a date, I use the following code in the client side :
var elems = document.querySelector(".usrInput");
var currYear = (new Date()).getFullYear();
var options = {
defaultDate: new Date(currYear-1,1,31),
maxDate: new Date(currYear+1,12,31),
yearRange: [currYear-1, currYear+1],
format: "yyyy/mm/dd"
};
var instances = M.Datepicker.init(elems, options);
I want to restore the initial behavior of the element .usrInput after the date is picked, to allow the used to continue the conversation. Below is a minimal example of the html.
<html>
<head>
<title>chatbot</title>
<!--Import materialize.css-->
<link
rel="stylesheet"
type="text/css"
href="static/css/materialize.min.css"/>
</head>
<body>
<div class="container">
<div class="widget">
<div class="chat_header">
<span class="chat_header_title">Chatbot name</span>
<!--Chatbot contents goes here -->
<div class="chats" id="chats">
<div class="clearfix"></div>
</div>
<div class="keypad">
<textarea
id="userInput"
placeholder="Type something..."
class="usrInput"
></textarea>
<div id="sendButton">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm new to both materialize and js. Thanks.
Related
A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "Uncaught TypeError: Cannot read properties of null (reading 'vlaue')" This is my DOM(JS file)
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
and this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
I tried const id = blabla.value
password = blabla.value
Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day...
Thank you for helping me out in advance.
I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag.
If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script>
Now It's should works fine, Best regards !
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});
<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
you should use identifiers when querySelector is in your code so:
let color = document.querySelector('.login-btn');
I am using following sample code for date picker
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input 1-->
<label class="control-label" for="date">Start Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Date input 2-->
<label class="control-label" for="date">End Date</label>
<input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var date_input1=$('input[name="date1"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
date_input1.datepicker(options);
})
</script>
</div>
</body>
</html>
The date picker for Start Date opens in correct position but for End Date the date picker open above the field. I want to open it below similar to first case. I guess the problem is with javascript and javascript is new new thing for me. How can I correct mistake?
When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc
after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'bottom'
};
Let me know how that goes!
If you add orientation: 'top' to your options, it should work.
https://jsfiddle.net/L4t68rzx/1/
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top'
};
I am trying to duplicate my bootstrap datepicker, but it's not working properly.
The datepicker is inside a div and I duplicate the whole div. It works fine, but the datepicker is only working in the original div, not the cloned ones.
I've seen on stackoverflow that you can put a class instead of an Id, but that is not working either.
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
function duplicate() {
var i = document.getElementById('duplicater');
var d = document.createElement('div');
d.id = "new";
d.innerHTML = i.innerHTML;
var p = document.getElementById('dynamicInput');
p.appendChild(d);
}
duplicate();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" integrity="sha256-I/m6FhcACNYmRoqn1xUnizh6S7jOJsTq+aiJ6BtE2LE=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js" integrity="sha256-7Ls/OujunW6k7kudzvNDAt82EKc/TPTfyKxIE5YkBzg=" crossorigin="anonymous"></script>
<div id="dynamicInput" class="col-md-12">
<div id="duplicater">
<div class="row">
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Event Title" name="event_title[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Background Image (URL)" name="img_url[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input name="date" placeholder="Date" type="text" class="calendar" />
</div>
</div>
<div class="row">
<div class="description-create" class="col-md-8">
<input type="text" placeholder="Description" name="description[]">
</div>
</div>
</div>
</div>
I don't get why it's not working. My JavaScript selects all the elements with the class calendar and "gives" it a datepicker, does it not?
If I understand your problem give same class name of your second input field as your original and initialize datepicker with same class name, you don't need to duplicate whole code.
For example if you want to initialize datetimepicker in two textbox just give them same name as in example that follows in snippet.
$( function() {
$( ".calendar" ).datepicker();
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="date" placeholder="Date" type="text" class="calendar"/>
<input name="date1" placeholder="Date1" type="text" class="calendar"/>
The order of operations that you are using is:
html is on page
you are telling datepicker to enable the existing instances of .calendar
you are copying the div which creates html that the previous call didn't know about, so nothing attaches to it
The copy is making a copy of the html, it is not creating a new instance of datepicker. If at the end of your copy you called $('.calendar').datepicker('destroy'); you could follow that by your existing call to:
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
which would have the effect of:
html is on page
datepicker is attached to all existing instances of .calendar
duplicate is called
duplicate copies the html
and removes all instances of .calendar
and then reattaches to make sure it gets the original and the new instances of calendar
alternatively you could scope your call for attaching datepicker so that you attach it only to the newly created html.
I am using moment js for me to pop-up the date and time calendar. I can choose both the date and time and click the apply button. The moment I click the apply only the date seem to be update into the text box but no time is appearing. What could be wrong.
Here is my css
<link rel="stylesheet" href="css/daterangepicker.css" rel="stylesheet">
This is the text box
<div class="form-group">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 200px" name="beginDateTime" id="beginDateTime" class="form-control" />
</div>
</div>
Here is how I define my javascripts.
<!-- daterangepicker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
Finally I have this codes to the settings.
<script>
$(function() {
$('#beginDateTime').daterangepicker({
"singleDatePicker": true,
"timePicker": true
}, function(start, end, label) {
console.log("New date range selected");
});
})
</script>
Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}