So I've been trying to create a dynamic table for the better part of the day. I created two dropdown options which would display different table results depending on what's been selected and had got it working, however I realized a bug. I can only put one word as the dropdown selections. Any option with more than one word will break.
Here's my code below for html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Tables</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/showhide.js"></script>
</head>
<body>
<h2>HTML Table</h2>
<!-- Drop Down Begin -->
<div id="benefits" style="display: inline-block;">
Benefits
</div>
<div id="skyecc" style="display: inline-block;">
SKYECC
</div>
<div id="option1" style="display: inline-block;">
<select class="selectOption">
<option>Analytics1</option>
<option>Translation1</option>
<option>Poll1</option>
</select>
</div>
<div id="option2" style="display: inline-block;">
<select class="selectOption2">
<option>Analytics2</option>
<option>Translation2</option>
<option>Poll2</option>
</select>
</div>
<!-- Drop Down End -->
<br><br>
<!-- Table and Drop Down Results Start -->
<div id="changingArea" style="display: inline-block;">
<div id="Analytics1" class="desc">
<table style="float: left;">
<tr>
<td>Analytics P1</td>
</tr>
<tr>
<td>Analytics P2</td>
</tr>
<tr>
<td>Analytics P3</td>
</tr>
</table>
</div>
<div id="Translation1" class="desc">
<table style="float: left;">
<tr>
<td>Translation P1</td>
</tr>
<tr>
<td>Translation P2</td>
</tr>
<tr>
<td>Translation P3</td>
</tr>
</table>
</div>
<div id="Poll1" class="desc">
<table style="float: left;">
<tr>
<td>Poll P1</td>
</tr>
<tr>
<td>Poll P2</td>
</tr>
<tr>
<td>Poll P3</td>
</tr>
</table>
</div>
</div>
<div id="changingArea2" style="display: inline-block;">
<div id="Analytics2" class="desc2">
<table style="float: left;">
<tr>
<td>Analytics T1</td>
</tr>
<tr>
<td>Analytics T2</td>
</tr>
<tr>
<td>Analytics T3</td>
</tr>
</table>
</div>
<div id="Translation2" class="desc2">
<table style="float: left;">
<tr>
<td>Translation2 T1</td>
</tr>
<tr>
<td>Translation2 T2</td>
</tr>
<tr>
<td>Translation2 T3</td>
</tr>
</table>
</div>
<div id="Poll2" class="desc2">
<table style="float: left;">
<tr>
<td>Poll2 T1</td>
</tr>
<tr>
<td>Poll2 T2</td>
</tr>
<tr>
<td>Poll2 T3</td>
</tr>
</table>
</div>
</div>
<!-- Table and Drop Down Results End -->
</body>
</html>
Here's my code for css:
h2 {
text-align: center;
}
.desc {display: none;}
Heres my js:
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
$(function(){
$('.selectOption2').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc2").hide();
$('#' + selected).show();
}).change()
});
As i'm a complete noob when it comes to js, any help, suggestions, or insights would be much appreciated.
Thanks again in advance!
That's because you can't have spaces in ID. If your option is two words then this line
$('#' + selected).show();
is selecting for #two words - tag words within the element with ID two.
Usually things like this are done by using a concatenated values for the IDs as well as the option values, while leaving the option text readable.
Make your select like this
<select class="selectOption">
<option value="analytics1">Analytics 1</option>
<option value="translation1">Translation 1</option>
<option value="poll1">Poll 1</option>
</select>
And you can retrieve the selected value with a simple $(this).val() instead of finding the selected option and retrieving text or the value attribute from it.
Related
I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
I'm using DataTables with the columns.render option to implement custom sorting for a table. That works fine when the logic within the sort function only depends on static data. However, I'd like to provide some controls to my users controlling how the sorting should happen. The problem is that it seems like DataTables is caching the first sort result, so when the user tries to change the sorting controls it doesn't have any effect.
In short, I'd like to have a dynamic sort function.
Obviously this is best explained with an example. The idea is to allow the "Info" column to be sorted either by "customer name" or "price", depending on what the user selects in the radio above the table. Run it and you'll see that the sorting only works for the initial radio selection.
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Allan answered this question over on the DataTables forums. First class support, as always!
Short answer is that DataTables is indeed caching the sort result. You need to invalidate the data in the table (via row().invalidate() or rows().invalidate()) in order to recompute the sort order.
This does the trick:
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
Here's the full example from above including this fix:
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I just want to add this form as user click on add button.Every time user click on add button a new form expand befor add button and also when user click on delete button it will delete all the form one by one but except the parent one.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2"><input type="text" name="title" id="awtitle"></td>
</tr>
<tr>
<td>Location</td>
<td colspan="2" ><input type="text"></td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select> <option value="" disabled selected>1</option>
</select>
<select><option value="" disabled selected>week<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select> <option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td><label>Key Skill Used</label></td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
<button id="minus">delete</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
So,i dont know how to achieve this using javascript.
-try this one.
MY HTML
<script type="text/javascript" src="../js/jquery.min.js"></script>
<section id="main-content">
<section class="wrapper">
<!-- BASIC FORM ELELEMNTS -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>
<form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
<input type="hidden" class="form-control" name="user_id" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Picture 1</label>
<div class="col-sm-10 upload_div">
<div style="float:left;width:30%;">
<input type="file" name="userfile[]">
</div>
<!-- <div style="width:70%;">
Add
Delete
</div> -->
</div>
</div>
<div class="other_files">
</div>
<div class="form-group">
<div class="col-sm-10">
Add
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
</div>
</div><!-- col-lg-12-->
</div><!-- /row -->
</section>
</section>
MY JS CODE:
<script type="text/javascript">
$(document).ready(function(){
var max_upload=5;
var addbutton=$('.add_btn');
var wrapper=$('.other_files');
var x=1;
$(addbutton).click(function(){
if(x < max_upload)
{
x++;
var new_html='<div class="form-group">';
new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';
new_html+='<div class="col-sm-10 upload_div">';
new_html+='<div style="float:left;width:30%;">';
new_html+='<input type="file" name="userfile[]">';
new_html+='</div>';
new_html+='<div style="width:70%;">';
new_html+='Delete';
new_html+='</div>';
new_html+='</div>';
new_html+='</div>';
wrapper.append(new_html);
}
});
$(wrapper).on('click','.delete_class',function(e){
e.preventDefault();
$(this).parent().parent().parent().remove();
x--;
});
});
</script>
First of all remove delete from your original form so that you can preserve deleting of parent form. You can add it dynamically on cloned forms as below:
var id=0;
$(document).ready(function() {
//attach a click event to add button whose id begins with plus, since id's have
//to be unique in DOM, we will be generating new id as in plus1, plus2 etc.,
//when we clone the form and before we append it. So the below selector means
//attach click events to those buttons whose id begins with plus. ^= means begins with
$(document).on('click',"button[id^=plus]",function(e){
e.preventDefault(); //prevent default action
//create a delete button html
var deleteBtn=$('<button id="minus">delete</button>');
//clone the parent form which will be in first
var clonedForm=$('form:first').clone();
//you can also do var clonedForm=$("#internship").clone();
id++; //increment the global id
//loop through each element which contains id property and replace with a new one
//to maintain uniqueness
clonedForm.find('[id]').each(function(){
var $el=$(this); //get the reference to element
$el.attr('id',$el.attr('id')+id); //replace its id with new one
});
deleteBtn.attr('id',deleteBtn.attr('id')+id);//replace delete button's id
clonedForm.attr('id',clonedForm.attr('id')+id); //replace cloned form's id
//append deleteBtn to td where add exists
clonedForm.find("td[id^=training]").append(deleteBtn);
//append cloned form to inner-aw-div
clonedForm.appendTo(".inner-aw-div");
});
//delete event to delete the closest form
$(document).on('click',"[id^=minus]",function(){
$(this).closest('form').remove(); //just remove the parent form
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2">
<input type="text" name="title" id="awtitle">
</td>
</tr>
<tr>
<td>Location</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select>
<option value="" disabled selected>1</option>
</select>
<select>
<option value="" disabled selected>week
<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select>
<option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td>
<label>Key Skill Used</label>
</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
</td>
</tr>
</table>
</form>
</div>
I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?
Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().