Create popup with bootstrap and javascript

Create popup with bootstrap and javascript - javascript

This is cshtml
<a href="#" data-toggle="modal" data-target="#empmodal">
#Html.DisplayFor(model => model.FullName, new { #id = "empName" })
</a>
<div class="ui tiny modal new-employee-modal" id="empmodal">
<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
this is my js
$('a').click(function (event) {
var url = '#Url.Action("Details")' /*+ input_index*/;
$('.modal.new-employee-modal').modal({
autofocus: false,
onHidden: function () {
$('.modal.new-employee-modal').empty();
$('.modal.new-employee-modal').append(
`<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>`)
}
})
.modal('show');
$.get(url).done(function (a) {
$(".modal.new-employee-modal").html(a);
});
});
This is my particalview and pop-up in inside
<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "employee details";
}
</div>
<div class="modal-root-page tag-label red"></div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="box-title"></div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.FirstName</div>
<div class="text">#Model.FirstName</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.JobTitle</div>
<div class="text">#ViewBag.JobTitle</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.LastName</div>
<div class="text">#Model.LastName</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode</div>
<div class="text">#ViewBag.Position</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.BirthDate</div>
<div class="text">#Model.BirthDate</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.ClassCode</div>
<div class="text">#ViewBag.Department</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.Gender</div>
<div class="text">#Model.Gender.EnumDisplayNameFor()</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.MobilePhoneNo</div>
<div class="text">#Model.MobilePhoneNo</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.CompanyEMail</div>
<div class="text">#Model.CompanyEMail</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.FirstEmploymentDate</div>
<div class="text">#Html.DisplayFor(model => model.FirstEmploymentDate)</div>
</div>
</div>
</div>
I try to open popup.When I click on the link, the modal should open and it should fetch the data in the model.I'm not sure what I'm doing wrong in the examples I've looked at it's pretty much done like this.I need to go to the url I gave in javascript and open a partial view from the controller, that is, the last page I threw.
Sorry for my English

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<!-- Large modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

It is better you insert the complete bootstrap and modal libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
And instead of links, maybe use a <button></button>
or define an onclick event.

Related

How to avoid flex items have same height on collapse

