I have dropdown text box form and open clicking on the dropdown button nothing happens. Below is my code, I am working on an Angular 4 framework:
$('#demo-combo-box-2').click(function(event) {
event.preventDefault();
$(event.currentTarget).parents('.input-group').siblings('.combo-box-scroll').toggleClass('hidden');
});
.hidden { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<form role="form" class="form-inline">
<div class="form-group">
<div class="combo-box">
<div class="input-group">
<input type="text" class="form-control" aria-label="Combobox">
<div class="input-group-btn">
<button class="btn btn-primary btn-icon" type="button" id="demo-combo-box-2">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
<div class="combo-box-scroll hidden">
<div class="list-group">
<a class="list-group-item">Item 1</a>
<a class="list-group-item">Item 2</a>
<a class="list-group-item">Item 3</a>
<a class="list-group-item">Item 4</a>
<a class="list-group-item">Item 5</a>
</div>
</div>
</div>
</div>
</form>
Related
I've a template that has tabbed navigation with a nested dropdown menu. The previous and next buttons should provide secondary navigation through each of the tabs. The buttons work until they need to go through the pages in the dropdown navigation. If you use the Next button to advance to a lecture, all of the pages/lectures in the dropdown will be displayed below the buttons.
I'm not sure of the best way to approach writing out the if/else piece in the js. Not sure if it's better to look at if/else based on what I have so far or start from scratch. I need help with figuring out how to get the script to go forwards and backwards through the entire list used for navigation.
$('.btnNext').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab" >Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
<p class="text-center">If you have questions regarding any of these activities, make sure to post those questions in the <strong>Open Forum</strong>.</p>
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
</body>
Here is a working demo using tab('show') instead of trigger('click')
$('.btnNext').click(function() {
if (!$('[data-toggle="tab"].active').next('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').nextAll().find('[data-toggle="tab"]').first().tab('show')
});
$('.btnPrevious').click(function() {
if (!$('[data-toggle="tab"].active').prev('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').prevAll().find('[data-toggle="tab"]').last().tab('show')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab">Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
I have div container with class="input-group" i am having input field with drop down, which i am creating with the help of bootstrap4
what i am trying to do is when user clicks on any dropdown the selected option should gets populate inside that respective input field
Code Snippet
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
i have tried the onclick event but id dosn't print any values
How can i do this is there any easy way
You can use the following code:
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
Working demo
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
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 -->
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--custom css-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<h1>Welcome to Bootstrap 4.0 !</h1>
<p>This is the platform that was created by twitter and is used in every website today</p>
<form action="" class="form-inline">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control
form-control-lg" placeholder="Tanveer">
</div>
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control
form-control-lg" placeholder="tanveer#example.com ">
</div>
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-full"
id="nav-main"> <a class="navbar-brand" href="#">Bootstrap 4.0</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</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">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </div> </nav>
<!-- 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="js/bootstrap.min.js""></script>
</body>
</html>
One vary basic and simple way to change a html tag to be in the center is to use align attribute:
<form align="center">
This sentence will be in the center!
</div>
Please try and change this code:
<form action="" class="form-inline" >
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
To:
<form action="" class="form-inline" align="center">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
Another way is to add the "text-align: center;" in your CSS file.
You can use below CSS to align form in the center with content.
form {
display: block;
margin: 0 auto;
text-align: center;
}
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I got an error
Uncaught TypeError: undefined is not a function
in my jQuery script. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href="css/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/mycss.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function() {
$i = 0;
$("#append").click(function() {
$i = $i + 1;
$(".inc").append('<div class="controls"><input type="text"placeholder="Sub-category Name" name="subcat[]" class="tbox"> <span class="glyphicon glyphicon-remove"></span><br><br></div>');
return false;
});
jQuery('.remove_this').live('click', function() { //Error is shown here
$i = $i - 1;
jQuery(this).parent().remove();
return false;
});
$("#f_category").submit(function(e) {
var inputVal = $("#t_catname").val();
var sactval = $("#t_subcategory").val();
if (inputVal == "") {
alert("Please Enter Category Name");
$("#t_catname").focus();
e.preventDefault();
} else if (sactval == "") {
alert("Please Enter Atleast One Sub-Category Name");
$("#t_catname").focus();
e.preventDefault();
}
});
});
</script>
<div id="maindiv" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top Header" role="navigation" style="border-color: #99ccff;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand fhtext" href="index.jsp"><img src="Img/dt.png" width="40" height="32" /> Catalog Tracking System</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div id="menu_content">
<div class="col-sm-3 col-md-2 sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Product Master
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse ">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li class="active" ><span class="glyphicon glyphicon-list"></span> Category</li>
<li ><span class="glyphicon glyphicon-th-list"></span> Sub-Category</li>
<li ><span class="glyphicon glyphicon-book"></span> Product</li>
<li><span class="glyphicon glyphicon-th-large"></span> Stock</li>
</ul> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
User Master
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse ">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li ><span class="glyphicon glyphicon-filter"></span> Role</li>
<li ><span class="glyphicon glyphicon-tree-conifer"></span> Level</li>
<li><span class="glyphicon glyphicon-user"></span> User</li>
<li><span class="glyphicon glyphicon-earphone"></span> Address</li>
</ul> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Order Master
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li><span class="glyphicon glyphicon-shopping-cart"></span> Order</li>
<li><span class="glyphicon glyphicon-plane"></span> Shipment</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Shipment Log</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Reports & Messages
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li><span class="glyphicon glyphicon-file"></span> Reports</li>
<li><span class="glyphicon glyphicon-bell"></span> To Do</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Category</h1>
<ul class="nav nav-tabs" role="tablist">
<li>Display</li>
<li class="active">Add New</li>
<!--<li>Messages</li>-->
</ul>
<br><br>
<div class="alert-success"><p></p></div>
<div class="col-md-6">
<form role="form" action="Con_Category" id="f_category">
<div class="form-group">
<input type="text" name="action" value="insert" readonly style="display: none;"/>
<label>Category Name</label>
<input id="t_catname" type="text" class="form-control" placeholder="Category Name" name="cat">
</div>
<div class="control-group form-group">
<label class="control-label" for="inputEmail">Sub-Categories</label>
<div class="inc">
<div class="controls">
<input type="text" placeholder="Sub-category Name" name="subcat[]" id="t_subcategory" class="tbox">
<button class="btn btn-info btn-sm" type="submit" id="append" name="append"><span class="glyphicon glyphicon-plus"></span></button>
<br>
<br>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-primary"><strong>Submit</strong></button>
</form>
</div>
</div>
</div>
</div>
<div>
<div class="footer">
<footer class="fhtext">
<span class="glyphicon glyphicon-copyright-mark"></span> Powered By<br> Dantek Technologies Pvt. Ltd.
</footer>>
</div>
</div>
</body>
</html>
As per the screenshot you can see that there is plus and cross buttons on this page the plus buttons add a new set of textfield and button and the cross remove the textfield beside it. Currently this feature is not working, but if inverse the two jQuery calls in my head it will work but features of bootstrap.js will not work.
The plus and cross feature works on jquery.min.js and the bootstrap.js works on jquery-2.1.1.js. If I remove jquery.min.js the plus minus feature will not work and if i remove jquery-2.1.1.js the bootstrap feature will not work. Please tell me how will I solve this problem so that both of my features will work.
Problem is here
jQuery('.remove_this').live
live method has been removed from jquery 1.9
use .on method instead.
You can also Try:
jQuery('.remove_this').click(function() { //Error is shown here
$i = $i - 1;
jQuery(this).parent().remove();
return false;
});