I have followed the instructions given in the link
I had used jquery1.9.1.js and i had added the bootstrap-datepicker.js, datepicker.css to my page. when i click on the calender icon it was not responding, here is my code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<%# taglib uri="/tags/struts-html" prefix="html" %>
<%# taglib uri="/tags/struts-bean" prefix="bean" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Apply</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/css/mystyle.css" type="text/css" />
<link rel="stylesheet" href="styles/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/datapicker/css/datepicker.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 bg">
<table border="0">
<tr>
<td>Name</td><td colspan="5"><input type="text" value="<bean:write name="e" property="name" />" /></td>
</tr>
<br />
<tr>
<td>Leave type</td><td colspan="5"><select>
<option>---------select Leave type---------</option>
<option>Personal</option>
<option>Medical</option>
<option>Tour</option>
</select></td>
</tr>
<tr>
<td>Leave <br/> Balance</td><td colspan="5">
<bean:define id="bal" name="leave" property="balance" />
<html:text property="balance" value="<%=bal.toString() %>" />
</tr>
<tr>
<td>From</td><td colspan="2"><div class="form-group row">
<div class="col-xs-8">
<label class="control-label">My Label</label>
<div class="input-group date" data-datepicker="true" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
</td>
<td colspan="3"><select>
<option>-------select---------</option>
<option>session1</option>
<option>session2</option>
</select>
</td>
</tr>
<tr>
<td>To</td><td colspan="2"><input type="text"></td>
<td colspan="2"><select>
<option>-------select---------</option>
<option>session1</option>
<option>session2</option>
</select>
</td>
<td>Holidays</td>
</tr>
<tr>
<td>Days</td><td colspan="5">0</td>
</tr>
<tr>
<td>Forward To/Approver</td><td colspan="5"><select>
<option>PLEASE SELECT-001</option>
<option>PLEASE SELECT-002</option>
<option>PLEASE SELECT-003</option>
<option>PLEASE SELECT-004</option>
</select>
</td>
</tr>
<tr>
<td>Reason</td><td colspan="5"> <textarea cols="50"></textarea></td>
</tr>
<tr>
<td>Contact Details</td><td colspan="5"> <textarea cols="50"></textarea></td>
</tr>
<tr>
<td><button class="btn btn-primary">cc</button></td><td colspan="4"> <textarea cols="50"></textarea></td><td><button class="btn btn-primary">clear</button></td>
</tr>
<tr>
<td colspan="6">(Separate multiple emails with commas)</td>
</tr>
<tr>
<td colspan="6">show all levels reviewer</td>
</tr>
<tr>
<td colspan="6"><button class="btn btn-primary">apply</button> <button class="btn btn-primary">cancel</button></td>
</tr>
</table>
</html:form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="styles/datepicker/js/bootstrap-datepicker.js"></script>
<script src="styles/js/bootstrap.js"></script>
<script src="styles/js/jquery-1.9.1.js"></script>
<script src="styles/js/dropdown.js"></script>
</body>
</html>
Maybe it's better to place links in right order:
<script src="styles/js/jquery-1.9.1.js"></script>
<script src="styles/js/bootstrap.js"></script>
<script src="styles/datepicker/js/bootstrap-datepicker.js"></script>
<script src="styles/js/dropdown.js"></script>
Related
I have installed apim 2.6.0 . I created a prototyped api with inline implementation and uncommented the inline code.
But whenver we try to invoke the api in the api store , we are getting this unexpected response body. Tried creating other api but the response is the same.
Response Body
<!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">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>WSO2 API Manager</title>
<link href="../admin/css/global.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../styles/css/main.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../dialog/css/jqueryui/jqueryui-themeroller.css" rel="stylesheet" type="text/css"
media="all"/>
<link href="../dialog/css/dialog.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="../admin/css/carbonFormStyles.css">
<!--[if gte IE 8]>
<link href="../dialog/css/dialog-ie8.css" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<!--[if gte IE 7]>
<link href="../dialog/css/dialog-ie8.css" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<link rel="icon" href="../admin/images/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../admin/images/favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="../admin/js/csrfPrevention.js"></script>
<script type="text/javascript" src="../admin/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.form.js"></script>
<script type="text/javascript" src="../dialog/js/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="../admin/js/jquery.cookie.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="../admin/js/main.js"></script>
<script type="text/javascript" src="../admin/js/WSRequest.js"></script>
<script type="text/javascript" src="../admin/js/cookies.js"></script>
<script type="text/javascript" src="../admin/js/customControls.js"></script>
</head>
<script type="text/javascript">
if(getCookie('region1_configure_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region1_configure_menu', 'none','','','secure');
} else { setCookie('region1_configure_menu', 'none');
}
}
if(getCookie('region3_registry_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region3_registry_menu', 'none','','','secure');
} else { setCookie('region3_registry_menu', 'none');
}
}
if(getCookie('region4_monitor_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region4_monitor_menu', 'none','','','secure');
} else { setCookie('region4_monitor_menu', 'none');
}
}
if(getCookie('region5_tools_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region5_tools_menu', 'none','','','secure');
} else { setCookie('region5_tools_menu', 'none');
}
}
</script>
<body>
<noscript>
<div class="something-wrong">
<div class="title">JavaScript is disabled on your browser</div>
<div class="content">Please enable JavaScript or upgrade to a JavaScript-capable browser to use WSO2 Products.</div>
</div>
</noscript>
<!--[if lte IE 6]>
<div class="something-wrong">
<div class="title">Did you know that your Internet Explorer is out of date?</div>
<div class="content">To get the best possible experience using our website we recommend that you upgrade to a newer version.</div>
</div>
<![endif]-->
<div id="dcontainer"></div>
<script type="text/javascript" src="../dialog/js/dialog.js"></script>
<!-- JS imports for collapsible menu -->
<script src="../yui/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="../yui/build/animation/animation-min.js" type="text/javascript"></script>
<script src="../admin/js/template.js" type="text/javascript"></script>
<script src="../yui/build/yahoo/yahoo-min.js" type="text/javascript"></script>
<script src="../yui/build/selector/selector-min.js" type="text/javascript"></script>
<table id="main-table" border="0" cellspacing="0">
<tr>
<td id="header" colspan="3">
<!--[IF IE 7]>
<style>
div#header-div div.right-links{
position:absolute;
}
</style>
<![endif]-->
<div id="header-div">
<div class="right-logo">Management Console</div>
<div class="left-logo">
<img src="../admin/images/1px.gif" width="300px" height="32px"/>
</div>
<div class="middle-ad">
</div>
<div class="header-links">
<div class="right-links">
<ul>
<li class="right">
Sign-in
</li>
<li class="middle">|</li>
<li class="middle">
<a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation">Docs</a>
</li>
<li class="middle">|</li>
<li class="left">
<a target="_blank" href="../product/about.html">About</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="vertical-menu-container" id="vertical-menu-container" style="display:none;">
<div id="menu-panel-button0"></div>
<div id="menu-panel-button1" class="menu-panel-buttons"></div>
<div id="menu-panel-button2" class="menu-panel-buttons"></div>
<div id="menu-panel-button3" class="menu-panel-buttons"></div>
<div id="menu-panel-button4" class="menu-panel-buttons"></div>
<div id="menu-panel-button5" class="menu-panel-buttons"></div>
<div id="menu-panel-button_dummy" style="display:none"></div>
</td>
<td id="menu-panel" valign="top">
<table id="menu-table" border="0" cellspacing="0">
<tr>
<td id="region1">
<div id="menu"> <ul class="main"><li>Home</li><li id="region1_manage_menu" class="menu-header" onclick="mainMenuCollapse(this.childNodes[0])" style="cursor:pointer"><img src="../admin/images/up-arrow.gif" class="mMenuHeaders" id="region1_manage_menu"/>Manage</li><li class="normal"><ul class="sub"></ul></li> </ul></div>
</td>
</tr>
<tr>
<td id="region2">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region3">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region4">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region5">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td><img src="../admin/images/1px.gif" width="225px" height="1px"/></td>
</tr>
</table>
</td>
<td id="middle-content">
<table id="content-table" border="0" cellspacing="0">
<tr>
<td id="page-header-links">
<table class="page-header-links-table" cellspacing="0">
<tr>
<td class="breadcrumbs">
<table class="breadcrumb-table" cellspacing="0">
<tr>
<td>
<div id="breadcrumb-div"></div>
</td>
</tr>
</table>
</td>
<td class="page-header-help"><a href="./docs/userguide.html"
target="_blank">Help</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="body">
<img src="../admin/images/1px.gif" width="735px" height="1px"/>
<script type="text/javascript">
var msgId;
msgId = 'MSG15482962385250.12826686230343076';
</script>
<script type="text/javascript">
function doValidation() {
var reason = "";
var userNameEmpty = isEmpty("username");
var passwordEmpty = isEmpty("password");
if (userNameEmpty || passwordEmpty) {
CARBON.showWarningDialog('Please enter a valid user name and a password.');
document.getElementById('txtUserName').focus();
return false;
}
return true;
}
</script>
<script type="text/javascript">
function getSafeText(text){
text = text.replace(/</g,'<');
return text.replace(/>/g,'>');
}
function checkInputs(){
var loginForm = document.getElementById('loginForm');
var backendUrl = document.getElementById("txtbackendURL");
var username = document.getElementById("txtUserName");
backendUrl.value = getSafeText(backendUrl.value);
username.value = getSafeText(username.value);
loginForm.submit();
}
</script>
<div id="middle">
<table cellspacing="0" width="100%">
<tr>
<td>
<div id="features">
<table cellspacing="0">
<tr class="feature feature-top">
<td>
<a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation"><img src="../admin/images/user-guide.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation">User Guide</a></h3>
<p>WSO2 Carbon user guide.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank" href="http://wso2.org/forum/187"><img
src="../admin/images/forum.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="http://wso2.org/forum/187">Forum</a>
</h3>
<p>The interactive message board for sharing information, questions and comments about WSO2 products.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank"
href="https://wso2.org/jira/browse/APIMANAGER"><img
src="../admin/images/issue-tracker.gif"/></a>
</td>
<td>
<h3><a target="_blank"
href="https://wso2.org/jira/browse/APIMANAGER">
Issue Tracker</a></h3>
<p>Users are encouraged to report issues & suggest improvements using the JIRA issue tracker. In addition, users can observe the status of the reported issues in progress.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank" href="http://wso2.org/mail"><img
src="../admin/images/mailing-list.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="http://wso2.org/mail">
Mailing Lists</a></h3>
<p>Report issues, provide feedback & get help from our mailing lists.</p>
</td>
</tr>
</table>
</div>
</td>
<td width="20%">
<div id="loginbox">
<h2>Sign-in</h2>
<form action='../admin/login_action.jsp' method="POST" onsubmit="return doValidation();" target="_self" onsubmit="checkInputs()">
<table>
<tr>
<td>
<label for="txtUserName">Username</label>
</td>
<td>
<input type="text" id="txtUserName" name="username"
class="user" tabindex="1" autocomplete="off" />
</td>
</tr>
<tr>
<td>
<label for="txtPassword">Password</label>
</td>
<td>
<input type="password" id="txtPassword" name="password"
class="password" tabindex="2" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="rememberMe"
value="rememberMe" tabindex="3"/>
<label for="txtRememberMe">Remember Me</label>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Sign-in"
class="button" tabindex="3"/>
</td>
</tr>
</table>
</form>
<br/>
<a target="_blank" href="../docs/signin_userguide.html" tabindex="4">
Sign-in Help
</a>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function init(loginStatus) {
// intialize the code and call to the back end
/*wso2.wsf.Util.initURLs();*/
/*Initialize the XSLT cache*/
/*wso2.wsf.XSLTHelper.init();*/
if (loginStatus == 'true') {
} else if (loginStatus == 'null') {
} else if (loginStatus == 'false') {
wso2.wsf.Util.alertWarning("Login failed. Please recheck the user name and password and try again")
}
}
document.getElementById('txtUserName').focus();
</script>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="footer" colspan="3">
<div id="footer-div">
<div class="footer-content">
<div class="copyright">
© 2005 - 2018 WSO2 Inc. All Rights Reserved.
</div>
<!--div class="poweredby">
</div-->
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
if (Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
</body>
</html>
response header returned is
cache-control: no-store, no-cache, must-revalidate, private content-encoding: gzip content-language: en-US content-type: text/html;charset=UTF-8 date: Thu, 24 Jan 2019 02:17:18 GMT expires: 0 pragma: no-cache server: WSO2 Carbon Server status: 200 vary: Accept-Encoding x-content-type-options: nosniff x-frame-options: DENY x-xss-protection: 1; mode=block
even though the response content type is application/json
I have three div one is main div, one div having two column table and another div has 5 column table. I have tried using bootstrap class "row" but I did not able to align them properly. How can I arrange this two div one beside another? Here below I have attached a picture. Can anyone please help me out for this problem.
here below is the 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">
<title>trial</title>
<!--Links for icons and images-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--css for paginated-->
<link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">
<style>
#displayproject{
margin-top:100px;
position:fixed;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div id="displayproject">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Projects</th>
</tr>
</thead>
<tbody>
<?php
include_once "../Connection/dbconnect.php";
$fetch_projects = mysqli_query($GLOBALS['db'],"select project_id,project_name from project_table limit 10;");
while($row = mysqli_fetch_array($fetch_projects)){
echo '<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" name="options[]" value="hello">
<label></label>
</span>
</td>';
echo '<td>'.$row['project_name'].'</td></tr><tr></tr>';
}
?>
</tbody>
</table>
</div>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<i class="material-icons"></i> <span>Add New Employee</span>
<i class="material-icons"></i> <span>Delete</span>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>Thomas Hardy</td>
<td>thomashardy#mail.com</td>
<td>89 Chiaroscuro Rd, Portland, USA</td>
<td>(171) 555-2222</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox3" name="options[]" value="1">
<label for="checkbox3"></label>
</span>
</td>
<td>Maria Anders</td>
<td>mariaanders#mail.com</td>
<td>25, rue Lauriston, Paris, France</td>
<td>(503) 555-9931</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output I am getting is
You can use bootstrap 3 , you can see the code here
https://codepen.io/shakercs/pen/MBgwQJ
<div class="container">
<div class="row">
<div class="col-md-12">
div is here
</div>
</div>
<div class="row">
<div class="col-md-3">
<table class="table table-bordered">
<thead>
<tr>
<th>checkbox</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-9">
<table class="table table-bordered">
<thead>
<tr>
<th>checkbox</th>
<th>name</th>
<th>title</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This should work for you -
<div class="container">
<div class="row">
<div class="col-md-12">
First div
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2" style="border:1px solid">
<table class="table">
<tr>
<td>col</td>
<td>col</td>
</tr>
</table>
</div>
<div class="col-md-10 col-sm-12" style="border:1px solid">
<table class="table">
<tr>
<td>col</td>
<td>col</td>
<td>col</td>
<td>col</td>
<td>col</td>
</tr>
</table>
</div>
</div>
</div>
This is an example code. You can modify accordingly.
Fiddle
You need to use the float:value; property of css to achieve this.
value:left|right|clear
<!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>trial</title>
<!--Links for icons and images-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--css for paginated-->
<link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">
<style>
#displayproject{
float:left;
margin-top:100px;
position:fixed;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div id="displayproject">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Projects</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="table-wrapper" style="float:right;">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<i class="material-icons"></i> <span>Add New Employee</span>
<i class="material-icons"></i> <span>Delete</span>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>Thomas Hardy</td>
<td>thomashardy#mail.com</td>
<td>89 Chiaroscuro Rd, Portland, USA</td>
<td>(171) 555-2222</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox3" name="options[]" value="1">
<label for="checkbox3"></label>
</span>
</td>
<td>Maria Anders</td>
<td>mariaanders#mail.com</td>
<td>25, rue Lauriston, Paris, France</td>
<td>(503) 555-9931</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I am trying to solve how I can get input field and a button on the same line inside a table.
This is what I want to be inline:
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td>
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<input type="text" name="numDays" id="numDays" class="numDays">
<button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
</form>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>what</th>
<th>huh</th>
<th>wait</th>
</tr>
</thead>
<tbody>
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td>
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<div class="input-group">
<input type="text" name="numDays" id="numDays" class="numDays form-control">
<span class="input-group-btn">
<button type="submit" name="button" class="btn btn-success" id="bt">Click <i class="fa fa-angle-right"></i></button>
</span>
</div>
</form>
</td>
</tr>
</tbody>
</table>
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td style="width:70%;">
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<input type="text" name="numDays" id="numDays" class="numDays">
<button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
</form>
</td>
</tr>
My question is - I have two files:
layout.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:fragment="layout">
<head>
<title >Layout page</title>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<section th:include="this :: content">
<p>Page content goes here</p>
</section>
<footer th:fragment="footer" >
<p>My footer</p>
</footer>
</body>
</html>
And index.html:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:include="layout :: layout">
<head>
<title>Index page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h2>Hello World!</h2>
<section class="seedstarterlist" th:fragment="content" >
<form action="#" th:action="#{/add}" th:object="${user}" method="post">
<table>
<tbody>
<tr>
<td>name</td>
<td><input type="text" th:field="*{name}" /></td>
</tr>
<tr>
<td>surname</td>
<td><input type="text" th:field="*{surname}" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" th:field="*{email}" /></td>
</tr>
<tr>
<td>street</td>
<td><input type="text" th:field="*{street}" /></td>
</tr>
<tr>
<td>postcode</td>
<td><input type="text" th:field="*{postcode}" /></td>
</tr>
<tr>
<td>city</td>
<td><input type="text" th:field="*{city}" /></td>
</tr>
<tr>
<td>district</td>
<td><input type="text" th:field="*{district}" /></td>
</tr>
<tr>
<td>country</td>
<td><input type="text" th:field="*{country}" /></td>
</tr>
<tr>
<td>nationality</td>
<td><input type="text" th:field="*{nationality}" /></td>
</tr>
<tr>
<td>phoneNumber</td>
<td><input type="text" th:field="*{phoneNumber}" /></td>
</tr>
<tr>
<td>avatar</td>
<td><input type="text" th:field="*{avatar}" /></td>
</tr>
<tr>
<td>password</td>
<td><input type="text" th:field="*{password}" /></td>
</tr>
<tr>
<td>status</td>
<td><input type="text" th:field="*{status}" /></td>
</tr>
<tr>
<td>sex</td>
<td><input type="text" th:field="*{sex}" /></td>
</tr>
<tr>
<td>birthdate</td>
<td><input type="text" th:field="*{birthdate}" /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" name="add">Add User</button>
</td>
</tr>
</tbody>
</table>
</form>
</section>
<footer th:fragment="footer" >
<p>My custom footer</p>
</footer>
I want to have custom footer only on index.html page. Layout works fine, but I want to override footer, on this particular page, and this is not working.
Any help?
The answer is that I needed to change my approach and use ThymeLeaf Layout Dialect. I registered additional template engine in Spring configuration files:
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="additionalDialects">
<set>
<bean class="nz.net.ultraq.thymeleaf.LayoutDialect"/>
</set>
</property>
</bean>
and change declaration on the top of html to:
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout.html">
Hope it will help somebody.
I had some problem to load Class object with this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bidder Form</title>
<%String contextPath = request.getContextPath();%>
<link href="<%=contextPath%>/resources/css/home.css" rel="stylesheet" type="text/css" />
<link href="<%=contextPath%>/resources/css/theme_1.css" rel="stylesheet" type="text/css" />
<script src="<%=contextPath%>/resources/js/jQuery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="<%=contextPath%>/resources/js/jQuery/jquery.validate.js"type="text/javascript"></script>
<script src="<%=contextPath%>/resources/js/form/deployJava.js" type="text/javascript"></script>
<script type="text/javascript">
var SignerAPI;
</script>
</head>
<jsp:useBean id="signerBean" class="com.cptu.egp.eps.web.utility.SignerAPI" />
<body>
<div id="appcon">
<applet codebase="" archive="Signer.jar" code="com.sanecode.SignerAPI.class" width="0" Height="0" ID="Signer" >
</applet>
<script type="text/javascript">
alert(deployJava);
alert('test 1');
deployJava.runApplet(
{
codebase:"",
archive:"Signer-1.0.0.jar",
code:"com.sanecode.SignerAPI.class",
width:"0",
Height:"0",
ID: "Signer",
classloader_cache: "false"
},
null,
"1.6"
);
alert('test 2');
alert(SignerAPI);
</script>
</div>
<div class="mainDiv">
<div class="dashboard_div">
<jsp:include page="../resources/common/AfterLoginTop.jsp"></jsp:include>
<div class="fixDiv">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td>
<div class="t_space">
<div class="pageHead_1">Bid Form</div>
<div> </div>
<table border="0" cellspacing="10" cellpadding="0" class="formStyle_1" width="100%">
<tr>
<td>
<table>
<tr>
<td valign="middle">Actual data : </td>
<td>
<textarea id="aData" cols="60" rows="10" class="formTxtBox_1"></textarea>
</td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type="password" id="pwd1" name="pwd1" class="formTxtBox_1"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label class="formBtn_1">
<input type="button" name="encrypt" id="encrypt" value="Encrypt">
</label>
</td>
</tr>
<script type="text/javascript">
$('#encrypt').click(function() {
alert('sanjay');
alert($('#aData').val());
alert(SignerAPI);
SignerAPI.setData($('#aData').val());
enc = SignerAPI.getSymEncrypt($('#pwd1').val());
$('#eData').val(enc);
//alert("done"+enc);
});
</script>
<tr></tr>
<tr>
<td valign="middle">Encrypted data : </td>
<td>
<textarea id="eData" cols="60" rows="10" class="formTxtBox_1"></textarea>
</td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type="password" id="pwd2" name="pwd2" class="formTxtBox_1"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label class="formBtn_1">
<input type="button" name="decrypt" id="decrypt" value="Decrypt"/>
</label>
</td>
</tr>
<tr></tr>
<SCRIPT type="text/javascript">
$('#decrypt').click(function() {
SignerAPI.setEncrypt($('#eData').val());
enc = SignerAPI.getSymDecrypt($('#pwd2').val());
$('#dData').val(enc);
});
</SCRIPT>
<tr>
<td valign="middle">Decrypted data : </td>
<td>
<textarea id="dData" cols="60" rows="10" class="formTxtBox_1"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<jsp:include page="../resources/common/Bottom.jsp" ></jsp:include>
</div>
</div>
</head>
</html>
I tried out but I can't get object of "SignerAPI" , can anyone guide me?
add this somewhere:
$(function() {
SignerAPI = document.getElementById('Signer');
}
or change the ID of the applet from 'Signer' to 'SignerAPI'