Drop on fullcalendar not working after adding script with events laravel - javascript

Hi there I have this problem with the calendar when I try to drag and drop, it drags the event but then it does not drop on the calendar,
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
events : [
#foreach($appointments as $appointment)
{
title : '{{ $appointment->firstname }}',
start : '{{ $appointment->start_at }}',
},
#endforeach
],
})
$('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
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();
}
}
});
});
</script>
<link rel="stylesheet" href="{{ asset('app/assets/libs/fullcalendar/dist/fullcalendar.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('app/assets/extra-libs/calendar/calendar.css') }}"/>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Agents</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
#foreach($agents as $key=> $agent)
<li class="nav-item"> <a class="nav-link #if($key == 0)active #endif" data-toggle="tab" href="#{{$agent->id}}" role="tab" style="text-align: center;">
<div class="user-profile dropdown m-t-20">
<div class="user-pic">
<img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
</div></div><span class="hidden-xs-down">{{$agent->name}}</span></a>
</li>
#endforeach
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active" id="{{$agent->id}}" role="tabpanel">
<div class="p-20">
<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="">
#foreach($appointments as $appointment)
<div class="calendar-events m-b-20 draggable" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>
{{$appointment->firstname }} <br> {{$appointment->start_at}}</div>
#endforeach
<!-- <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>
</div>
<!-- <div class="tab-pane p-20" id="profile" role="tabpanel">2</div>
<div class="tab-pane p-20" id="messages" role="tabpanel">3</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
The appointment are shown on my calendar I want to be able to drag an event and drop to the calendar the drag and drop was working, but when I added the script with the events that show the appointments inside the calendar the drop does not work and on console does not show any error. Can someone help me ?

Related

Bootstrap brand image overlapping container below the nav bar

I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute

Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Using Bootstrap collapse class not working for multiple div tags

I have a list of item A, B, C, D, E. Each item you click on one of these list items there is a bootstrap class 'collapse' which shows a div with text in it. This all works ok. However, you have to click the list item again to collapse the div with the text in it.
I am trying to make sure when a list item is clicked on, all other openend divs are closed immediately.
I found something which mentions to use 'data-parent' but as seen in the snippet below this does not work. To see the problem view the snippet and expand snippet.
To replicate my problem these are the steps:
Click item A (you will see text appear 'A' underneath)
Click item B (you will see text 'A' still appear as well as 'B')
Click item C (you will see text 'A','B''C')
Click item A (you will now see 'B','C') but A has now collapsed
I am trying to make sure you only see the text related to the ID of the div you clicked on.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p> </p>
<h2>LIST ITEM</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseA" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseFood">
<span>A</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseB" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseVegan">
<span>B</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseC" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseJain">
<span>C</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseD" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseLunch">
<span>D</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseE" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseCocktail">
<span>E</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA" aria-expanded="true" >
<div class="intro">
A
</div>
<hr>
</div>
<div class="collapse" id="collapseB" aria-expanded="true" >
<div class="intro">
B
</div>
<hr>
</div>
<div class="collapse" id="collapseC" aria-expanded="true" >
<div class="intro">
C
</div>
<hr>
</div>
<div class="collapse" id="collapseD" aria-expanded="true" >
<div class="intro">
D
</div>
<hr>
</div>
<div class="collapse" id="collapseE" aria-expanded="true" >
<div class="intro">
E
</div>
<hr>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Restaurant Menu -->
</body>
</html>

You can do this with jquery like,
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>
On data-toggle="collapse" click, means on your list items click, all the div's which are opened (have the .in class with them) are close with the collapse function.
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</link>
</meta>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p>
</p>
<h2>
LIST ITEM
</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseFood" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseA">
<span>
A
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseVegan" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseB">
<span>
B
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseJain" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseC">
<span>
C
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div aria-controls="collapseLunch" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseD">
<span>
D
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseCocktail" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseE">
<span>
E
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA">
<div class="intro">
A
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseB">
<div class="intro">
B
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseC">
<div class="intro">
C
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseD">
<div class="intro">
D
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseE">
<div class="intro">
E
</div>
<hr>
</hr>
</div>
</hr>
</div>
</div>
</div>
<hr>
</hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!-- End Restaurant Menu -->
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>

Dynamic Bootstrap list with collapse is not working properly

I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.

How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?

I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.

try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

jQuery "on" event delegation not working with AJAX call

I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>

Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!

Categories