Why is my DataTables plugin not working at all? - javascript

I've been trying to make the DataTables plugin work but I can't manage it. Here is the entire html code of my page. The apache server shows no error about not finding the css or js files. Here is my entire html code and the relevant js code since I have not really a clue where the problem might be.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap extra CSS -->
<link href="DataTables/datatables.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/tutorial.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="navbar">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">ASDB</h3>
<nav>
<ul class="nav masthead-nav">
<li>Home</li>
<li>Background</li>
<li class="dropdown active">
Database access<span class="caret"></span>
<ul class="dropdown-menu">
<li>Input Form</li>
<li class="divider"></li>
<li class="active">Query the database</li>
<li class="divider"></li>
<li>Tutorial</li>
<li>References</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="group">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a data-toggle="collapse" href="#dq" data-parent="#group">
Database queries
</a>
</li>
<li>
<a data-toggle="collapse" href="#im" data-parent="#group">
IMs
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="accordion-group">
<div class="collapse in" id="dq">
<h1>Database queries</h1>
<p>Have fun!!</p>
</div>
<div class="collapse" id="im">
<h1>IMs</h1>
<table id="ind-table" class="display"><thead><tr><th>IMs</th><th>Number of studies</th></tr></thead><tbody>
<tr><td>First IM</td>
<td>100</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="first_im"></label>
</div>
</td>
</tr>
<tr><td>Second IM</td>
<td>12</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="second_im"></label>
</div>
</td>
</tr>
<tr><td>Third IM</td>
<td>153</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="third_im"></label>
</div>
</td>
</tr>
</tbody></table>
<h3><button class="btn btn-default"><b>Visualize</b></button></h3>
<ul>
<li>First IM: Wikipedia Link</li>
<li>Second IM: Wikipedia Link</li>
<li>Third IM: Wikipedia Link</li>
</ul>
</div>
</div>
Toggle Menu
<!-- </div> -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script src="js/query.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The code on query.js is
$(document).ready(function() {
$('#ind-table').dataTable( {
"order": [[ 2, "desc" ]]
} );
} );
After running this code my table is not getting any of the formatting that is supposed to come with DataTables. Am I missing something?


You need to put three <th></th> tags in the <thead> section. Then the problem will be solved
<thead>
<tr>
<th>IMs</th>
<th>Number of studies</th>
<th> </th>
</tr>
</thead>

Related

Make div disappear when list from drop down menu is selected

I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>

Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })

making an angular app from html to render data from http rest endpoint using $http

I am an absolute beginner with angularjs. My problem statement is to fetch the data from the database and show it as a grid. I am trying to render the data from the rest end point on clicking the anchor tag "Data Profiling". what is the best way to do it.
This is my first post in stackoverflow so please excuse any mistakes in the post.
<!DOCTYPE html>
<html lang="en" ng-app="d2vapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>D2V</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<a name="about"></a>
<div class="intro-header" ng-controller="d2vappcontroller">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Data to Value</h1>
<h3>Your one stop data explorer</h3>
<hr class="intro-divider">
<ul class="list-group">
<table align='center' width=100%>
<tr>
<td>
<span class="network-name">Data Catalogue</span></br></br>
</td>
<td>
<span class="network-name">Data Exploration</span></br></br>
</td>
</tr>
<tr>
<td>
<span class="dataprofiling">Data Profiling</span></br></br>
</td>
<td>
<span class="network-name">API Catalogue</span></br></br>
</td>
<tr>
<td>
<span class="network-name">RUNDECK</span></br></br>
</td>
<td>
<span class="">Infra Management</span></br></br>
</td>
</tr>
</table>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Cisco 2016. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- AngularJS javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>

In your controller you have to inject the $http and $scope
angular.module('d2vapp').controller('d2vappcontroller' , function($scope, $http){
$scope.getDataProfiling = function(){
$http.get('path/to/your/route')
.success(function(response){
//do something with your response
})
.error(function(error){
//handle your error
});
}
});
In your html add the click action
<span class="dataprofiling">Data Profiling</span></br></br>
NOTE: Please go through the angularjs documentation for better understanding how various components of angular work

Error in jQuery DatePicker

