Component local state is not getting State while using collapse

Component local state is not getting State while using collapse - javascript

I am new to react.js. Here I have a button, on click of that button one dropdown gets opened.
export default class NewCollapse extends Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
}
}
EnableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
}
EnableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
}
EnableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
}
render() {
return (
<div class="container">
<div id="mainmenu" class="row">
<div class="list-group panel visible-md visible-lg">
<i class="glyphicon glyphicon-home"></i>
</div>
<div class="list-group panel">
<button href="#menupos1" data-toggle="collapse" data-parent="#mainmenu">Quick Action<span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></button>
<div class="collapse pos-absolute" id="menupos1">
Quiz<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu1">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={CreateNewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Create New</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={ViewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">View</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={EditQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Update</label>
</a>
</div>
View<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu2">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={JobDescriptionIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Job Description</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={ResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
Upload<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu3" >
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadFolderIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Folder</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
)
}
}
So, here what I want to do is that there are three buttons, if any of them is collapsed the others should not be. So, I have maintained three states for each of the collapse. Now, state gets changed but when I first click, that time the state is not getting changed.
So, what is it that I am doing wrong?
Can any one help me with this?

Since you're using bootstrap, there is really no easy way for us to change the collapse/show functionality being provided to us. What we can do is work our way around it with some conditional-rendering.
export default class NewCollapse extends React.Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
};
}
enableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
};
enableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
};
enableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
};
render() {
return (
<div className="container">
<div id="mainmenu" className="row">
<div className="list-group panel visible-md visible-lg">
<a href="/" className="list-group-item">
<i className="glyphicon glyphicon-home" />
</a>
</div>
<div className="list-group panel">
<button
href="#menupos1"
data-toggle="collapse"
data-parent="#mainmenu"
>
Quick Action
<span className="menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</button>
<div className="collapse pos-absolute" id="menupos1">
<span
href="#submenu1"
onClick={this.enableQuiz}
className={
this.state.quizEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu1"
aria-expanded={this.state.quizEnable}
>
Quiz
<span class=" menu-ico-collapse">
<i class="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.quizEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu1"
>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={CreateNewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Create New</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={ViewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">View</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={EditQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Update</label>
</a>
</div>
<span
href="#submenu2"
onClick={this.enableView}
className={
this.state.viewEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu2"
aria-expanded={this.state.viewEnable}
>
View
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.viewEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu2"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={{JobDescriptionIcon}}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Job Description</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={ResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<span
href="#submenu3"
onClick={this.enableUpload}
className={
this.state.uploadEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu3"
aria-expanded={this.state.uploadEnable}
>
Upload
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.uploadEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu3"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadFolderIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Folder</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
);
}
}

Related

Converting Ecommerce template to React componenet

I am following and reading all guides to convert template(html, css, js) to react component but without any result. This is an eccommerce project in react, redux and node. All I want it to add responsive template that user can use from mobile too with good UI.
How to convert it? In index.html of React project I linked to .css and js events files
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
//import { Navbar, Nav, Container } from 'react-bootstrap';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Container } from 'react-bootstrap'
import { NavDropdown } from 'react-bootstrap'
import Logo from '../assets/images/divano-logo.svg'
const Header = () => {
const dispatch = useDispatch()
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const logoutHandler = () => {
dispatch(logout())
}
return (
<>
<nav>
<div className='container'>
<a href='index.html' className='logo'>
<img src={Logo} alt='' width='130' height='55' />
</a>
<div className='navigation navigation-top clearfix'>
<ul>
<li>
<a href='#' className='open-login'>
<i className='icon icon-user'></i>
</a>
</li>
<li>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
</li>
<li>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
</li>
</ul>
</div>
<div className='navigation navigation-main'>
<a href='javascript:void(0);' className='open-login'>
<i className='icon icon-user'></i>
</a>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
<a href='#' className='open-menu'>
<i className='icon icon-menu'></i>
</a>
<div className='floating-menu'>
<div className='close-menu-wrapper'>
<span className='close-menu'>
<i className='icon icon-cross'></i>
</span>
</div>
<ul>
<li>
<a href='#'>
Home{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Homepages</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Pages{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Addons</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Blog{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Shop{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Checkout{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div className='search-wrapper'>
<input className='form-control' placeholder='Search' />
<button className='btn btn-outline-dark btn-sm'>Search now</button>
</div>
<div className='login-wrapper'>
<div className='h5'>Sign in</div>
<form>
<div className='form-group'>
<input
type='email'
className='form-control'
id='exampleInputEmail1'
placeholder='Email'
/>
</div>
<div className='form-group'>
<input
type='password'
className='form-control'
id='exampleInputPassword1'
placeholder='Password'
/>
</div>
<div className='form-group'>
<a
href='#forgotpassword'
className='open-popup btn btn-main btn-sm'
>
Forgot password?
</a>
<a
href='#createaccount'
className='open-popup btn btn-main btn-sm'
>
Don't have an account?
</a>
</div>
<button
type='submit'
className='btn btn-block btn-outline-primary'
>
Submit
</button>
</form>
</div>
<div className='cart-wrapper'>
<div className='checkout'>
<div className='clearfix'>
<div className='row'></div>
<hr />
</div>
</div>
</div>
</div>
</nav>
</>
)
}
export default Header

How to change the caret when i click the button?

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.
1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .
2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar

Use this code... I have udpate this without js or jquery.
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
}
.nav-link-type-three:hover{
text-decoration: none;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
right: -7px;
color: #fff;
font-size: 17px;
top: 1px;
font-family: FontAwesome;
content: "\f0d7";
position: relative;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
content: "\f0d7";
}
li.show .nav-link-type-three::after{
content: "\f0d8";
color: #232323;
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

You were close. You have to point to the proper class, and then find the caret-icon elements to switch the caret.
$(document).ready(function () {
$('.nav-link-type-three').on('click', function () {
if ($(this).find('.caret-icon').hasClass('fa-caret-down')) {
$(this).find('.caret-icon').removeClass('fa-caret-down').addClass('fa-caret-up');
} else {
$(this).find('.caret-icon').removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<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>

The problem is in the second row of your jQuery.
$('.fa-caret-down').on('click', function () {}
Instead of targeting .fa-caret-down which is a class used by icon you should target the entire button.
$('button').on('click', function () {}
NOTE: I wrote button but you need to target specific tag nav-link in your case.

Active tab nav in mdc-tab-bar using jQuery

I have a nav tab class with two tabs with material and I want to show the second tab.
I have tried with jQuery but that is not working for me.
Here my HTML :
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
Here my code Jquery :
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
So how can I solve this problem with jquery or by adding specific class like show active in bootstrap.

Make sure to add the proper libraries. As you can see in this example, the default tab is the second.
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
.show {
background-color: red!important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>

Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created

I have a page where I let the user search for information, and it displays an alert at the top stating that he is searching. He is then shown a filtered result. If he clicks the alert dismiss button, the main page is to be reloaded.
However I find that the dismissed event closed.bs.alert is never fired.
My javascript code:
$("document").ready(function () {
$('body').on('click', '#mainsearch', function (event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('body').on('closed.bs.alert', "#srpatalert", function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
});
function SearchPatients() {
var srmsgpre = `
<div id="srpatalert" class="mr-3 alert alert-info alert-dismissible fade show" role="alert">
<strong>Searching For`;
var srmcl = ' </strong>';
var srmsgpost = `
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
`;
var breadcrumb = `
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Search results</li>`;
var srstr = $("#searchterm").val();
sralmsg = srmsgpre + 'Patients:' + srmcl + srstr + srmsgpost;
$('#presearch').html(sralmsg);
return true;
}
My html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Show Patients</title>
</head>
<body>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg"
data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
JSFiddle: JSFiddle
As you can see above, I tried two different approaches. I'm not able to get the closed.bs.alert event to fire.

Replace
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
with
$('#navbar').on('close.bs.alert', '#srpatalert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
Notice that, besides delegating the event to #navbar, I also changed the event itself (from closed.bs.alert to close.bs.alert) as closed.bs.alert doesn't seem to fire in this example - I don't know why and, since it's working with close.bs.alert, I didn't investigate further.
Here's a working example:
$("document").ready(function() {
$('body').on('click', '#mainsearch', function(event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('#navbar').on('close.bs.alert', "#srpatalert", function() {
console.log('Closed alert');
});
// don't mind next line, it's just for SO:
$(document).on('click', 'a', e => e.preventDefault())
});
function makeAlert(category, term) {
return $('<div />', {
id:'srpatalert',
class:'mr-3 alert alert-info alert-dismissible fade show',
role: 'alert'
}).append($('<strong />',{text:'Searching For ' + category + ': '}))
.append($('<span />', {text: term}))
.append($('<button />', {
type:'button',
class:'close',
'data-dismiss':'alert',
'aria-label':'Close',
html: $('<span />',{
'aria-hidden':true,
html:'×'
})
}))
}
function SearchPatients() {
sralmsg = makeAlert('Patients', $("#searchterm").val());
$('#presearch').html(sralmsg);
return true;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg" data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>

As discussed in comments on the accepted answer above, the closed event does not properly bubble even if you use a delegated event and attach the handler to parent. A bit of discussion on this here.
Also, it's important to note that there is a distinct difference between close and closed, which is that the latter fires after the alert has been removed. In some applications this difference may be significant, such as when you need to resize other elements based on changes to the dom.
With that in mind, if you absolutely need to use the closed event, you must dynamically add your handler anytime the alert is created. This could be done in your example code immediately after:
$('#presearch').html(sralmsg);
You could add your handler so it would look like this:
$('#presearch').html(sralmsg);
$('#srpatalert').off().on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});

Sorting li elements by class? jQuery / Javascript

I have multiple li rows like this
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
</ol>
I want to sort all the li rows by the span class "Status_online".
is this possible?

UPDATE
You can use a combination of closest() to find the each .Record_row that is an ancestor of each .Status_online. Then use .each() on each online .Record_row and use .before() to place them before the first .Record_row. In the Snippet notice that each item maintains it's content and ordered from the earliest to the current.
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
</script>
</body>
</html>
OLD
One of your tags is jQuery UI so I'm assuming that you are using it. You can you .sortable() method:
$('.DataList_row').sortable();
This is drag and drop, and I posted before you had commented further details of your need for this sorting to be dynamic...So standby...
SNIPPET
$('.DataList_row').sortable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.6.2/css/font-awesome.min.css">
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE</span>
</div>
</a>
</div>
</li>
</ol>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var olElement = $('.DataList_row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
console.log(sortedAttributes);
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
var clClass = cl.startsWith('ONLINE')?'online':'offline'
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + clClass + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
});
</script>
</body>
</html>
Here is how you can do it:
var olElement = $('.DataList_Row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + cl.toLowerCase() + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.

Develop Reference

JavaScript is the programming language of the Web.

Component local state is not getting State while using collapse - javascript

Related

Converting Ecommerce template to React componenet

How to change the caret when i click the button?

Active tab nav in mdc-tab-bar using jQuery

Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created

Sorting li elements by class? jQuery / Javascript

Categories

Resources