I want to implement JQuery Datepicker. I added to my JSF code the JavaScript. This is the HTML output:
<?xml version='1.0' encoding='UTF-8' ?>
<!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" lang="en"><head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script><script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script></head><body>
<!-- demo inset for with validator -->
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Sessions
</li>
<li>Application
<ul>
<li>Glassfish</li>
</ul>
</li>
<li>Linux
</li>
<li>Database
<ul>
<li>History</li>
</ul>
</li>
</ul>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt13" value="j_idt13" />
<div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"><table>
<tbody>
<tr>
<td>Session ID</td>
<td><input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /><span id="j_idt13:sessionidMessage"></span></td>
</tr>
<tr>
<td>Date</td>
<td><input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /></td>
</tr>
<tr>
<td>Login Time</td>
<td><input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /></td>
</tr>
<tr>
<td>Last Refresh Time</td>
<td><input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /></td>
</tr>
<tr>
<td>User IP</td>
<td><input id="j_idt13:userip" type="text" name="j_idt13:userip" /></td>
</tr>
</tbody>
</table>
</div>
<div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px"><input type="submit" name="j_idt13:j_idt32" value="Create User" />
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autocomplete="off" />
</form>
</div>
</div>
</div></body>
</html>
But when I click on the input filed nothing happens. Is there something missing? Into the example that I found the calendar was using <div id="datepicker"></div> to be displayed. I use input field in my example.
Best Wishes
EDIT
I added div to visualize only the calendar.
I added the div here:
<h:panelGrid columns="2">
<h:panelGroup>Session ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"
validator="#{ValidatorController.validatebean}">
<f:ajax event="blur" render="sessionidMessage" />
</h:inputText>
<h:message id="sessionidMessage" for="sessionid" />
</h:panelGroup>
<h:panelGroup>Date</h:panelGroup>
<h:panelGroup>
<div id="datepicker"></div>
<h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" >
</h:inputText>
</h:panelGroup>
<h:panelGroup>Login Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Last Refresh Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>User IP</h:panelGroup>
<h:panelGroup>
<h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
</h:panelGrid>
I would like to open the calendar like this example here - when I click on the input field.
It seems that there is other way to call the calendar in JSF.
EDIT 2
Is this JavaScript correct?
function calendar(){
// Datepicker
datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
}
I will call it with this code:
<h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" >
datepicker id is missed here. you are calling wrong id . try like this and you used : in your attribute, by using slash
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
You need to make "#datepicker" the ID of the input box.
e.g.
$(function(){
// Datepicker
$('#j_idt13:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
I'd recomend researching jquery selectors.
HIya Demo http://jsfiddle.net/8Hp26/
your id is different it looks like you are using some kind of template or user controller to generate the html, in the demo I have added a new class = foo or you can try and escape the : in you JQuery.
Note to use escape add \\: but adding class should do the trick like shown in demo.
hope this helps.
code
$(function(){
// Datepicker
// $('#datepicker').datepicker({
$('.foo').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});β
<script type="text/javascript">
$(function(){
// Datepicker
$('#j_idt13:logintime').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script>
Change it to this. Your selector was wrong.
The id of your input field is not datepicker but j_idt13:datepicker.
You have to use this id when calling the datepicker component:
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
The \\ is for escaping the : as it is otherwise used by jQuery.
However I would recommend an using an id without : in it.
This is JSF specific. You have to use styleClass="datepicker" in order to call the #datepicker JS.
Related
I am having trouble using two plugins. I have tried:
https://github.com/snikch/jquery.dirtyforms
https://github.com/codedance/jquery.AreYouSure
In my code I am using:
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
Or
<script>
$(funtion() {
$('form').areYouSure();
});
</script>
within my header and when I change elements of the form and try to refresh I get no dialouge. I am struggling to work out how I can tell if it's being called at all.
I can't for the life of me get it to work. Any ideas?
Below is a view source example of a page with it in:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<link rel="stylesheet" href="styles/jquery.datetimepicker.css?v=1.0">
<script src="scripts/jquery191.min.js"></script>
<script src="scripts/mdetect.js" type="text/javascript"></script>
<script type="text/javascript">
if(MobileEsp.DetectTierIphone() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.4, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
if(MobileEsp.DetectTierTablet() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
</script>
<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="scripts/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="scripts/widget-print.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTHOXfueJyei11NqPw3rRjhjj_yjcdV-E&callback=initMap"></script>
<script src="scripts/jquery.datetimepicker.full.min.js"></script>
<script src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
<script>
$(document).ready(function(){
$("BodyshopAddress").each(function(){
var embed ="<iframe width='200' height='200' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' style='margin-left:30px;' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed&iwloc'></iframe>";
$(this).html(embed);
});
});
</script>
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
...
</div>
<div class="logged_container">
...
</div>
<div class="navigation_container">
...
</div>
<div style="position:absolute; top:0; right:0; margin-right:10px; margin-top:5px; background-color:#4771A5; border-radius:3px; padding:5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 25px rgba(82, 168, 236, 0.7);">
<form id="myForm" action="" method="POST">
<input type='text' size='20' name='Poke' placeholder='Magic Poking Stick' style="margin-right:5px; vertical-align:middle; text-align:center;"> <input type='submit' name='BadBoyPoke' value='' class='submit' title='Search' maxlength="3" style='background-image:url("img/bms121.png"); vertical-align:middle;' >
</form>
</div>
<script>
$(document).ready(function()
{
$('#RepairerNetworkTable').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'stickyHeaders', 'filter', 'print' ],
widgetOptions: {
stickyHeaders_attachTo : '.wrapper',
print_title : '', // this option > caption > table id > "table"
print_dataAttrib : 'data-name', // header attrib containing modified header name
print_rows : 'f', // (a)ll, (v)isible or (f)iltered
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : 'styles/tablePrint.css', // add the url of your print stylesheet
print_callback : function(config, $table, printStyle){
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}
}
});
$('.print').click(function(){
$('.tablesorter').trigger('printTable');
});
}
);
</script>
<div class="content">
<div class="contentTableView">
<a href="#" class="print" style="float:right; margin-right:20px;">
<img src="img/bms91.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Print</a>
</div>
<br /><br />
<div class="GridViewContainer wrapper">
<table id="RepairerNetworkTable" class="tablesorter">
...
</table>
</div>
<br />
<div class="TabbedViewContainer">
<div class="TabbedNavContainer">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<form action="" method="post">
<a style="text-decoration:underline !important;" href="repairer_network.php?RepNetID=9&RepNetTab=Info">Info</a>
Work Providers / Brokers
Bodyshops
<input name="submitInfo" type="submit" value="Change Repairer Network's Info" />
</div>
</div>
<div style="text-align:left; padding-left:10px; padding-top:10px;">
<span style="font-size: 12px; font-weight:bold;">Repairer Network Info: </span>
<br />
<hr size='1' style=" margin: 5px 10px 5px 0; ">
<table style="float:left;">
<tr>
<td>Name: </td>
<td><input name="BusinessName" type="text" size="30" value="AI Claims Solutions (UK) Ltd"/> </td>
</tr>
<tr>
<td>Email: </td>
<td><input name="BusinessEmail" type="text" size="30" value=""/></td>
</tr>
<tr>
<td>Phone: </td>
<td><input name="BusinessPhone" type="text" size="30" value=""/></td>
</tr>
</table>
</form>
</div>
</div>
<br />
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
It's simple to use. Just add the following line to your page's ready function:
$('form').areYouSure(); Are You Sure? - A light "dirty forms" JQuery Plugin
$(document).ready(function(){
$('form').areYouSure();
});
That's what the plugin says... it listen to the element $('form') (you could use an id or class) and when the "event" "areYouSure()" occurs, the plugin will trigger...
I use bootstrap-datetimepicker in my tornado project. I tried the sample in the fold "sample in bootstrap v3", and it worked fine. But when I use it in my tornado project, it occured a bug:
click the calendar button
click the left arrow key
click the left arrow key again
I set it to years view when first click the button. And when I click the left arrow, it should change to other years before, but it goes to the mouths view. Then I click the left arrow again, it goes to the days view. It not always performance wrong this way, sometimes it works well. I do not know what is the problem.
My code below:
<meta charset='utf-8'>
<html>
<head>
<title>USTC Club</title>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<link href='http://localhost:8888/static/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src='http://localhost:8888/static/jquery-2.1.1.min.js'></script>
<script src='http://localhost:8888/static/bootstrap.min.js'></script>
</head>
<body>
<link href='http://localhost:8888/static/bootstrap-datetimepicker.min.css' rel='stylesheet' type='text/css' media='screen'>
<form action='/setting' method='post' class='well form-horizontal col-md-8' enctype='multipart/form-data'>
<div class='form-group'>
<label class='col-md-2 control-label'>birthday</label>
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd">
<input type='text' name='birth' class="form-control" value="03 δΈζ 1980" size='16' readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<button type='submit' class='btn btn-danger'>submit</button>
</form>
<script src='http://localhost:8888/static/bootstrap-datetimepicker.min.js' charset='utf-8'></script>
<script src='http://localhost:8888/static/bootstrap-datetimepicker.zh-CN.js' charset='utf-8'></script>
<script>
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 0,
todayBtn: 0,
autoclose: 0,
todayHighlight: 1,
startView: 4,
minView: 2,
forceParse: 0
});
</script>
</body>
</html>
All the JS and CSS files are in the path "/static" from my localhost:8888 server. I test that when the html file locate JS and CSS files in the local, the calendar work well. For example, the
<link href='http://localhost:8888/static/bootstrap.min.css' rel='stylesheet' type='text/css'>
changed into
<link href='bootstrap.min.css' rel='stylesheet' type='text/css'>
, the calendar work well. Why is that?
THIS IS META.PHP . I AM JUST PASSING SESSION VALUE USING JAVA SCRIPT
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/laddubox.js"></script>
<script src="./js/pop.js"></script>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
var page = "<?php echo $_SESSION['pa'] ?>";
</script>
<title><?=$title?></title>
</head>
THIS IS A POP-UP IN JS . NOW I WANT THE SESSION VALUE IN THIS POP-UP AND I HAVE CREATED THE HIDDEN INPUT FIELD TO PASS THE VALUE TO ANOTHER PAGE
function sin() {
var lbox = new LadduBox();
lbox.init({
"width": 500,
"height": 300,
"HTML": '<div style="width:495px; height:272px; background-color:#ffffff; border:2px solid orange;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="485" height="270" style="font-family:arial; font-size:20px; font-weight:bold;"><tr><td align="right" colspan="3"><img src="images/untitled-1.png" style="margin:10px; cursor:pointer;" id="btnClose"/></td></tr><tr><td height="30" colspan="3"><div style="font-family:arial; font-size:20px; color:#ff6c00; padding-left:200px;">SIGN IN</div></td></tr><tr><td><form method="get"><div style="margin:10px; font-size:14px;">EMAIL<br><input type="text" name="email"/></div><br><div style="margin-left:10px; margin-top:-10px; font-size:14px;">PASSWORD<br><input type="hidden" name="page" value=""/><input type="text" name="paswrd"/></div><br><input type="submit" value="submit" class="subbg"/></form></td><td><img src="images/orbar.png" /></td><td align="center"><img src="images/redfb.png" style="margin-bottom:7px;"/><br><img src="images/redgoogle.png" style="margin-bottom:7px;"/><br><img src="images/redtwitter.png" /></td></tr></table></div>',
'btnCloseId': '#btnClose'
});
lbox.fire();
}
SO PLEASE IF ANYONE KNOWS THE ANSWERE PLEASE HELP ME
You have this HTML snippet:
<input type="hidden" name="page" value=""/>
Just insert PHP value there as:
<input type="hidden" name="page" value="<?php echo $_SESSION['pa'] ?>"/>
Is it as simple as you are just missing the semicolon at the end of the php statement?
var page = "";
I am using a timepicker to select the time with an interval of 15 minutes. I use the timepicker from this link.
I am unable to add the timepicker to the input text field using the onclick function. Here is some sample code of what I am trying to achieve. Please help me solve this issue.
index.html
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
.st{}
.et{}
#bod { font-size: small; margin:0px 0px 0px 0px; }
body{font-size:10px;}
......
<div id="bod">
<input type="text" id="timepicker_start1" value="" class="st"/>
<input type="text" id="timepicker_end1" value="" class="et"/>
</div>
<input type="button" id="Add" name="Add" value="Add" onClick="add()" />
<input type="hidden" id="tot" name="tot" value="1"/>
...
The javascript part of the page is:
<script type="text/javascript">
function add(){
var tot=document.getElementById("tot").value;
tot=parseInt(tot,10);
var i=tot+1;
$('#bod').append(i+". ");
var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
$('#bod').append(" ");
$('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
document.getElementById("tot").value=i;
}
$(document).ready(function(e) {
$('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
});
</script>
You got a typo: it's timepicker not timpicker.
Other than that you're good - the script is working - http://jsfiddle.net/FNww8/
I'm working in a ASP.NET MVC 3 application, and I'm trying to use jQuery's Sortable. I already have a jQuery DatePicker working. In my View I have the following code:
<link href=#Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src=#Url.Content("~/Scripts/jquery.ui.core.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.datepicker.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>
Here is the initializer code:
<script type="text/javascript">
$(document).ready(function () {
$("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#MenuPages").sortable("enable");
});
</script>
The DatePicker work seamlessly. Here is the code:
<fieldset>
<legend>Search history</legend>
<p>
Begin: <br />
<input type="text" id="DateBegin" name="DateBegin" value="" />
<br />
End: <br />
<input type="text" id="DataEnd" name="DataEnd" value=""/>
<br />
</p>
<button>Search</button>
</fieldset>
But the Sortable does not work. The code:
<ul name="MenuPages" id="MenuPages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.
I don't know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there's also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).
Don't know where the source of the error could be.
Instead of
$("#MenuPages").sortable("enable");
try
$("#MenuPages").sortable();
to initialize the sortable.