JavaScript issue only one responsive mode (mobile) - javascript

I have an HTML page that has a dropdown. If I change the dropdown selected option, it displays the value in the console. This is working well in a desktop browser version. The issue is when I change the mode in my browser to mobile or use a real mobile. No matter what dropdown option I select, it always shows the value of the first one. Is there some conflict with the responsive libraries I'm using that I seem not able to figure out? Thanks.
Here is my code:
<!doctype html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Admin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap.min.js"></script>
<style>
table{
margin-top: 50px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Admin</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">
Log Out<span class="sr-only">(current)</span>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<table id="submissions" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Preview</th>
<th>Text</th>
<th>Status</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td>
Ya, ya la fuente se secó, el canario ya<br>murió
Pero aquí, no hay novedad
No, no te<br>preocupes por mí
Aquí todo sigue igual, como<br>cuando estabas tú
</td>
<td>
<select class="form-control" id="states_1" onchange="changeState(this.id);">
<option value="A" selected="selected">Approved</option>
<option value="P">Pending</option>
<option value="R">Rejected</option>
</select>
<br/>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /container -->
<script>
$('#submissions').DataTable();
function changeState(id) {
console.log($('#'+id).val());
}
</script>
</body>
</html>

This code show correct console.logs on my phone device and "switched to phone" browser. Maybe you are testing another code because youre attached mobile view is not like what im seeing.
edit:
replace youre function
function changeState(id) {
console.log($('#'+id).val());
}
with this:
$("body").on("change", "#states_1", function(){
console.log($(this).val());
})
and remove inline "onchange="changeState(this.id);" on select tag, to became like this:
<select class="form-control" id="states_1">
<option value="A"selected="selected">Approved</option>
<option value="P">Pending</option>
<option value="R">Rejected</option>
</select>

Related

Navigation toggle button in bootstrap 3 not dropping down (Javascript issue?)

Upon making the screen a smaller size, my navigation toggle button is not showing the navigation menu when I click on it. I have racked my brains to solve this and think JavaScript is not active. Despite this, I still cant make it work properly.
JQuery is working and has been placed before JavaScript.
I've tried the web link to JS but this does not seem to work.
I've tried moving the JS files in my folder about and this again doesn't seem to work.
Code is below,
<!DOCTYPE html>
<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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar-brand {font-size:180%;}
.myImage {width:100%;
height:600px;
background-size:cover;}
.background {background-color:black;}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"></div>
<!--Nav toggle button on mobile-->
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
<li class="">About
<li class="">Download
</ul>
<!--log in section-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="email"
placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password"
placeholder="Password"
class="form-control">
</div>
<button type="button" class="btn btn-success">Log In</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Thanks for your help.
You've made a typo on data-target:
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
Instead it should be:
<button class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">

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.

Bootstrap navbar won't close

My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>
Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.

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