I meet a problem.
I download Bootstrap design for my project. When I unzip design to package and run a page everything is displayed correctly.
Then I copy html's pages and resources(css, js, images) to my project. Then I refactor index.html to index.ftl and run my project, the index page displayed a wrong view.
I haven't got any errors and warnings in Console and Network(in Chrome).
Freemarker can't displayed page correctly?
MainController.java
#Controller
public class MainController {
#Autowired
CategoryService categoryService;
#RequestMapping("/")
public String home() {
return "redirect:/index";
}
#RequestMapping("/index")
public String showIndex(Model model) {
model.addAttribute("categories", categoryService.getAllMainCategories());
return "index";
}
}
index.html (and .ftl)
<!DOCTYPE html>
<html>
<head>
<title>Grocery Store | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="agileits_header">
<div class="w3l_offers">
Today's special Offers !
</div>
<div class="w3l_search">
<form action="#" method="post">
<input type="text" name="Product" value="Search a product..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search a product...';}" required="">
<input type="submit" value=" ">
</form>
</div>
<div class="product_list_header">
<form action="#" method="post" class="last">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="display" value="1" />
<input type="submit" name="submit" value="View your cart" class="button" />
</fieldset>
</form>
</div>
<div class="w3l_header_right">
<ul>
<li class="dropdown profile_details_drop">
<i class="fa fa-user" aria-hidden="true"></i><span class="caret"></span>
<div class="mega-dropdown-menu">
<div class="w3ls_vegetables">
<ul class="dropdown-menu drp-mnu">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="w3l_header_right1">
<h2>Contact Us</h2>
</div>
<div class="clearfix"> </div>
</div>
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".agileits_header").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".agileits_header").addClass("fixed");
}else{
$(".agileits_header").removeClass("fixed");
}
});
});
</script>
<!-- //script-for sticky-nav -->
<div class="logo_products">
<div class="container">
<div class="w3ls_logo_products_left">
<h1><span>Grocery</span> Store</h1>
</div>
<div class="w3ls_logo_products_left1">
<ul class="special_items">
<li>Events<i>/</i></li>
<li>About Us<i>/</i></li>
<li>Best Deals<i>/</i></li>
<li>Services</li>
</ul>
</div>
<div class="w3ls_logo_products_left1">
<ul class="phone_email">
<li><i class="fa fa-phone" aria-hidden="true"></i>(+0123) 234 567</li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i>store#grocery.com</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner">
<div class="w3l_banner_nav_left">
<nav class="navbar nav_bottom">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header nav_2">
<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul class="nav navbar-nav nav_1">
<li>Branded Foods</li>
<li>Households</li>
<li class="dropdown mega-dropdown active">
Veggies & Fruits<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</div>
</div>
</li>
<li>Kitchen</li>
<li>Short Codes</li>
<li class="dropdown">
Beverages<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Soft Drinks</li>
<li>Juices</li>
</ul>
</div>
</div>
</li>
<li>Pet Food</li>
<li class="dropdown">
Frozen Foods<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Frozen Snacks</li>
<li>Frozen Nonveg</li>
</ul>
</div>
</div>
</li>
<li>Bread & Bakery</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="w3l_banner_nav_right">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="w3l_banner_nav_right_banner">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
<li>
<div class="w3l_banner_nav_right_banner1">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
<li>
<div class="w3l_banner_nav_right_banner2">
<h3>upto <i>50%</i> off.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- flexSlider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- //flexSlider -->
</div>
<div class="clearfix"></div>
</div>
<!-- banner -->
<div class="banner_bottom">
<div class="wthree_banner_bottom_left_grid_sub">
</div>
<div class="wthree_banner_bottom_left_grid_sub1">
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/4.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_bottom_left_grid_pos">
<h4>Discount Offer <span>25%</span></h4>
</div>
</div>
</div>
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/5.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_btm_pos">
<h3>introducing <span>best store</span> for <i>groceries</i></h3>
</div>
</div>
</div>
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/6.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_btm_pos1">
<h3>Save <span>Upto</span> $10</h3>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- top-brands -->
<div class="top-brands">
<div class="container">
<h3>Hot Offers</h3>
<div class="agile_top_brands_grids">
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="tag"><img src="images/tag.png" alt=" " class="img-responsive" /></div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block" >
<div class="snipcart-thumb">
<img title=" " alt=" " src="images/1.png" />
<p>fortune sunflower oil</p>
<h4>$7.99 <span>$10.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="checkout.html" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Fortune Sunflower Oil" />
<input type="hidden" name="amount" value="7.99" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block" >
<div class="snipcart-thumb">
<img title=" " alt=" " src="images/3.png" />
<p>basmati rise (5 Kg)</p>
<h4>$11.99 <span>$15.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="basmati rise" />
<input type="hidden" name="amount" value="11.99" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="images/2.png" alt=" " class="img-responsive" />
<p>Pepsi soft drink (2 Ltr)</p>
<h4>$8.00 <span>$10.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Pepsi soft drink" />
<input type="hidden" name="amount" value="8.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="images/4.png" alt=" " class="img-responsive" />
<p>dogs food (4 Kg)</p>
<h4>$9.00 <span>$11.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="dogs food" />
<input type="hidden" name="amount" value="9.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //top-brands -->
<!-- fresh-vegetables -->
<div class="fresh-vegetables">
<div class="container">
<h3>Top Products</h3>
<div class="w3l_fresh_vegetables_grids">
<div class="col-md-3 w3l_fresh_vegetables_grid w3l_fresh_vegetables_grid_left">
<div class="w3l_fresh_vegetables_grid2">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i>All Brands</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Vegetables</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Fruits</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Juices</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Pet Food</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Bread & Bakery</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Cleaning</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Spices</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Dry Fruits</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Dairy Products</li>
</ul>
</div>
</div>
<div class="col-md-9 w3l_fresh_vegetables_grid_right">
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<img src="images/8.jpg" alt=" " class="img-responsive" />
</div>
</div>
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<div class="w3l_fresh_vegetables_grid1_rel">
<img src="images/7.jpg" alt=" " class="img-responsive" />
<div class="w3l_fresh_vegetables_grid1_rel_pos">
<div class="more m1">
Shop now
</div>
</div>
</div>
</div>
<div class="w3l_fresh_vegetables_grid1_bottom">
<img src="images/10.jpg" alt=" " class="img-responsive" />
<div class="w3l_fresh_vegetables_grid1_bottom_pos">
<h5>Special Offers</h5>
</div>
</div>
</div>
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="w3l_fresh_vegetables_grid1_bottom">
<img src="images/11.jpg" alt=" " class="img-responsive" />
</div>
</div>
<div class="clearfix"> </div>
<div class="agileinfo_move_text">
<div class="agileinfo_marquee">
<h4>get <span class="blink_me">25% off</span> on first order and also get gift voucher</h4>
</div>
<div class="agileinfo_breaking_news">
<span> </span>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //fresh-vegetables -->
<!-- newsletter -->
<div class="newsletter">
<div class="container">
<div class="w3agile_newsletter_left">
<h3>sign up for our newsletter</h3>
</div>
<div class="w3agile_newsletter_right">
<form action="#" method="post">
<input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
<input type="submit" value="subscribe now">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //newsletter -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-3 w3_footer_grid">
<h3>information</h3>
<ul class="w3_footer_grid_list">
<li>Events</li>
<li>About Us</li>
<li>Best Deals</li>
<li>Services</li>
<li>Short Codes</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>policy info</h3>
<ul class="w3_footer_grid_list">
<li>FAQ</li>
<li>privacy policy</li>
<li>terms of use</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>what in stores</h3>
<ul class="w3_footer_grid_list">
<li>Pet Food</li>
<li>Frozen Snacks</li>
<li>Kitchen</li>
<li>Branded Foods</li>
<li>Households</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>twitter posts</h3>
<ul class="w3_footer_grid_list1">
<li><label class="fa fa-twitter" aria-hidden="true"></label><i>01 day ago</i><span>Non numquam http://sd.ds/13jklf#
eius modi tempora incidunt ut labore et
http://sd.ds/1389kjklf#quo nulla.</span></li>
<li><label class="fa fa-twitter" aria-hidden="true"></label><i>02 day ago</i><span>Con numquam http://fd.uf/56hfg#
eius modi tempora incidunt ut labore et
http://fd.uf/56hfg#quo nulla.</span></li>
</ul>
</div>
<div class="clearfix"> </div>
<div class="agile_footer_grids">
<div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
<div class="w3_footer_grid_bottom">
<h4>100% secure payments</h4>
<img src="images/card.png" alt=" " class="img-responsive" />
</div>
</div>
<div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
<div class="w3_footer_grid_bottom">
<h5>connect with us</h5>
<ul class="agileits_social_icons">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="wthree_footer_copy">
<p>© 2016 Grocery Store. All rights reserved | Design by W3layouts</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
</script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<script src="js/minicart.js"></script>
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var items = this.items(),
len = items.length,
total = 0,
i;
// Count the number of each item in the cart
for (i = 0; i < len; i++) {
total += items[i].get('quantity');
}
if (total < 3) {
alert('The minimum order quantity is 3. Please add more to your shopping cart before checking out');
evt.preventDefault();
}
});
</script>
</body>
</html>
Images hosting:
link html page view (correct)
https://ibb.co/frTcaw
ling ftl page view (wrong)
https://ibb.co/fLUpoG
project structure:
-web app
-css
-js
-fonts
-images
-WEB-INF
-view
-ftl
index.ftl
Paths to css, fonts and js in ftl page is true.
How can I make a correct view?
Related
When I press the save button ajax does not work.The page reloads.Here is my indx page and my Controller function.
URL is --- http://localhost:8082/spring-test/index
Controller
#RequestMapping(value = "/saveUser", method = RequestMethod.POST)
public String saveUser(#Valid #ModelAttribute("User") User user, BindingResult bindingResult,
ModelMap model, HttpServletRequest request, RedirectAttributes redirectAttrs) {
System.out.println("user: " + user.getUserId());
String type = request.getParameter("update") != null ? request.getParameter("update") : "";
String delete = request.getParameter("delete") != null ? request.getParameter("delete") : "";
if (type.equalsIgnoreCase("update") || delete.equalsIgnoreCase("delete")) {
User userDb = userService.getUserById(user.getUserId());
user.setUserId(userDb.getUserId());
}
if (bindingResult.hasErrors()) {
System.out.println("=====================error======================" + bindingResult.getFieldErrors());
return "index";
}
if (delete.equalsIgnoreCase("delete")) {
userService.deleteUser(user.getUserId());
} else {
userService.saveUser(user);
}
//model.clear();
model.clear();
return "redirect:/index";
}
index.html
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" class="no-js">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
$('#btnSave').click(function(e) {
var dataUser = $("#name").val();
var dataPass = $("#pwd").val();
var userDdata = {
"name": dateUser,
"pass": dataPass
}
$.ajax({
type: "POST",
url: "/spring-test/saveUser",
data: userData,
success: function(response) {
alert(1)
},
error: function(e) {
alert('Error: ' + e);
}
});
}
});
</script>
</head>
<body>
<div class="container col-sm-12 col-md-12" style="height:20px;background:#85a3e0;">
</div>
<div class="container col-sm-12 col-md-12">
<h3 class="text-center">Super Admin</h3>
<div class="col-md-4 col-sm-4" style="margin-left: 6%;">
<form class="form-horizontal" role="form" th:action="#{/saveUser}" th:object="${user}" method="post">
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Username:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" placeholder="Enter Name" th:field="*{userName}" />
<input type="hidden" th:field="*{userId}" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" th:field="*{password}" />
</div>
</div>
<div class="form-group">
<div class=" col-sm-12 text-right">
<button type="submit" class="btn btn-default" name="cancel" value="cancel">Cancel</button>
<button id="btnSave" type="submit" class="btn btn-primary" name="save" value="save">Save</button>
<button type="submit" class="btn btn-primary" name="update" value="update">Update</button>
<button type="submit" class="btn btn-primary" name="delete" value="delete">Delete</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Whats the problem here.
After adding the ajax function my dataTable is not appearing also.
Since you already have an action( th:action="#{/saveUser}") for the form submit, it will send the data directly, not via AJAX. In order to make it worked, you need to prevent this default behavior as like below.
$('#btnSave').click(function(e) {
e.preventDefault()
//Then do your stuff
});
It is not working because you have submit button and it directly submits the form.
What you can do it simply remove type="submit" from button and then try.
Vinod
Just try the below
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" class="no-js">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
$('#btnSave').click(function(e) {
var userData = $("#form1").serializeArray();
$.ajax({
type: "POST",
url: "/spring-test/saveUser",
data: userData,
success: function(response) {
alert(1)
},
error: function(e) {
alert('Error: ' + e);
}
});
}
});
</script>
</head>
<body>
<div class="container col-sm-12 col-md-12" style="height:20px;background:#85a3e0;">
</div>
<div class="container col-sm-12 col-md-12">
<h3 class="text-center">Super Admin</h3>
<div class="col-md-4 col-sm-4" style="margin-left: 6%;">
<form class="form-horizontal" role="form" id="form1" th:action="#{/saveUser}" th:object="${user}" method="post">
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Username:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" placeholder="Enter Name" th:field="*{userName}" />
<input type="hidden" th:field="*{userId}" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" th:field="*{password}" />
</div>
</div>
</form>
<div class="form-group">
<div class=" col-sm-12 text-right">
<button type="submit" class="btn btn-default" name="cancel" value="cancel">Cancel</button>
<button id="btnSave" type="button" class="btn btn-primary" name="save" value="save">Save</button>
<button type="submit" class="btn btn-primary" name="update" value="update">Update</button>
<button type="submit" class="btn btn-primary" name="delete" value="delete">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to pass values in 8 text fields in selenium using java. But when I take their xpath, it's same for all the 8 text fields. How can I enter values in it, by identifying each field separately ? Also there are 3 'Save' buttons in this page, with same xpaths. How can I identify them separately?
Below is my code (with same xpath for 8 text fields and 'Save' buttons):
//Enter values in 8 textfields
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("aaa");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("aaa");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("bbb");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("ccc");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("ddd");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("eee");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("fff");
driver.findElement(By.xpath(".//*[#id='placement_link']")).sendKeys("fff");
//Click on 'Save' button
driver.findElement(By.xpath(".//*[#id='submit']")).click();
Thread.sleep(10000);
//Enter recepient
driver.findElement(By.xpath(".//*[#id='receipient_add']")).click();
//click 'Save' button below recipient
driver.findElement(By.xpath(".//*[#id='submit']")).click();
Thread.sleep(10000);
***HTML****
Relevant section of the text field:
<document>
<html class="js" lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="not-front logged-in page-manage-listing-agent no-sidebars tableHeader-processed">
<!-- wrapper -->
<div id="wrapper">
<!-- container -->
<div id="container">
<!-- page_wrapper -->
<div id="page_wrapper">
<!-- page -->
<div id="page">
<!-- page-header -->
<div id="page-header" class="style_float">
<!--end page-header -->
<div class="clear"/>
<!-- main menu -->
<div class="style_main_menu">
<!--end main menu -->
<div class="clear"/>
<div id="subheading" class="style_flow">
<div class="clear"/>
<!-- center -->
<div id="center" class="style_center_content_default">
<!-- content above -->
<div class="style_content_above_wrapper">
<!-- end content above -->
<!-- left side bar -->
<div id="sidebar-left" class="sidebar">
<!--end left side bar -->
<div class="style_content_main_wrapper">
<div id="content-main">
<!-- error message -->
<div class="error-message "/>
<!-- content help -->
<div class="content-help"/>
<div class="clear-block">
<h3 class="style_sub_title"/>
<form id="rmls-manage-agent-listing" method="post" accept-charset="UTF-8" action="/manage-listing-agent/4756/7/Next">
<div>
<h3 class="style_sub_title">Tour Activity Status</h3>
<input id="edit-step" type="hidden" value="8" name="step"/>
<div class="container-inline-date form-item date-clear-block">
<div class="container-inline-date form-item date-clear-block">
<div class="form-submit-button">
<input id="form-nyo3QvZDdsqgPcIa0hMiityFWDw-jdMA6XuYvJU7aMU" type="hidden" value="form-nyo3QvZDdsqgPcIa0hMiityFWDw-jdMA6XuYvJU7aMU" name="form_build_id"/>
<input id="edit-rmls-manage-agent-listing-form-token" type="hidden" value="f18fc36d4d750ae3912d9cc941aa5c72" name="form_token"/>
<input id="edit-rmls-manage-agent-listing" type="hidden" value="rmls_manage_agent_listing" name="form_id"/>
<table class="sticky-header" style="position: fixed; top: 0px; width: 605px; left: 480px; visibility: hidden;">
<table class="statistic_table sticky-enabled sticky-table">
<div id="style_activity_text" class="style_sub_title_two">Premium Placements</div>
<div id="">
<form id="rmls-activity-report-placement-list-form" method="post" accept-charset="UTF-8" action="/manage-listing-agent/4756/7/Next">
<div>
<div class="placement_save">
<div class="placement_div">
<input id="edit-placement24798" type="hidden" value="24798" name="placement24798"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title1.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24798" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24799" type="hidden" value="24799" name="placement24799"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title8.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24799" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24800" type="hidden" value="24800" name="placement24800"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title2.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24800" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24801" type="hidden" value="24801" name="placement24801"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title7.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24801" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24802" type="hidden" value="24802" name="placement24802"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title3.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24802" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24803" type="hidden" value="24803" name="placement24803"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title6.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24803" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24804" type="hidden" value="24804" name="placement24804"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title4.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24804" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_div">
<input id="edit-placement24805" type="hidden" value="24805" name="placement24805"/>
<img class="placement-images" src="/sites/default/files/imagecache/product_list/sites/all/themes/rmls_webtheme/stat-images/news-title5.jpg"/>
<div class="placement_txt_div">
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="link24805" maxlength="255"/>
</div>
</div>
<div class="placement_radio_div">
</div>
<div class="placement_submit_div">
<input id="form-mLn9X6UrPnGLa0cYCdxkBN3crwQzf-Cw5zU0lnbVufU" type="hidden" value="form-mLn9X6UrPnGLa0cYCdxkBN3crwQzf-Cw5zU0lnbVufU" name="form_build_id"/>
<input id="edit-rmls-activity-report-placement-list-form-form-token" type="hidden" value="4305d09bc8205b6d0db44711023395c9" name="form_token"/>
<input id="edit-rmls-activity-report-placement-list-form" type="hidden" value="rmls_activity_report_placement_list_form" name="form_id"/>
</div>
</form>
</div>
<div class="style_sub_title_two">Custom Placements</div>
<a class="custom-placement-link" href="/%2523">Add New</a>
<div id="activity_report_placement_form_div" style="display:none;">
<form id="rmls-activity-report-placement-form" enctype="multipart/form-data" method="post" accept-charset="UTF-8" action="/manage-listing-agent/4756/7/Next">
<div>
<div id="placement_title-wrapper" class="form-item">
<div id="placement_link-wrapper" class="form-item">
<label for="placement_link">Link: </label>
<input id="placement_link" class="form-text" type="text" value="" size="60" name="placement_link" maxlength="255"/>
</div>
<div id="edit-thumb-wrapper" class="form-item">
<input id="edit-placement-listing-id" type="hidden" value="4756" name="placement_listing_id"/>
<input id="submit" class="form-submit bluebutton" type="submit" value="Save" name="submit"/>
<input id="form-mCvTeIxSSPEq5qAcjv0ROjiJVvl2JV0fVIoWj9tQ0a8" type="hidden" value="form-mCvTeIxSSPEq5qAcjv0ROjiJVvl2JV0fVIoWj9tQ0a8" name="form_build_id"/>
<input id="edit-rmls-activity-report-placement-form-form-token" type="hidden" value="185635f8c3122f16a07b5b626e7fc473" name="form_token"/>
<input id="edit-rmls-activity-report-placement-form" type="hidden" value="rmls_activity_report_placement_form" name="form_id"/>
</div>
</form>
</div>
<div id="">
</div>
</form>
<div id="dialog-manage-listing"/>
</div>
<!-- content main -->
<!-- right side bar -->
<!-- end right side bar -->
</div>
<!-- style_content_main_wrapper -->
</div>
<!-- center -->
<div class="clear"/>
<div id="footer">
</div>
<!--end page -->
</div>
<!--end page_wrapper -->
<div id="dialog"/>
<script type="text/javascript"> <!--//--><![CDATA[//><!-- var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-37131766-1"]);_gaq.push(["_trackPageview"]);(function() {var ga = document.createElement("script");ga.type = "text/javascript";ga.async = true;ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ga, s);})(); //--><!]]> </script>
<script type="text/javascript"> <!--//--><![CDATA[//><!-- jQuery.extend(Drupal.settings, { "CToolsAJAX": { "scripts": { "/sites/all/modules/jquery_update/replace/jquery.min.js": true, "/misc/drupal.js": true, "/sites/all/modules/blockui/jquery.blockUI.js": true, "/sites/all/modules/blockui/blockui.js": true, "/sites/all/modules/block_edit/block_edit.js": true, "/sites/all/modules/google_analytics/googleanalytics.js": true, "/sites/all/modules/nice_menus/superfish/js/superfish.js": true, "/sites/all/modules/nice_menus/superfish/js/jquery.bgiframe.min.js": true, "/sites/all/modules/nice_menus/superfish/js/jquery.hoverIntent.minified.js": true, "/sites/all/modules/nice_menus/nice_menus.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.core.min.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.dialog.min.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.draggable.min.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.droppable.min.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.sortable.min.js": true, "/sites/all/modules/rmls/js/rmls.js": true, "/sites/all/modules/rmls/jquery.confirm/jquery.confirm.js": true, "/sites/all/modules/rmls/clippy/jquery.clippy.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.datepicker.min.js": true, "/sites/all/modules/date/date_popup/lib/jquery.timeentry.pack.js": true, "/sites/all/modules/date/date_popup/date_popup.js": true, "/misc/tableheader.js": true, "/sites/all/modules/jquery_update/replace/jquery.form.js": true, "/sites/all/modules/ctools/js/ajax-responder.js": true, "/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.resizable.min.js": true, "/sites/all/modules/dialog/dialog.js": true, "/sites/all/modules/rmls_order_verification/custom.js": true, "/sites/all/modules/rmls_order_verification/modal-window.min.js": true }, "css": { "/modules/node/node.css": true, "/modules/system/defaults.css": true, "/modules/system/system.css": true, "/modules/system/system-menus.css": true, "/modules/user/user.css": true, "/sites/all/modules/block_edit/block_edit.css": true, "/sites/all/modules/cck/theme/content-module.css": true, "/sites/all/modules/ckeditor/ckeditor.css": true, "/sites/all/modules/ctools/css/ctools.css": true, "/sites/all/modules/date/date.css": true, "/sites/all/modules/date/date_popup/themes/datepicker.css": true, "/sites/all/modules/date/date_popup/themes/jquery.timeentry.css": true, "/sites/all/modules/filefield/filefield.css": true, "/sites/all/modules/nice_menus/nice_menus.css": true, "/sites/all/modules/nice_menus/nice_menus_default.css": true, "/sites/all/modules/rmls/jquery.confirm/jquery.confirm.css": true, "/sites/all/modules/jquery_ui/jquery.ui/themes/default/ui.all.css": true, "/sites/all/modules/jquery_ui/jquery.ui/themes/default/ui.datepicker.css": true, "/sites/all/modules/ubercart/uc_attribute/uc_attribute.css": true, "/sites/all/modules/ubercart/uc_order/uc_order.css": true, "/sites/all/modules/ubercart/uc_product/uc_product.css": true, "/sites/all/modules/ubercart/uc_store/uc_store.css": true, "/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css": true, "/sites/all/modules/views/css/views.css": true, "/sites/all/themes/rmls_webtheme/rmls.css": true, "/sites/all/themes/rmls_webtheme/style.css": true, "/sites/all/themes/rmls_webtheme/grid.css": true, "/sites/all/themes/rmls_webtheme/order_verification.css": true, "/sites/all/modules/rmls_order_verification/modal-window.css": true } } }); //--><!]]> </script>
</div>
<!--end container -->
</div>
<!--end wrapper -->
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"61afc6e03f","applicationID":"10285903","transactionName":"ZwQAMUZYW0QAAkZaDF5OIwZAUFpZThNfXxBvDAMLVV5QaAAGV10Xbw0LFkBQW1A+B11BDm8WEARESVBF","queueTime":0,"applicationTime":8493,"atts":"S0MDRw5CSEo=","errorBeacon":"bam.nr-data.net","agent":""}</script>
</div>
</body>
</html>
</document>
try like below:
//i take string array for eight text field input value
String [] textToInput = {"first","second","Third","Fourth","Fifth","Sixth","Seventh","Eight"};
List<WebElement> elements = driver.findElements(By.xpath(".//*[#id='placement_link']"));
System.out.println("size is "+elements.size());
for(int i = 0; i < elements.size(); i++){
elements.get(i).sendKeys(textToInput[i]);
}
u can click on save button in same way.
I have a form which has two tabs.On load it will fetch me values to that tab's input fields if available else the user must enter the details and save it.And on save I send it to a servlet and get processed.Below is the code for jsp
<link rel="stylesheet" type="text/css" href="../css/responsive-tabs.css " />
<header class="panel-heading vtab">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#reference-0">
Reference 1
</a>
</li>
<li class="">
<a data-toggle="tab" href="#reference-1">
Reference 2
</a>
</li>
</ul>
</header>
<div class="panel-body vcontent">
<div class="tab-content">
<%
String refname[] = new String[2];
String refmob[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
//get ref data here
for (int i = 0; i < refData.length; i++) {
refname[i] = //get detail
refmob[i] = //get detail
refdesg[i] = //get detail
refmail[i] = //get detail
%>
<div id="reference-0" class="tab-pane">
<form action="profileref" name="form<%=i%>" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[i]%>" name="refname<%=i%>" class="form-control" placeholder="Reference Name" id="refname0"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[i]%>" name="refdesg<%=i%>" class="form-control" placeholder="Designation" id="refdesg0" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[i]%>" name="refmail<%=i%>" class="form-control" placeholder="Email" id="refmail0" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[i]%>" name="refmob0<%=i%>" class="form-control" placeholder="Mobile No" id="refmob0" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div>
<!-- <div id="reference-1" class="tab-pane">
<form action="profileref" name="form1" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[1]%>" name="refname1" class="form-control" placeholder="Reference Name" id="refname1"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[1]%>" name="refdesg1" class="form-control" placeholder="Designation" id="refdesg1" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[1]%>" name="refmail1" class="form-control" placeholder="Email" id="refmail1" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[1]%>" name="refmob1" class="form-control" placeholder="Mobile No" id="refmob1" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div> -->
<script>
$("#reference-0:first-child").addClass("active");
</script>
<!--
<div class="text-center">
<button type="button" class="btn btn-lg btn-info m-r-10">Save</button>
<button type="button" class="btn btn-info select-tab" value="1">Next</button>
</div> </form>-->
<%
}
%>
</div>
</div>
</form>
I tried using loop to get the data but i was only able to get tab 1 details ,tab 2 details are null. I also tried using 2 forms this also not working according to my wish.What am I doing wrong here.Below I have attached my servlet code(Only given the code inside the servlet)
String refname[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
String refmob[] = new String[2];
refname[0] = request.getParameter("refname0");
refdesg[0] = request.getParameter("refdesg0");
refmail[0] = request.getParameter("refmail0");
refmob[0] = request.getParameter("refmob0");
out.print(refname[0]);
out.print(refmail[0]);
out.print(refdesg[0]);
refname[1] = request.getParameter("refname1");
refdesg[1] = request.getParameter("refdesg1");
refmail[1] = request.getParameter("refmail1");
refmob[1] = request.getParameter("refmob1");
out.print(refname[1]);
out.print(refmail[1]);
out.print(refdesg[1]);
I am using Spring MVC, Jquery,Hibernate and tomcat while I am trying to call the save method on controller through ajax and Jquery. while click the save button I am getting this syntactically incorrect error on tomcat here is the code
<script type="text/javascript">
function invokeCancel() {
var a = confirm("are you sure to cancel the page");
if (a == true) {
var urlString = "display.do";
$.ajax({
type : "GET",
url : urlString,
success : function(response) {
$("#addEditViewcontractDetailsDiv").html("");
$("#addEditViewcontractDetailsDiv").hide();
},
error : function() {
alert("Error occured during cancel process");
}
});
} else
return false;
}
$("#piId").focusout(function() {
valaidateElement('piId', 'c1');
});
$("#piName").focusout(function() {
validateElement('piName', 'c2');
});
$("#studyId").focusout(function() {
validateElement('studyId', 'c3');
});
$("#studyName").focusout(function() {
validateElement('studyName', 'c4');
});
$("#contractType").focusout(function() {
validateElement('contractType', 'c5');
});
$("#contractStartDate").focusout(function() {
validateElement('contractStartDate', 'c6');
});
$("#contractEndDate").focusout(function() {
validateElement('contractEndDate', 'c7');
});
$("#paymentTerms").focusout(function() {
validateElement('paymentTerms', 'c8');
});
$("#modeOfPayment").focusout(function() {
validateElement('modeOfPayment', 'c9');
});
$("#panNumber").focusout(function() {
validateElement('panNumber', 'c10');
});
function validateAllElements() {
return valaidateElement('piId', 'c1')
&& validateElement('piName', 'c2')
&& validateElement('studyId', 'c3')
&& validateElement('studyName', 'c4')
&& validateElement('contractType', 'c5')
&& validateElement('contractStartDate', 'c6')
&& validateElement('contractEndDate', 'c7')
&& validateElement('paymentTerms', 'c8')
&& validateElement('modeOfPayment', 'c9')
&& validateElement('panNumber', 'c10');
}
$(document).ready(function() {
for ( var i=1; i<11; i++) {
$("#c" + i).hide();
};
$("#saveBtn").click(function() {
if (validateAllElements()) {
$("#contacrtDetailsPage").submit();
}
});
});
$("#updateBtn").click(function() {
if (validateAllElements()) {
$("#contacrtDetailsPage").attr("action", "updateContract.do");
$("#contacrtDetailsPage").submit();
}
});
$(document)
.ready(
function() {
$("#removeVariable").hide();
var counter = 2;
$("#addVariable")
.click(
function() {
$("#removeVariable").show();
if (counter > 10) {
alert("Only 10 milestones allow");
return false;
}
var newTextBoxDiv = $(
document
.createElement('div'))
.attr(
"id",
'milestoneDiv'
+ counter);
newTextBoxDiv
.after()
.html(
'<div class="row">'
+ '<div class="col-md-12">'
+ '<p class="bx-form"><label> MileStone '
+ counter
+ ' </label>'
+ ' '
+ '<input type="text" size="32" id="mileStone" placeholder="Please Enter Milestone" name="mileStone' + counter +
'" path="mileStone' + counter + '" value="" ></p></div></div>');
newTextBoxDiv
.appendTo("#mileStoneGroup");
counter++;
});
$("#removeVariable").click(function() {
counter--;
$("#milestoneDiv" + counter).remove();
if (counter == 2) {
$("#removeVariable").hide();
alert("No more milestones to remove");
return false;
}
});
});
</script>
</head>
<body>
<sf:form id="contacrtDetailsPage" page="contacrtDetailsPage"
modelAttribute="contractDetails" method="post"
action="saveContract.do">
<div class="mx-main">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Contract Details >>
<c:choose>
<c:when test='${ACTION_TYPE == "EDIT"}'>
Update
</c:when>
<c:otherwise>
Create
</c:otherwise>
</c:choose>
</h3>
</div>
<div class="panel-body">
<sf:hidden path="contractDetailsId" />
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="piId">Pi Id <font
color="red">*</font></label>
<sf:input path="piId"
placeholder="Please enter Pi Id" type="text"
id="piId" cols="34" rows="4" maxlength="60"/>
<span id="c1" class="label label-warning">This information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="piName">PI Name <font color="red">*</font></label>
<sf:input path="piName" placeholder="Please Enter PI Name"
type="text" id="piName" size="60" maxlength="60" />
<span id="c2" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="studyId">Study Id <font color="red">*</font></label>
<sf:input path="studyId" placeholder="Please Enter Study Id"
type="text" id="studyId" size="60" maxlength="60" />
<span id="c3" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="studyName">Study Name <font color="red">*</font></label>
<sf:input path="studyName" placeholder="Please Enter Study Name"
type="text" id="studyName" size="60" maxlength="100" />
<span id="c4" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="contractType">Contract Type <font
color="red">*</font></label>
<sf:select path="contractType" id="contractType">
<sf:option value="">-- Select Contract Type --</sf:option>
<sf:option value="Actual">Actual</sf:option>
<sf:option value="Additional">Additional</sf:option>
<sf:option value="Lab">Lab</sf:option>
<sf:option value="Extension">Extension</sf:option>
</sf:select>
<span id="c5" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="contractStartDate">Contract Start Date
<font color="red">*</font>
</label>
<sf:input type="date" path="contractStartDate"
placeholder="Please Enter Contract Start Date"
id="contractStartDate" size="60" />
<span id="c6" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="contractEndDate">Contract End Date <font
color="red">*</font></label>
<sf:input path="contractEndDate"
placeholder="Please Enter Contract End Date" type="date"
id="contractEndDate" size="60" />
<span id="c7" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="paymentTerms">Payment Terms <font
color="red">*</font></label>
<sf:select path="paymentTerms" id="paymentTerms">
<sf:option value="">-- Select Payment Terms --</sf:option>
<sf:option value="One Term">One Term</sf:option>
<sf:option value="MileStone">MileStone</sf:option>
</sf:select>
<span id="c8" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="mileStoneGroup">
<div class="col-md-12" id="milestoneDiv">
<p class="bx-form">
<label for="mileStone1">MileStone </label>
<sf:input path="mileStone" placeholder="Please Enter MileStone1"
type='textbox' id="mileStone1" size="60" maxlength="11" />
<button type="button" id="addVariable" name="addVariable">
<img src="../images/save2.jpg" />
</button>
<button type="button" id="removeVariable" name="removeVariable">
<img src="../images/minus.png" />
</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="contractOthers">Others</label>
<sf:input path="contractOthers"
placeholder="Please Enter Others" type="text"
id="contractOthers" size="60" maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="irbPayment">IRB Payment</label>
<sf:input path="irbPayment" id="irbPayment"
placeholder="Please Enter IRB Payment" type="text" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="iecPayment">IEC Payment</label>
<sf:input path="iecPayment" id="iecPayment"
placeholder="Please Enter IEC Payment" type="text" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="modeOfPayment">Mode of Payment <font
color="red">*</font></label>
<sf:select path="modeOfPayment" id="modeOfPayment">
<sf:option value="">-- Select Mode of Payment--</sf:option>
<sf:option value="Cheque">Cheque</sf:option>
<sf:option value="Draft">Draft</sf:option>
<sf:option value="Cash">Cash</sf:option>
</sf:select>
<span id="c9" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="inFavorOf">In Favor Of</label>
<sf:input path="inFavorOf"
placeholder="Please Enter In Favor Of" type="text"
id="inFavorOf" size="60" maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="paybleAt">Payable At</label>
<sf:input path="paybleAt" id="paybleAt"
placeHolder="Please Enter The Payable At" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="panNumber">PAN Number <font color="red">*</font></label>
<sf:input path="panNumber" id="panNumber"
placeHolder="Please Enter The PAN Number" size="60"
maxlength="30" />
<span id="c10" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<c:choose>
<c:when test='${ACTION_TYPE == "EDIT"}'>
<button type="button" id="updateBtn" class="btn btn-success">Update</button>
</c:when>
<c:otherwise>
<button type="button" id="saveBtn" name="cmd"
class="btn btn-success">Save</button>
</c:otherwise>
</c:choose>
<button type="button" id="cancelBtn" class="btn btn-warning"
onclick="javascript:invokeCancel();">Cancel</button>
</p>
</div>
</div>
</div>
</div>
</div>
</sf:form>
</body>
</html>
Controller:Code
/************************************* Save ContractDetails *****************************/
#RequestMapping(value = "/saveContract", method=RequestMethod.POST)
public ModelAndView saveContractDetails(ContractDetails contractDetails,
BindingResult result) {
contractDetailsService.createContractDetails(contractDetails);
ModelAndView model = new ModelAndView(PagesI.CONTRACT_DETAILS_DISPLAY);
model.addObject("contractDetailsList",
contractDetailsService.getContractDetailsList());
model.addObject("DISPLAY_VIEW_PAGE", "Y");
return model;
}
It seems like your are missing something in your saveContractDetails method inside your controller.
When you submit your form, you are sending a request on "/saveContract" and passing the model attribute contractDetails to it.
In order for Spring to be able to process your request, I think you have to specify inside the declaration of the saveContractDetails method that you are sending a model attribute.
I would try something like that:
#RequestMapping(value = "/saveContract", method=RequestMethod.POST)
public ModelAndView saveContractDetails(#ModelAttribute ContractDetails contractDetails,
BindingResult result) { ... }
I have completed HTML project and works find and no ERROR
Now my problem is that I am unable to find incomplete job in my Project. I use Netbeans for creating this project is there a way to find any incomplete work in existing project?
I used HTML, Flash, java, to create this entire project. Is there a tool to find this incomplete work or can I find it using Netbeans
So, how do I find incomplete work?
Thanks in advance
CODE
<!DOCTYPE html>
<html>
<head>
<title>Atomic Structure and Chemical Bonds</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type='text/css' rel='stylesheet' href='assets/css/bootstrap.min.css' />
<link type='text/css' rel='stylesheet' href='assets/css/VLAB.css' />
<link type='text/css' rel='stylesheet' href='assets/css/E20.css' />
<!--<link type='text/css' rel='stylesheet' href='assets/css/bootstrap-theme.min.css' />-->
<!--for Font-->
<link rel="stylesheet" type="text/css" media="screen" href="assets/fonts/webfontkit_proximaNova_reg/ProximaNova-Regular.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/fonts/webfontkit_proximanova_sb/ProximaNova-Semibold.css" />
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="assets/js/jquery.shuffle.js"></script>
<script type="text/javascript" src="assets/js/calc.js"></script>
<!-- Icon Assets -->
<script type="text/javascript" src="assets/js/journal.js"></script>
<script type="text/javascript" src="assets/js/sound.js"></script>
<script type="text/javascript" src="assets/js/print.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript">
function incrementButtons( upBtn, downBtn, qtyField )
{
var step = parseFloat( qtyField.value ) || 1,
currentValue = step;
downBtn.onclick = function()
{
currentValue = parseFloat( qtyField.value ) || step;
qtyField.value = ( currentValue -= Math.min( step, currentValue - step ) );
}
upBtn.onclick = function()
{
currentValue = parseFloat( qtyField.value ) || step;
qtyField.value = ( currentValue += step );
}
}
</script>
</head>
<body>
<div class="overlay"></div>
<div class="VLAB_container">
<header>
<div class="VLAB_head">VIRTUAL LABS</div>
<div class="VLAB_exit">X</div>
<div class="VLAB_print"></div>
<div class="VLAB_audio"></div>
</header>
<!-- Table Popup -->
<div id="VLAB_table" class="VLAB_table"
style="display:none;z-index:101;">
<div class="VLAB_table_title">Table <div class="VLAB_table_exit">X</div></div>
<div class="VLAB_table_subtitle">Title here </div>
<br/>
<div>
<table id="answered">
<thead>
<tr>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Value 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
</tbody>
</table>
</div>
<div class="VLAB_table_buttons">
<button type="button" class="btn disabled">Graph</button>
<button type="button" class="btn">Save</button>
<button type="button" class="btn">Print</button>
</div>
</div>
<!-- Table Popup ENDS-->
<!-- Journal Popup-->
<div id="VLAB_journal" class="VLAB_journal" style="display:none;z-index:101;">
<div class="VLAB_journal_title">Journal <div class="VLAB_journal_navigation"><div class="VLAB_journal_exit">X</div>
<div class="VLAB_journal_next"></div>
<span class="VLAB_journal_Qno"></span>
<div class="VLAB_journal_prev"></div>
</div>
</div>
<div class="VLAB_journal_subtitle"></div>
<div id="journalQuestions" style="display:none;z-index:101;">
<form action="#" class="regform" method="get">
<p>What part of the digestive system would you see in a cross-section anterior to the gizzard?<br/>
<textarea class="VLAB_journal_text_area" id="Answer1"
name="Question1" placeholder=""></textarea></p>
<p>What structure in the earthworm has a similar function as the human heart? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer2"
name="Question2" placeholder=""></textarea></p>
<p>What do two earthworms exchange during mating? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer3"
name="Question3" placeholder=""></textarea></p>
<p>Describe the difference between a closed and an open circulatory system.<br/>
<textarea class="VLAB_journal_text_area" id="Answer4"
name="Question4" placeholder=""></textarea></p>
<p>Do earthworms have a front and a back end? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer5"
name="Question5" placeholder=""></textarea></p>
<p>What characteristics distinguish an annelid from other worms?<br/>
<textarea class="VLAB_journal_text_area" id="Answer6"
name="Question6" placeholder=""></textarea></p>
</form>
</div>
<div class="VLAB_journal_buttons">
<button type="button" class="btn">Save</button>
<button id="journalPrint" type="button" class="btn">Print</button>
</div>
</div>
<!-- Journal Popup ENDS-->
<!-- AUDIO START -->
<div style="display:none;">
<audio preload="metadata" id="a1" class="a1">
<source class="aud_src" src="assets/audio/sound2drag.mp3" type = "audio/mp3">
<source class="aud_src" src="assets/audio/sound2drag.ogg" type = "audio/ogg">
</audio>
</div>
<!-- AUDIO END -->
<!-- Calculator -->
<form>
<div class="VLAB_CALC">
<div class="VLAB_CALC_title">Calculator
<div class="VLAB_CALC_exit">X</div>
</div>
<div class="VLAB_CALC_screen">
<input type="text" id="memory" class="pull-left" value="" readonly /> <input type="text" id="displayPanel" class="pull-right" value="0" readonly /> </div>
<div class="VLAB_CALC_buttonpad">
<div class="dark" onclick='ac()'>AC</div>
<div class="dark" onclick='ce()'>CE/C</div>
<div class="dark" onclick='perc()' > %</div>
<div class="dark right" onclick='getoperator("/")'>/</div>
<div onclick='getdigit("1")'>1</div>
<div onclick='getdigit("2")'>2</div>
<div onclick='getdigit("3")'>3</div>
<div class="dark right" onclick='getoperator("*")'>×</div>
<div onclick='getdigit("4")'>4</div>
<div onclick='getdigit("5")'>5</div>
<div onclick='getdigit("6")'>6</div>
<div class="dark right" onclick='getoperator("+")'>+</div>
<div onclick='getdigit("7")'>7</div>
<div onclick='getdigit("8")'>8</div>
<div onclick='getdigit("9")'>9</div>
<div class="dark right" onclick='getoperator("-")'>−</div>
<div onclick='getdigit("0")'>0</div>
<div class="dark" onclick='v(".")'>.</div>
<div class="dark right equal-sign" onclick='e()'>=</div>
<div class="dark lastrow" onclick='sto()' >STO</div>
<div class="dark lastrow" id="memoryBtn" onclick='rcl()'>RCL</div>
<div class="dark right lastrow" onclick=' sum_m()'>SUM</div>
</div>
</div>
</form>
<!-- Calculator END -->
<div id="VLAB_leftPanel" class="VLAB_leftPanel">
<div class="VLAB_leftPanel_head">Measurements</div>
<div class="VLAB_leftPanel_subhead">What are the structures and body systems of an earthworm?</div>
<div class="VLAB_leftPanel_content">
<p>We study earthworms to learn the structures and functions of segmented worms, also called annelids. Segmentation supports diversified functions of body parts and tissues. Studying the anatomy and body systems of annelids helps us understand the bodies of higher-level organisms. <br/><br/>Earthworms are classified in the phylum <i>Annelida</i>. (Kingdom: Animal; Phylum; Annelida; Class: Oligochaeta; Order: Opisthopora; Family: Lumbricidae; Genus: <i>Lumbricus</i>; Species:<i>Lumbricus terrestris</i>) The Annelida also include leeches and bristleworms. Segmented worms have bilateral symmetry and have a coelom, which is a fluid-filled body cavity surrounded by mesoderm. Earthworms have two body openings, a mouth and an anus. The basic body plan of segmented worms consists of a digestive tract within a tube. Earthworms are hermaphrodites, which means that an individual animal produces both sperm and eggs. During mating, two earthworms exchange sperm. Each earthworm forms a capsule for the eggs and sperm in which the eggs are fertilized. The capsule is left behind in the soil where the young earthworms emerge from the eggs in two to three weeks. Earthworms are herbivores. They obtain food by eating through the soil and extracting nutrients from it as food passes through the digestive tract. As an earthworm burrows, it loosens, aerates, and fertilizes the soil. Earthworm burrows provide passageways for plant roots and improve drainage of the soil.<br/><br/>
<b>Procedure</b><br/><br/> <b>1</b>. Click the <b>Lab manual</b> to read about earthworm anatomy.<br/><br/><b>2</b>. Click the <b>External anatomy button</b> to view a diagram of the external features of an earthworm.<br/><br/><b>3</b>. Drag and drop the <b>Labels</b> to the matching structures of the illustration.<br/><br/><b>4</b>. When all structures are labeled, the <b>Check button</b> is enabled. Click the <b>Check button</b> to receive feedback on whether the labels are matched with the correct structures. Correct the highlighted incorrect labels.<br/><br/><b>5</b>. Click the <b>Internal anatomy button</b> to view a diagram of the internal features of the earthworm and repeat steps 3 and 4.<br/><br/><b>6</b>. Answer the <b>Journal Questions</b>.</p>
</div>
<div class="VLAB_leftPanel_buttons">
<button id="journalBtn" type="button" class="btn">Journal</button>
<button id="calcBtn" type="button" class="btn">Calculator</button>
<button id="tableBtn" type="button" class="btn">Table</button>
</div>
</div>
<!-- right Panel for Interactivity part-->
<div class="VLAB_rightPanel">
<div id="page_content">
<div id="vlab_assets">
<!-- for development -->
<div calss="lab"><img height="683" width="700" src="assets/img/main.png" alt="image" style="position:absolute;"/></div>
<div style="position:absolute;margin-left:12px;margin-top:101px;"><img height="545" width="667" src="assets/img/bg_yellow.png" alt="image" style="position:absolute;"/></div>
<button id="me1" class="button">Hydrogen</button>
<button id="me2" class="button" style="margin-left:184px;">Hydrogen</button>
<button id="me3" class="button" style="margin-left:348px;">Hydrogen</button>
<button id="me4" class="button" style="margin-left:512px;width:160px;">Hydrogen</button>
<!--a class="term" id="pop1"><button class="buttona" style="margin-top:113px;margin-left:530px;width:122px;height:30px;">Show Labels</button></a-->
<script language="javascript">
var _0xd7e2=["\x6D\x61\x74\x63\x68","\x75\x73\x65\x72\x41\x67\x65\x6E\x74","\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74","\x63\x6C\x69\x63\x6B","\x6E\x6F\x43\x6F\x6E\x66\x6C\x69\x63\x74","\x68\x69\x64\x65","\x2E\x41\x6E\x73\x5F\x31\x50\x6F\x70","\x66\x61\x64\x65\x54\x6F\x67\x67\x6C\x65","\x73\x70\x61\x6E","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x2E\x41\x6E\x73\x5F\x31","\x76\x61\x6C","\x53\x68\x6F\x77","\x48\x69\x64\x65","\x62\x69\x6E\x64","\x23\x62\x74\x6E\x53\x68\x6F\x77","\x72\x65\x61\x64\x79"];var what=(navigator[_0xd7e2[1]][_0xd7e2[0]](/iPad/i))?_0xd7e2[2]:_0xd7e2[3];var $=jQuery[_0xd7e2[4]]();$(document)[_0xd7e2[16]](function (_0xf214x3){$(_0xd7e2[6])[_0xd7e2[5]]();$(_0xd7e2[15])[_0xd7e2[14]](what,function (_0xf214x3){var _0xf214x4=$(this);$(_0xd7e2[10])[_0xd7e2[9]](_0xd7e2[8])[_0xd7e2[7]]();_0xf214x4[_0xd7e2[11]](_0xf214x4[_0xd7e2[11]]()==_0xd7e2[12]?_0xd7e2[13]:_0xd7e2[12]);} );} );
</script>
<script type="text/javascript" src="assets/js/jquery.1.10.2.min.js"></script>
<div class="Ans_1" style="position:absolute;margin-top:160px;margin-left:23px;opacity:1;">
<span style="opacity:1;" class="Ans_1Pop" ><img height="410" width="490" src="assets/img/label.png" alt="image"/></span>
</div>
<input type="button" id="btnShow" value="Show Labels" style="position:absolute;margin-top:113px;margin-left:530px;width:122px;height:30px;" />
<form id="f1" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:295px;margin-left:240px;width:55px;height:40px;border:black;background:black;color:white;text-align:center;"/></p>
<p><input type='button' name='add' value='' style="margin-top:277px;margin-left:317px;position:absolute;width:20px;height10px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="margin-top:305px;margin-left:317px;position:absolute;width:20px;height10px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f1' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f2" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:350px;margin-left:240px;width:55px;height:40px;border:black;background:black;color:white;text-align:center;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:347px;margin-left:317px;width:20px;height:20px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:369px;margin-left:317px;width:20px;height:20px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f2' ) )
incrementButtons( add, subtract, qty );
</script>
<button id="check" class="buttona" style="margin-top:494px;margin-left:535px;width:102px;height:30px;">Check</button>
<form id="f3" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:342px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:571px;margin-left:407px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:407px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f3' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f4" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:428px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:571px;margin-left:493px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:493px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f4' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f5" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:513px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:572px;margin-left:580px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:580px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f5' ) )
incrementButtons( add, subtract, qty );
</script>
<div id="basic-modal-content" style="position:absolute;margin-top:221px;margin-left:132px;z-index:0;">
<img width="395" height="320" src="assets/img/video1.png" alt="image" />
</div>
<input type="button" id="video" class="buttona" style="margin-top:596px;margin-left:61px;width:80px;height:31px;" value="Video" />
<div id="video" style="position:absolute;margin-top:227px;margin-left:165px;z-index:1;">
<video id="video1" width="330" height="294" autoplay>
<source src="assets/audio/E20.mp4" type="video/mp4" />
<source src="assets/audio/E20.ogg" type="video/ogg" />
<source src="assets/audio/E20.webm" type="video/webm" />
Your browser does not support the video element.
</video></div>
<button id="reset" class="buttona" style="margin-top:596px;margin-left:184px;width:80px;height:31px;">Reset</button>
</div>
</div>
</div>
</div><!--End VLab Container-->
</body>
</html>
Unless the "incomplete work" / "incomplete job" is something that won't compile OR is flagged in the source code with "FIX ME" or "TO DO" tags (or the like), then I don't see how NetBeans or any other tool could distinguish between what is incomplete, and what is not.
There are tools that can detect some kinds of bug by analysing the source code, but I don't expect that that is what you mean by "incomplete".