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"> <a href="#" class="remove_this btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span></a><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><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></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" ><a href="category.jsp?pg=cat&type=p"><span class="glyphicon glyphicon-list"></span> Category</a></li>
<li ><a href="Subcategory.jsp?pg=scat&type=p"><span class="glyphicon glyphicon-th-list"></span> Sub-Category</a></li>
<li ><a href="Product.jsp?pg=prd&type=p"><span class="glyphicon glyphicon-book"></span> Product</a></li>
<li><a href=""><span class="glyphicon glyphicon-th-large"></span> Stock</a></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 ><a href="Role.jsp?pg=rl&type=u"><span class="glyphicon glyphicon-filter"></span> Role</a></li>
<li ><a href="Level.jsp?pg=lvl&type=u"><span class="glyphicon glyphicon-tree-conifer"></span> Level</a></li>
<li><a href=""><span class="glyphicon glyphicon-user"></span> User</a></li>
<li><a href=""><span class="glyphicon glyphicon-earphone"></span> Address</a></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><a href=""><span class="glyphicon glyphicon-shopping-cart"></span> Order</a></li>
<li><a href=""><span class="glyphicon glyphicon-plane"></span> Shipment</a></li>
<li><a href=""><span class="glyphicon glyphicon-map-marker"></span> Shipment Log</a></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><a href=""><span class="glyphicon glyphicon-file"></span> Reports</a></li>
<li><a href=""><span class="glyphicon glyphicon-bell"></span> To Do</a></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><a href="category.jsp?pg=cat">Display</a></li>
<li class="active"><a href="#">Add New</a></li>
<!--<li><a href="#">Messages</a></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.
