Error in jQuery DatePicker - javascript

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

Related

JavaScript issue only one responsive mode (mobile)

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>

Why is my DataTables plugin not working at all?

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>

Custom Javascript not being loaded into mvc 4 view on initial page load

I have a MVC 4 application which uses jquery mobile, i also have my own .JS file where all my functionality is stored.
When i run the application and navigate to my selected view and view my page source all of the scripts files are loaded except my custom script :/ i have tried placing this script in different places within my view and im still having no success.
If i F5 the page then my custom script files are loaded and everything works as it should, how would i get my custom script to load into my page on the initial page load?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Index</title>
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>
</head>
<body>
<div data-role="page">
<form id="InspectionForm" method="post">
<input id="LoggedUserName" type="hidden" value="#Request.Cookies["UserInfo"]["UserName"]" />
<div data-role="navbar">
<ul>
<li>Back</li>
</ul>
</div>
<div id="QuestionBuilder" style="padding: 10px 5px;">
<div data-role="collapsible-set">
#foreach (var item in Model)
{
<div data-role="collapsible" data-theme="d" id="expandable-#item.QuestionID">
<h3 onclick="checkQuestion(#item.QuestionID)">#Html.DisplayFor(modelItem => item.QuestionNumber) . #Html.DisplayFor(modelItem => item.Question)</h3>
<table width="100%">
<tr>
<td>
<div class="containing-element">
<style>
.containing-element .ui-slider-switch
{
width: 8em;
}
</style>
<select name="QuestionOptional-#item.QuestionID" id="QuestionOptional-#item.QuestionID" data-role="slider" data-questionid="#item.QuestionID"
onchange="SetQuestionOptional(#item.QuestionID,#item.SectionID,#item.SubSectionID)">
<option value="off">Optional</option>
<option value="on">Mandatory</option>
</select>
</div>
</td>
<td style="text-align: right;">
<a onclick="ShowDetails(#item.QuestionID)" href="#DetailsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Details</a>
<a onclick="ShowComments(#item.QuestionID)" href="#CommentsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Comments</a>
<a onclick="ShowActions(#item.QuestionID)" href="#ActionsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Actions</a>
</td>
</tr>
<tr>
<td colspan="2">
#if (item.QuestionTypeID == Convert.ToInt32(questionType.SingleSelect))
{
<fieldset data-role="controlgroup">
<input type="hidden" id="rBtnCheckedState" />
#foreach (var opt in item.Options)
{
<input type="radio" name="radio-choice" id="radio-choice-#opt.OptionID" value="#opt.QuestionText" data-mandatoryaction="#opt.IsMandatoryActions"
data-mandatorycomment="#opt.IsMandatoryComments" />
<label for="radio-choice-#opt.OptionID">#opt.QuestionText</label>
}
</fieldset>
}
</td>
</tr>
</table>
</div>
}
</div>
</div>
</form>
</div>
<div id="DetailsM" data-role="dialog">
</div>
<div id="ActionsM" data-role="dialog">
</div>
<div id="CommentsM" data-role="dialog">
</div>
</body>
</html>
Give your full path addresses in below references
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>

Bind Form from javascript Play framework

Is there a way to use this code:
Form<StatusSolicitacao> status = form(StatusSolicitacao.class).bindFromRequest();
But the data coming from a javascript?
--- More information ---
First i show the list:
<div id="backtabela">
<div id="tabela">
<table>
<tr><td>Cadastrar Status</td></tr>
<tr>
<td id="cabecalho">Descrição</td>
<td id="cabecalho">Acoes</td>
</tr>
#for(status <- lista){
<tr>
<td>#status.getDescricao()</td>
<td><img src="#routes.Assets.at("img/edit.png")" alt="" title="Editar"/>
<img src="#routes.Assets.at("img/erase.png")" alt="" title="Remover"/>
</td>
</tr>
}
</table>
</div>
</div>
Then i click on the Cadastrar Status to register a new data.
The form:
#(status: Form[StatusSolicitacao])
#import helper._
#implicitFieldConstructor = #{ FieldConstructor(formPattern.f) }
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<fieldset id="fieldset">
<legend>Novo Status</legend>
<div id="form">
<br/><br/><br/><br/><br/>
#form(routes.StatusController.cadastrarStatus()) {
<br/><br/><br/><br/><br/>
#inputText(status("descricao"), '_label -> "Descrição", '_help->"")
<div class="actions">
<input type="submit" value="Cadastrar" class="btn primary" id="botao">
</div>
</div>
</fieldset>
Cancelar
}
Note: All this content is inside the div nova in this html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Solicitação Compra</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("css/geral.css")">
<link rel="shortcut icon" type="img/png" href="#routes.Assets.at("img/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/init.js")" type="text/javascript"></script>
</head>
<body>
<div id="geral-flow">
<div id="topo">
<div id="logo" style="display:none;">
<img src="#routes.Assets.at("img/logotipo-pequeno.png")" alt="titulo" id="tituloPequeno"/>
</div>
<div id="acessos">
<div id="pesquisa">
<input type="text" name="search" id="search" value="Pesquisa"
onfocus="this.value=''" onblur="this.value='Pesquisa'"></input>
<ul></ul>
</div>
<div id="acessoRapido" >
</div>
</div>
</div>
<div id="conteudo">
<div id="titulo">
<ul>
<li style="background-position:-2px -107px;"><h2>Solicitações</h2></li>
</ul>
</div>
<div id="separador"></div>
<div id="menu">
<ul>
<li class="solicitacao">Solicitaçoes<br /></li>
<li class="departamento">Departamentos<br /></li>
<li class="responsavel">Responsavel<br /></li>
<li class="status">Status<br /></li>
</ul>
</div>
<div id="nova"></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
but when I save my new record on the bench in the back that html does not appear.
javaScript or not basically its a post request if your name attributes coincide the StatusSolicitacao attributes i believe it will work
else just use the following String attribute = Form.form().bindFromRequest().get("attribute");

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