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.
Related
I'm trying to make an editable table with bootstrap.
So, it must include some inputs.
Table columns width usually fit with its content. Bootstrap's form-control sets the width: 100%, but i feel it too large and want the input smaller.
I found in another question that i can use w-auto on my input to bypass this.
However, table doesn't seem to shrink the column size to it's content when i do this.
I guess i should somehow tell the table which column must expand to fill the space.
I've tried setting w-100 to another column, but it breaks another input-group in another column.
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger"><input type="number" class="form-control w-auto"></td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
See plunker
Im not 100% sure what u exactly want to achieve, but i think you want this behaviour?
Add input-group div around your first input field and remove the w-auto class.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="lib/script.js"></script>
</head>
<div class="container">
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger">
<div class="input-group">
<input type="number" class="form-control">
</div>
</td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
</div>
</html>
This is my code. It's just a basic cshtml page (not MVC) that I'm editing in a text editor. Visual Studio doesn't help much, it seems to suffer from the same issues as the compiler.
The code is printing a list of steps in a "plan" into a table, retrieved from a db query. There may be multiple plans, and each time there's a new one I want to display its name in a panel followed by its steps in a table. This means closing the current table and starting a new one.
The compiler doesn't seem to be able to handle the closing tags when they're "out of place". I've tried with and without Html.Raw() and the results are similar. Is there a technique that will work and allow this to compile?
#{
var db = Database.Open("CADDatabase");
var count=0;
var num="0";
var image="blank";
var APName="blank";
// Attached action plan for incident
var APIncidentQuery=#"select action_plan_name, action_plan_item_types.item_type_eng, pre_mobilisation_flag, instruction_text, isnull(action_plan_active.instruction_information,' ') as instruction_information, item_status_eng
from action_plan, action_plan_active, action_plan_item_types, action_plan_status
where action_plan_item_types.item_type=action_plan_active.item_type
and action_plan_active.item_status=action_plan_status.item_status
and action_plan.action_plan_id=action_plan_active.action_plan_id
and action_plan_active.eid=(select min(eid) from agency_event where num_1=#0) order by action_plan_active.action_plan_id, active_item_id";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Process Action Plan</title>
</head>
<body>
<!-- Panel header with search box -->
<div class="container-fluid ">
<div class="row no-gutters">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<form method="get" class="col-xs-3">
<div class="input-group">
<input class="form-control" type="text" placeholder="Event id" name="EventId" size="12">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Header row -->
<div class="row no-gutters">
#foreach(var row in db.Query(APIncidentQuery,Request.QueryString["EventId"])){
image="Images/ActionPlans/" + #row.item_type_eng + ".png";
// New plan
if (row.action_plan_name != APName) {
// Close off previous table if there is one
if (APName != "blank") {
Html.Raw("</tbody></table></div></div>");
}
<!-- Start new table -->
<div class="col-xs-12">
<div class="panel panel-warning">
<div class="panel-heading">
<div class="plan-header">
<img src="http://swi-hsiv-ps03/UKApps/Images/checklist-warning.png" height="32">
<h3 class="panel-title">Action plan items (#row.action_plan_name)</h3>
</div>
</div>
<!-- Table of results -->
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>#</th>
<th>Type</th>
<th>Pre-dispatch</th>
<th>Instruction</th>
<th>Additional Info</th>
</tr>
</thead>
<tbody>
<!-- store plan name for next iteration -->
#{
APName=row.action_plan_name;
}
<!-- Populate new table -->
}
<!-- List Action Plan items -->
<tr>
<td>#row.item_number</td>
<td><img src="#image" height="30" title="#row.item_type_eng"></td>
#if (row.pre_mobilisation_flag == "Y") {
<td><img src="images/ActionPlans/done-red.png" title="Y" height="30"></td>
} else {
<td><img src="images/ActionPlans/delete-grey.png" title="N" height="30"></td>
}
<td>#row.instruction_text</td>
#if (row.instruction_information.Length > 4 && row.instruction_information.Substring(0,5) == "http:") {
<td><a href=#row.instruction_information>Additional information</a></td>
} else {
<td>#row.instruction_information</td>
}
</tr>
}
#{
Html.Raw("</tbody></table></div></div>");
}
</div>
</div>
</body>
</html>
Fixed by rewriting as 2 queries, one to get the list of plans, the other to list the items within each. Then the tables are fully contained within the foreach loops.
I am working on one page checkout system in asp.net core I am using a partial view for each the stages of course I no you can just use below, but I want to load the partial view on button click of checkout it will show stage 2 etc and hide stage 1. I no the question may have been ask before but I am using the new asp.net core and was wondering what is the best practise for it.
#Html.Partial("_checkoutStage1.cshtml");
#Html.Partial("_checkoutStage2.cshtml") ;
Which will render a partrial view but what I want to be able to do is click a button to show stage two.
I found a bit of javascript and tried it with this being in my main view
<script type="text/javascript">
$("#loadPartialView").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
My Button
<button id="search" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
My Controller which is in my basket controller. Another question I have can you move the partial views to another directory or is ~/views/basket/ _ underscore prefix the correct naming convention for partial views.
public ActionResult LoadStage2(string searchText)
{
return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
}
Head of my layout page
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
Can someone help me out with this obv we dont want the page to refresh so I need to place it in a div on the button click.
My Index.cshtml based on basket layout
#model List<solitudedccore.models.basket.basketlines>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_BasketLayout.cshtml";
}
<head>
<script type="text/javascript">
$("#checkout").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
</head>
#Html.Partial("_checkoutStage1.cshtml");
<div id="Display"></div>
Full basketlayout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<script>
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Checkout stage 1 includes the button which I want to load stage 2 from it might be my misunderstanding of page cycle coming from 15 years of web forms.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="3">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td class="col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
</div>
</div>
</td>
<td class="col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="2">
</td>
<td class="col-md-1 text-center"><strong>$4.99</strong></td>
<td class="col-md-1 text-center"><strong>$9.98</strong></td>
<td class="col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Subtotal</h5></td>
<td class="text-right"><h5><strong>$24.59</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Estimated shipping</h5></td>
<td class="text-right"><h5><strong>$6.94</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
</button>
</td>
<td>
<button id="checkout" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="detailsDiv" class="detailsDiv"></div>
At first glance, if you want to show Stage 2 by clicking on the button, your click listener would need to be bound to the $('#search') button. In your code you are binding a click event to $('#loadPartialView'), which you don't show anywhere.
You also need to do a bit of debugging to see exactly where the issue is. You've posted some code, but you don't indicate what exactly is happening with the current code. Does the partial view get returned through the get successfully? Is the click listener firing?
You could put a breakpoint on the line
$("#Display").html(response);
and see if response has any contents. Presumably they should be HTML.
Regarding your second question about naming conventions of partial views. Typically if a partial view is used across controllers, I put it in /Shared. But if it is only used within one controller (seems like your case) putting the partial within the controller folder is fine. Yes, the _ is the proper convention for naming partials.
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"/>
I have created a master page with a basic login page and applied css in it. But i get styles only for background and footer only, other divs does not get applied.
so i decided to create a web form and copied it without contentplaceholder it works
My css code:
http://pastebin.com/raw.php?i=0N6SzL5p
My css working Web form code:
http://pastebin.com/raw.php?i=QrvttGqN
Master page code:
http://pastebin.com/raw.php?i=C2LH0SrE
And its content login page:
http://pastebin.com/raw.php?i=GdQpWnVX
I'm a newbie in asp and i'm not trolling.
If it is a silly mistake please point it out and help me
Based on your stylesheet, the problem with the master page was that you should have a wrapper <div> that surrounds all of your nested elements.
A lot of your <div id="xx"> elements should be changed to <div class="xx"> as your stylesheet is CSS class definitions. e.g.
From:
<div id="top" runat="server">
and..
<div id="mainpage" runat="server">
and..
To:
<div class="top">
and..
<div class="mainpage">
and..
<div class="footer">
Complete Master Page Changes
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Demo.master.cs" Inherits="UI.Master.Demo" %>
<!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 id="Head1" runat="server">
<link href="../CSS/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="topmiddle">
<div class="logreg" id="login_reg" runat="server">
Login
Register
</div>
<div class="userlog" id="user_logout" runat="server" visible="false">
Welcome<asp:Label ID="username" runat="server">!</asp:Label>
<a id="A3" href="Logout.aspx" class="atypesty" runat="server">LogOUT</a>
</div>
</div>
</div>
<div class="mainpage">
<table class="maintable">
<tr>
<td>
<img src="../Images/logo.jpg" class="logo" />
</td>
<td class="menucenter">
<ul id="Nav">
<li>
Home
</li>
<li id="Navprofile" runat="server">
<asp:LinkButton ID="lnbtn_Profile" runat="server"></asp:LinkButton>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="demo" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="footer">
<p>All words, images and code copyright ©2014 demo.com. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>