In the springboot project under the resource folder i have templates placed.
All other html pages have been able to load css and product.html is not loading.
am using thymeleaf fragment to intergrate.
Github url--:https://github.com/javayp/springbootmvc
ProductController.java
package com.sm.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import com.sm.services.ProductService;
#Controller
public class ProductController {
private ProductService productService;
#Autowired
public void setProductService(ProductService productService) {
this.productService = productService;
}
#RequestMapping("/products")
public String productList(Model model){
model.addAttribute("products", productService.productList());
return "productList";
}
#RequestMapping("/viewproduct/{id}")
public String productList(#PathVariable("id") Integer id,Model model){
System.out.println("Id is------------"+id);
model.addAttribute("product", productService.getProductById(id));
return "product";
}
}
CommonHeader-
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>DevOps</title>
<!-- Bootstrap core CSS -->
<link type="text/css"
th:href="#{webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<!--Custom Css -->
<link type="text/css" th:href="#{/css/style.css}" rel="stylesheet"
media="Screen" />
</head>
<div th:fragment="before-body-script">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"></script>
</div>
</html>
products.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />
<body>
<div th:replace="common/navbar :: common-navbar"></div>
<div class="container">
<div th:if="${not #lists.isEmpty(products)}">
<h2>Product List</h2>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Description</th>
<th>Price</th>
<th>Image URL</th>
<th>Link</th>
</tr>
<tr th:each="product: ${products}">
<td th:text="${product.id}"></td>
<td th:text="${product.description}"></td>
<td th:text="${product.price}"></td>
<td th:text="${product.url}"></td>
<td><a th:href="${'viewproduct/'+product.id}">View</a></td>
</tr>
</table>
</div>
</div>
<div th:replace="common/header :: before-body-scripts"></div>
</body>
</html>
product.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />
<body>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm2 control-label">Product ID</label>
<div class="col-sm-10">
<p class="form-control-static" th:text="${product.id}">Product
ID</p>
</div>
</div>
<div class="form-group">
<label class="col-sm2 control-label">Description</label>
<div class="col-sm-10">
<p class="form-control-static" th:text="${product.description}">Description</p>
</div>
</div>
<div class="form-group">
<label class="col-sm2 control-label">Price</label>
<div class="col-sm-10">
<p class="form-control-static" th:text="${product.price}">Price</p>
</div>
</div>
<div class="form-group">
<label class="col-sm2 control-label">Url</label>
<div class="col-sm-10">
<p class="form-control-static" th:text="${product.url}">url</p>
</div>
</div>
</form>
</body>
</html>
In your header.html, where you add Bootstrap CSS stylesheet, add a slash / before path to webjars:
<!-- Bootstrap core CSS -->
<link type="text/css"
th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet" media="screen"/>
Related
Revamping the existing website(constructed using frames) using master pages in classic asp web application.
I have created three 3 separate pages(header,content,footer) and bind the other pages and it works fine.
In few scenerioes I have to call/display a page within a page in that case the whole page loads.(header and footer)
Header Page
<!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>
<title>ABC Company</title>
<!-- basic -->
<meta charset="utf-8">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- site css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body id="default_theme" class="home_page1">
ContentHolder Page
<!--#include file="Header.asp"-->
<div id="content">
<% Call ContentHolder() %>
</div>
<!--#include file="Footer.asp"-->
PartsPage
<!--#include file="Content.asp"-->
<% Sub ContentHolder() %>
<object data="mylogin.asp" width="100%" height="700" type="text/html">
Content
</object>
<% End Sub %>
mylogin.asp Page
<%# Language="VBScript" %>
<% Option Explicit
Session("LoginID")="validuser"
Response.AddHeader "pragma","no-cache"
Response.AddHeader "cache-control","private"
Response.CacheControl = "no-cache"
Sssion("user_id")=""
Session("user_type")=""
%>
<!--#include file="Content.asp"-->
<% Sub ContentPlaceHolder() %>
<div id="Layer3">
<table>
<tr>
<td>
<p>
Please enter your UserID and Password<BR>
</p>
<FORM name="MyForm" method="post" action="myLogin1.asp">
<p>
UserID<BR>
<INPUT type="text" name="LoginID" id="LoginID" tabindex="1"><BR><BR>
Password<BR>
<INPUT type="password" name="PWD" id="PWD" tabindex="2"><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Login Information" name="submit1" tabindex="3">
</p>
</FORM>
</td>
</tr>
</table>
</div>
<% End Sub %>
Footer Page
<footer>
<div class=row>
<p>
<span>All right reserved. ©2020 ABC Pvt Ltd. </span>
</p>
</div>
</footer>
</body>
</html>
So I removed server side include from the ContentHolder Page which resolves the above issue but CSS doesn't apply to ContentHolder Page.
ContentHolder Page
<div id="content">
<% Call ContentHolder() %>
</div>
ContactUsPage
<!--#include file="Content.asp"-->
<% Sub ContentHolder() %>
<h5> Contact Us</h5>
<p> If you have a question or a comment </p>
<% End Sub %>
I'm not well versed in Classic ASP, so any help you could provide would be helpful.
HTML Source
<!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>
<title>ABC Company</title>
<!-- basic -->
<meta charset="utf-8">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- site css -->
<link rel="stylesheet" href="css/style.css" />
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css" />
<!-- colors css -->
<link rel="stylesheet" href="css/colors.css" />
<!-- wow animation css -->
<link rel="stylesheet" href="css/animate.css" />
</head>
<body id="default_theme" class="home_page1">
<!-- header -->
<header class="header header_style1">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-10">
<div class="logo"><img src="images/logo.png" alt="#" /></div>
<div class="main_menu float-right">
<div class="menu">
<ul class="clearfix">
<li class="active">Home</li>
<li>About</li>
<li>Labour</li>
<li> Parts</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-lg-2">
<div class="right_bt"><a class="bt_main" href="accounttype.asp">Login</a> </div>
</div>
</div>
</div>
</header>
<div id="content">
<object data="mylogin.asp" width="100%" height="700" type="text/html">
</object>
</div>
<!-- footer -->
<footer>
</footer>
<!-- end footer -->
</body>
If you try to open the CSS file through your browser, does it return as text or a blank page?
If a blank page, go to your Control Panel > Turn Windows features on or off > Internet Information Services > World Wide Web Services > Common HTTP Features > Static Content. Set Static Content to on and then OK.
Reload the page now and see if the CSS renders.
I am struggling with some weird scenario.
I am trying to set up background image of body but i does not want to appear on the page anyhow.
My project structure is correct I think:
I am trying to attach this image to body so it looks like this:
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
<title>Login Page</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-image: url("../images/backimg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div>
<div id="loginbox" style="margin-top: 50px;"
class="mainbox col-md-3 col-md-offset-2 col-sm-6 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Login Form -->
<form:form
action="${pageContext.request.contextPath}/authenticateTheUser"
method="POST" class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for login error -->
<c:if test="${param.error != null}">
<div class="alert alert-danger col-xs-offset-1 col-xs-10">
Invalid username and password.</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success col-xs-offset-1 col-xs-10">
You have been logged out.</div>
</c:if>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input type="text"
name="username" placeholder="username" class="form-control">
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-lock"></i></span> <input type="password"
name="password" placeholder="password" class="form-control">
</div>
<!-- Login/Submit Button -->
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-success">Login</button>
</div>
</div>
</form:form>
</div>
</div>
</div>
</div>
</body>
</html>
Such paths won't work:
-background-image: url("../images/backimg.jpg");
-background-image: url("../resources/images/backimg.jpg");
Any ideas? Thanks in advance.
You can try this way
background-image:url("src/main/webapp/resources/images/backimg.jpg")
I have created a bootstrap form and using the 'required' parameter on a control to use html5 validation when I click the submit button.
When I do click the submit button the validation bubble appears for a second and disappears. I am not sure why it is doing this. I am using runat="server" on the controls as I need to access them from the codebehind page.
I have tried several options but still nothing.
A trimmed down version of the page below:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Client Details</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell the browser to be responsive to screen width -->
<link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../StyleSheets/theme.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../Stylesheets/iCheck.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Google Font -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="Main" runat="server" runat="server" >
<section class="content">
<p class ="text-left" style="padding-top:50px">
<h2><label id="lblFormName">Create Client</label></h2>
</p>
<p class="text-right">
<button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
<button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
</p>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Client Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Client ID</label>
<input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
</div>
<div class="form-group">
<label>Client Name</label>
<input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title</label>
<select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>
</div>
<div class="form-group">
<label>Client Surname</label>
<input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
</div>
</div>
</div>
<div class="col-md-6"><!--Left Column-->
<div class="form-group">
<label>Client Type</label>
<select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6"><!--Right Column-->
<div class="form-group">
<label>Client Status</label>
<select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
</div><!-- /.form-group -->
</div>
</div><!-- /.Panel-body -->
</div>
</div>
</div>
</form>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
I will add an answer and mark the question as a duplicate just to provide a reference for this issue if somebody else looks it up.
Updating the browser to the latest version should fix the issue. Here is the the original question link:
Related question with info on the bug fix for this issue
I'm trying to create a website with a table on it.. I search for templates and found the bootstrap-table design... the example is working perfectly fine but if I want to use this bootstrap-table-javascript on my own table its not working.
Here is my jsp code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<!-- Scriptimporte: -->
<script src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<!-- Tabellenpflege mit XML-Datei -->
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<c:import var="bookInfo" url="tables/xml_doc.xml"/>
<x:parse xml="${bookInfo}" var="output"/>
<!-- css-Dateien -->
...
</head>
<body>
<div id="start_header">
<div id="start_logo"><img src="icons/logo.jpg" alt="" /></div>
</div>
<h1>Test</h1>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></li>
<li class="active">Icons</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><h2>Testlist</h2></div>
<div class="panel-body">
<table data-toggle="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="price" data-sortable="true">Durchwahl</th>
<th data-field="present" data-sortable="true">Anwesend</th>
</tr>
</thead>
<tbody>
<x:forEach var="test" select="$output/books/book">
<tr>
<td>
1
</td>
<td>
<x:out select="name" />
</td>
<td>
<x:out select="nr" />
</td>
<td>
ja
</td>
</tr>
</x:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.main-->
</body>
</html>
I thought the bootstrap-table.js-function applys all his methods on all tables in the document which have the data-toggle="table".
You need only one Bootstrap import if you are using the latest Bootstrap. Secondly, your Bootstrap reference must follow the jQuery reference. :) Lastly use the Bootstrap table class in the table tag: class="table". And you need a reference to the Bootstrap.css file.
I have a simple Spring MVC 4.x (tiles) scenario. Where in response to a URI a form is displayed, however, Bootstrap styling is not kicking in:
JSP:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<br/><br/><br/>
<form:form modelAttribute="car" method="post">
<div class="form-group">
<label for="title">Make</label>
<form:input path="make"/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<form:input path="model"/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<form:input path="color"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form:form>
Rendered HTML:
<body>
<div class="container">
<div class="row">
<div class="header">
</div>
<div id="main-content-container">
<!-- main body -->
<br/><br/><br/>
<form id="car" action="/libms/carsx" method="post">
<div class="form-group">
<label for="title">Make</label>
<input id="make" name="make" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<input id="model" name="model" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<input id="color" name="color" type="text" value=""/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
Looks like this on screen:
I have verified if Spring's form:form is removed and <form> is used instead, the styling kicks in.
You need to include jquery and bootstrap on your page. For example:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
You may also want to make of use some other bootstrap elements such as cssClass.
For example:
<form:form modelAttribute="car" method="post">
...can be changed to:
<form:form modelAttribute="car" cssClass="form-horizontal" method="post">
And:
<label for="title">Make</label>
...can be changed to:
<label for="title" class="col-sm-2 control-label">Make</label>
And:
<form:input path="make"/>
...can be changed to:
<div class="col-sm-2">
<form:input path="make" cssClass="form-control"/>
</div>
As you mention, the Spring form functionality also kicks in since you're including the Spring form taglib as well.
Have you Included Bootstrap in your jsp page Like
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>Products</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Products</h1>
<p>Add products</p>
</div>
</div>
....
I can't see it in your page