I need a DatePicker element in my page. I have the below code already in place:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
#{
ViewBag.Title = "Check Printing";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td>#Html.DropDownList("list", ViewData["list"] as SelectList)</td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").each(function () {
$(this).datepicker();
});
});
</script>
}
However, when i run this code, it gives me the following error:
Unhandled exception at line 126, column 17 in http://localhost:53130/CheckPrinting/CheckPrinting
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'
I'm not sure what's happening, everything looks like it's set up right?
Thanks
Edit: Here is the "Dynamic" code:
<!DOCTYPE html>
<html>
<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>Check Printing - SAAS</title>
<meta name="description" content="Student Accounting and Allotment System" />
<link href="/Content/Site.less" rel="stylesheet"/>
<link href="/Content/custom/custom.less" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<!--Masthead-->
<div class="masthead">
<!--Utility Bar-->
<div class="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="navbar-header" style="margin-left:30px; margin-top:20px;">
<object data="/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
<div style="float:right; margin-top:-20px;">
<h2>SAAS</h2>
<h6>Student Accounting and Allotment System</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
John Doe <b class="caret" style="margin-left:20px;"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--Main Navigation-->
<div class="navbar navbar-primary">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
<li></i> Check Register</li>
<li></i> Reconcile</li>
<li></i> Student Info</li>
<li></i> Check Printing</li>
<li></i> Reissues</li>
<li></i> Centers</li>
<li></i> Reports</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content" style="margin-top:-39px;">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
<hr />
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").each(function () {
$(this).datepicker();
});
});
</script>
</body>
</html>
Layout.cshtml
<!DOCTYPE html>
<html>
<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>#ViewBag.Title - SAAS</title>
<meta name="description" content="Student Accounting and Allotment System" />
#Styles.Render("~/bundles/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!--Masthead-->
<div class="masthead">
<!--Utility Bar-->
<div class="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="navbar-header" style="margin-left:30px; margin-top:20px;">
<object data="~/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
<div style="float:right; margin-top:-20px;">
<h2>SAAS</h2>
<h6>Student Accounting and Allotment System</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
John Doe <b class="caret" style="margin-left:20px;"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--Main Navigation-->
<div class="navbar navbar-primary">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
<li class="#Url.MakeActive("", "CheckRegister")"></i> Check Register</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reconcile</li>
<li class="#Url.MakeActive("Student")"></i> Student Info</li>
<li class="#Url.MakeActive("About", "Home")"></i> Check Printing</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reissues</li>
<li class="#Url.MakeActive("About", "Home")"></i> Centers</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reports</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content" style="margin-top:-39px;">
#RenderBody()
<hr />
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#*#Scripts.Render("~/bundles/dataTables")*#
#*#Scripts.Render("~/bundles/custom")*#
#*#Scripts.Render("~/bundles/StudentAllotments")*#
#RenderSection("scripts", required: false)
</body>
</html>

It's working fine here.
I used your code in this example, just remove a lot of the menu stuff to keep it simple. If this example is not working for you, then it may be an error specific to your development environment and/or browser.
$(document).ready(function () {
$("#datepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
I'm assuming that you're using Visual Studio (based on your code) - there's a lot of options to be able to debug your code and see exactly where the error is happening.
Check simple things - make sure jQuery is loaded first before jQuery UI, jQuery should only be loaded one time on the page. Are there scripts interfering with jQuery in some way? If all of these are okay, then start inserting breakpoints and step through it until you find the problem.
If you can create a fiddle or a snippet that reproduces your exact problem, then I'd be happy to look into it further for you, but without being on your machine - I can't reproduce this problem that you're having.

I think if you just do that, it should work :
$(document).ready(function () {
$("#datepicker").datepicker();
});
Since #datepicker is an id

Bootstrap 3.3 - Navbar not working on mobile

I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>

Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.

How to make id of elements written by JSTL available for scripting?

I'm developing a web app using Twitter-Bootstrap editable and Java Servlet Backend.
Using JSTL to render table data, and hooking up editable data form is not working.
JS developer console, show undefined, so it's not recognizing element id's produced inside foreach in JSTL.
Tried to wrap editable JS call on document ready, does not work.
I guess the problem is how to make id of elements written by JSTL available for scripting.
<%--
Document : index
Created on : 20/Abr/2013, 23:52:35
Author : Arthur
--%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap DatePicker CSS-->
<link href="css/datepicker.css" rel="stylesheet" media="screen">
<!-- Bootstrap Editable CSS-->
<link href="css/bootstrap-editable.css" rel="stylesheet" media="screen">
<!-- JQUERY -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap JS-->
<script src="js/bootstrap-2.0.2.js"></script>
<!-- Bootstrap DatePicker JS-->
<script src="js/bootstrap-datepicker.js"></script>
<!-- Bootstrap EdiTable JS-->
<script src="js/bootstrap-editable.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.dropdown-toggle').dropdown();
});//]]>
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
background-color: #f5f5f5;
}
</style>
<title>.:StaffGest:.</title>
</head>
<body>
<!-- <div class="navbar navbar-inverse navbar-fixed-top">-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">.:StaffGest:.</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Funcionários<b class="caret"></b>
<ul class="dropdown-menu">
<li>Novo</li>
<li>Editar</li>
<li>Apagar</li>
<li class="divider"></li>
<li class="nav-header">Pesquisar</li>
<li>Pesquisar Funcionário</li>
<li>Listar Todos</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="container">
<h1>Lista Funcionários:</h1>
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Data Nascimento</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="employee">
<tr>
<td>${employee.firstName}</td>
<td><a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.lastName}</td>
<td><a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"><fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/></td>
<td><a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.email}</td> </tr>
</c:forEach>
</tbody>
</table>
</div> <!-- /container -->
<script>
$('#firstName').editable({
});
$('#lastName').editable({
});
$('#dob').editable({
});
$('#email').editable({
});
</script>
</body>
</html>

Here's your mistake:
<c:forEach ...>
<a id="firstName" ...>
<a id="lastName" ...>
<a id="dob" ...>
<a id="email" ...>
</c:forEach>
Multiple elements with same id is illegal in HTML. The behavior in HTML DOM and JS is unspecified.
Give them an unique ID based on e.g. iteration index or iterated item's ID or, better, if they need to behave the same in editable(), just the same class name:
<c:forEach ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
</c:forEach>
This way you can keep your JS DRY:
<script>
$('.editable').editable({
});
</script>

Categories