There are some elements that come from array, then I need them to get placed in a list with a diplay flex, my problem is I added a button that should collapse the selected one but others get their height modified aswell...
Have tryed with diferent display and placing inline on li elements but nothing works.
Any way to have elements in a list inline and heigh independant?
.dragscroll {
display: flex;
overflow-x: auto;
}
.rectangle-holder {
border: 1px solid black;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<ul class="dragscroll">
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment1">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment2">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment3">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment4">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment5">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment6">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment7">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

You need to add css property align-items: flex-start;.
It defines the default behaviour for how flex items are laid out along the cross axis on the current line. And flex-start set cross-start margin edge of the items is placed on the cross-start line.
.dragscroll {
display: flex;
overflow-x: auto;
align-items: flex-start;
}

Bootstrap modal grid layout missing padding

I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/

This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>

Use bootstrap table instead of cols check this fiddle

issues with jquery date dropdown

<!doctype html>
<html>
<head>
<title>title</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<img src="img/search.png" class="img-responsive"/>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<img src="img/settings.png" id="settings-icon" class="img-responsive"/>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active" id="active-link">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
<div class="row" id="banner-top-row">
<div class="col-md-12" id="banner-top-col">
<img src="img/banner-top.png" id="banner-top" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> For more information.... </h4>
<h1> Contact Us </h1>
</div>
</div>
<div class="row" id="detail-request">
<div class="col-md-12">
<h1> Send us your details to request our latest brochure <h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4">
<input type="hidden" id="date-dropdown">
<script>
$("#date-dropdown").dateDropdowns({
defaultValue: "2010-02-17"
});
</script>
</div>
<div class="form-group col-xs-4 col-md-4">
</div>
<div class="col-md-4">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="support-box">
<h3>Start a Live Chat with one of our Tech Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-livechat.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Start a Skype Call with one of our Sales Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-skype.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Send an email to our Customer Services Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-email.png" id="support-image" class="img-responsive"/>
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="banner-bottom-row">
<div class="col-md-12" id="banner-bottom-col">
<img src="img/banner-bottom.png" id="banner-bottom" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> We will be in touch </h4>
<h1> Thank you </h1>
</div>
</div>
</div>
<div class="row" id="footer">
<p>Terms and Conditions | Privacy Policy | Copyright Code 2016</p>
<hr id ="footer-line">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-date-dropdowns.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
https://gyazo.com/06ad94c6b0c0b173da9dfd1d95bb02f6 here is my browser loading in the jquery js. My error message is
contact-us.html:121 Uncaught ReferenceError: $ is not defined(anonymous function) # contact-us.html:121

Move the jquery library to the head of your page
<script type="text/javascript" src="js/jquery.min.js"></script>
This should solve it.
The $ is not defined(anonymous function) means jQuery hasn't been loaded yet

Your jQuery selector is incorrect in two ways:
"example1" is looking for an element called <example1>, which of course doesn't exist. To select an element by its id, prepend a # character.
Your element's id is example3.
Try:
$("#example3")

What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?

I've following HTML to show the bootstrap modal dialog:
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
Bootstrap modal dialog code is as below :
<div id="myModal-event" class="modal fade" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
and another code as follows :
<div class="modal-content">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
<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">
{$eventDetails.event_details.title}
<input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}">
</div>
<ul>
<li><img src="{$user_img_url}/time.png" alt=""> {$eventDetails.event_details.start_time_phrase_stamp}</li>
<li><img src="{$user_img_url}/calender.png" alt=""> {$eventDetails.event_details.start_time_phrase}</li>
{if $eventDetails.event_details.location}
<li>
<img src="{$user_img_url}/location.png" alt="">
{$eventDetails.event_details.location}
</li>
{/if}
{if $eventDetails.event_details.group_name}
<li><img src="{$user_img_url}/group_event.png" alt="">Group: {$eventDetails.event_details.group_name}</li>
{/if}
<li><button type="button" class="btn btn-info" data-toggle="popover">Edit Event</button></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item">Edit Event</a>
Invite Members
Delete Event
</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" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} >Going</option>
<option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} >Maybe</option>
<option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}>Not Going</option>
</select>
</div>
<!--
<div class="form-group" align="right">
<select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
<option value=""></option>
<option value="edit_event">Edit Event</option>
<option value="invite_members">Invite members</option>
<option value="delete_event">Delete event</option>
</select>
</div>
-->
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li>Description</li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li>Not Going</li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane active" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{$eventDetails.event_details.description}
</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">
{foreach from=$eventDetails.attending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.notComing_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
Now what's happening in my code is when user clicks on above
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
The first part of code opens up, then the data fetch is going on then suddenly the second part of code i.e. the data fetched gets added to the modal. I'm not understanding how this is happening.
The jQuery which is doing this is as follows but I didn't understand what it is doing when that hide event is being called etc. etc. Please clear my doubts by making me understand below code.
$('body').on('hidden.bs.modal', '.modal', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
Thanks.

This executes when the .modal (modal window) gets closed. So, whenever you open a modal window with the class modal (obviously), at some point it gets closed. When that modal window gets hidden (or closed) the event hidden.bs.modal gets triggered and the function gets executed.
This is not managed by the user (you didn't write explicit code) but the Bootstrap library has it built in.
From the Bootstrap Documentation:
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
Sample Code:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something when this modal window is closed...
});
To answer the queries in the comments, you have:
$("#myModal-event .modal-body").html(' Loading... '); sets the content of the modal window to be Loading....
$(this).removeData('bs.modal'); - This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content. See more at Clear Bootstrap Modal content after close.

How to make multiple windows draggable by using bootstrap and Draggable.min.js

I am using bootstrap and this library for draggable windows:https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js
I can make one window draggable in the page, however, when i toggle multiple windows, only the first window is draggable.
Does anyone have a solution?
Here is the code:
<div class="btn-group">
<label class="btn btn-primary" ng-click="toggleNotebook()">Notebook</label>
<label class="btn btn-primary" ng-click="toggleMissionsDB()">Missions </label>
</div>
<!-- Begin Missions DB -->
<div class="row" ng-show="missionsDBVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="missionsdb.html">Missions Database</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">Missions</h4>
<p>Here you will find information on Nasa missions.</p>
</div>
</div>
</div>
</div>
<!-- Begin Notebook -->
<div class="row" ng-show="notebookVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">notebook</h4>
<p>Notebook</p>
</div>
</div>
</div>
</div>
`

We Keep Coding

JavaScript is the programming language of the Web.

Create popup with bootstrap and javascript - javascript

Related

How to avoid flex items have same height on collapse

Bootstrap modal grid layout missing padding

issues with jquery date dropdown

What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?

How to make multiple windows draggable by using bootstrap and Draggable.min.js

Categories

Resources