slideUp is not working on button - javascript

Hi experts i'm new to jquery & here when i click on 'change alternate email' link the box is sliding down but when click on save button actually it should slide Up but it didn't.
Here is my code.
HTML:
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>
Jquery:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').hide();
return false;
});


I think you need to use
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
jsfiddle: https://jsfiddle.net/pbvb7fm5/


mine is ok,are you sure you have run the code on more than 1 browser to see the result?maybe your css conflict with slideUp()
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 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>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>


To solve this and to have better control over the elements you are searching for (like save btn) use an Id on the html elements. Something like below:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('#btnSave').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 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>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius" id="btnSave">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>


Use Following Html code.
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius alternate-email-btn">Save </button>
</div>
</div>
</div>
<span class="alternate-email">change alternate email</span>
Your span has no effect and use the button class (alternate-email-btn) inside buton tag
<span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>
When You are hiding alternate-email-box class it only hides your section without any animation. Use slideUp and slideDown will give you the effect. You can also use slideToggle(). Like
$('.alternate-email-box').slideToggle();
Or use some id
$('#button').click(function() {
$('.alternate-email-box').slideUp();
return false;
});`

Related

Form validation in Bootstrap v4.0 not working, required tag not working

/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#submit').on('click', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>
Hello All!
I am trying to add form validation into my site for my contact page. I have run into a snag. No matter what I try none of the bootstrap ways of form validation work. I have tried just the plain required tag, and all of the ways bootstrap explains. I did take out my prevent default in my js file and that didnt change anything. I am at a bit of a loss, any help would be much appreciated thank you.

You need to add required attibute to your inputs and submit your form #contact in Jquery (not button click). Try this one:
/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#contact').on('submit', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>

Try a different way. In your situation i'll create a simple function to validate post and use a modal to show some errors or missing data. Use the return of the functiom that you create and use AJAX to POST the data on the server-side page instead of submit.

You didn't insert the required attribute in the input tag. If you want a field to be required then you need to use it like the following
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

How to toggle the way my elements looked before they were clicked

I am using bootstrap 4 and jquery for an HTML page. I want to toggle the way my elements looked before and after the button is clicked. I have the code jquery code below and the full code for the module I want in the codepen
HTML code
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="login-part col-lg-6">
<div class="row row-loginpart">
<div class="dropdown col-lg-12 reg-user">
<button
class="btn btn-outline-success dropdown-toggle reg-user-btn"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
>
Regular User Login
</button>
<div class="dropdown-menu reg-user">
<form class="px-4 py-3">
<div class="form-group">
<input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="email#example.com"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="dropdownCheck"
/>
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="alink" href="#">Sign up</a>
<a class="alink" href="#">Forgot password?</a>
</div>
</div>
<!-- Default dropup button -->
<div class="btn-group dropup col-lg-12 vendor-user">
<button
type="button"
class="btn btn-outline-success dropdown-toggle vendor-user"
data-toggle="dropdown"
>
Vendor Login
</button>
<!-- Dropdown menu links -->
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="email#example.com"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="dropdownCheck"
/>
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="alink" href="#">Sign up</a>
<a class="alink" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
<!-- jquer script cdn -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="index.js"></script>
<!-- bootstrap scripts start -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- bootstrap scripts end -->
</body>
</html>
CSS
.row-loginpart {
margin-top: 8rem;
}
.btn {
width: 100%;
}
.dropdown-menu {
width: 95%;
}
.show {
padding-left: 1rem;
}
.dropup-button.col-lg-12 {
top: 17rem;
}
.alink {
margin-left: 2rem;
text-align: center;
}
jquery code
var timesClicked = 0;
$(".reg-user-btn").on("click", function () {
timesClicked++;
console.log("clicked" + timesClicked);
if (timesClicked % 2 === 0)
if (
$(".row").hasClass("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
) {
$(".row").addClass("row-loginpart");
$(".vendor-user").removeClass("dropup-button");
}
if (timesClicked % 2 === 1)
if (
$(".row").not("row-loginpart") &&
$(".vendor-user").not("dropup-button")
) {
$(".row").removeClass("row-loginpart");
$(".vendor-user").addClass("dropup-button");
}
});
https://codepen.io/tk1017/pen/xxZwmgY
I don't know why my elements don't come back to the positions as they were before after they button is clicked again. I also tried logging whether my eventhandler gets called for every click and it does. Why it doesn't work?
P.S:
The HTML code contains a lot of scripts and cdns, please consider the code inside the body.

I am the one who posted the question. I should have checked my logic. The problem was with the outer if condition when remainder equals 0.
$(".row").hasClass("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
)
For the first click, the class .row-loginpart is removed and the class .dropup-button is added. When the second click happens there is no class named .row-loginpart so the above statement evaluates to false. So the code below that doesn't execute.
Thanks for the effort if any body is still going through this issue or have looked at this issue.
So the below replacement solves the issue, for the inner if where we check for an even click
$(".row").not("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
)

Drop of events not working on fullcalendar when I add a script for showing events to the calendar

Hi there can I have this problem, I have this file and when I try to edit the events I add a script of events at the end to display the events on calendar as soon as I do that the events that are on the left side I cant drop them anymore
enter image description here
As you can see on the picture this events works fine before I add this script to the end of file:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
</script>
So this is my file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
<title></title>
<!-- Custom CSS -->
<link href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="../../assets/extra-libs/calendar/calendar.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="../../dist/css/style.min.css" rel="stylesheet">
</head>
<body>
<div id="main-wrapper">
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)
" aria-expanded="false">
<i class="icon-Error-404Window"></i>
<span class="hide-menu">Error Pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-5 align-self-center">
<h4 class="page-title">Calendar</h4>
<div class="d-flex align-items-center">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
<div class="calendar-events m-b-20" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>Event One</div>
<div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i> Event Two</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event Three</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event Four</div>
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MODAL -->
<div class="modal none-border" id="my-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add Event</strong></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Category -->
<div class="modal fade none-border" id="add-new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add</strong> a category</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<label class="control-label">Category Name</label>
<input class="form-control form-white" placeholder="Enter name" type="text" name="category-name" />
</div>
<div class="col-md-6">
<label class="control-label">Choose Category Color</label>
<select class="form-control form-white" data-placeholder="Choose a color..." name="category-color">
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="info">Info</option>
<option value="primary">Primary</option>
<option value="warning">Warning</option>
<option value="inverse">Inverse</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light save-category" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END MODAL -->
</div>
</div>
</div>
<script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery.ui.touch-punch-improved.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery-ui.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/app.init.boxed.js"></script>
<script src="../../dist/js/app-style-switcher.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="../../dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="../../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../../dist/js/custom.min.js"></script>
<!--This page JavaScript -->
<script src="../../assets/libs/moment/min/moment.min.js"></script>
<script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="../../dist/js/pages/calendar/cal-init.js"></script>
<script>
</script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
},
]
});
});
</script>
</body>
</html>
So this is my code sorry I don't know how to put my local files on snipet, I just thought maybe someone when sees the code would have an idea and help me I would really appreciate it

try to use this code instead (taken from https://fullcalendar.io/docs/external-dragging-demo, I just updated it according to your ids and classes names):
$(function() {
// initialize the external events
// -----------------------------------------------------------------
$('#calendar-events .calendar-events').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// initialize the calendar
// -----------------------------------------------------------------
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
droppable: true,
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});

bootstrap-datepicker does not function at all

My datetimepicker is not working I don't know what exactly is the problem.
Please tell me if I have missed to include any css or script tags.
I am using http://eonasdan.github.io/bootstrap-datetimepicker/.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker8').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 form-control-label">D.O.B</label>
<div class="col-sm-10">
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>

There were so many things wrong with your code. Incorrect css/js files, missing files, incorrect functions. Here's the working version with correct imports.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/css/tether.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="container">
DATE PICKER
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datepicker();
});
</script>
</div>
</div>
Replace bootstrap 3.css and .js files with bootstrap 4.css and .js links. And include this above bootstrap.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>

Check this out. Some of your external cdn resources are out of date, also change $(...).datetimepicker to $(...).datepicker
$(document).ready(function () {
$('#datetimepicker8').datepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="form-group row">
<div class="col-sm-2">
<label for="inputPassword3" class="form-control-label">D.O.B</label>
</div>
<div class="col-sm-10">
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>

Bootstrap popover in modal and input-group-addon

I can't get Bootstrap 3.3.5 popover to work. I want the popover to become visible when hovering the input-group-addon, but nothing happens.
My current code:
Javascript:
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: '#imgPopover'});
});
HTML
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
<img src="~/images/absolent-logo.gif" style="max-height: 20px" />
<span data-bind="html: $parents[1].text.qTempHeader"></span>
</button>
<input type="number" class="form-control" data-bind="value: qTemp"/>
</div>
I've tried a bunch of different things, but nothing seems to do it. A push in the right direction would be much appreciated.

the problem is with the container: '#imgPopover' attribute, the div is too small to contain the popover. change it to body and its working.
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: 'body'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
test me
</button>
</div>

Categories