i am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
Related
I am migrating a small project from Bootstrap 4 to 5, and I noticed that tables are displayed differently in Bootstrap 5. Now, no border is drawn above the first row (if you don't have a header), but below the last row.
What is the easiest way to get the old behavior back? I use this table in many places. What I would like is a solution that I can apply to all tables without having to copy a lot of code each time. The solution should also work if the table has more or less rows than in the example. I have tried different approaches (for older versions) but have not found anything that exactly brings back the desired behavior. Unfortunately, I am an absolute CSS beginner and use Bootstrap almost only as it comes out of the box.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<main class="py-4">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">
<table class="table">
<tbody>
<tr>
<th scope="row">First entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Second entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Third entry</th>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Result so far (Bootstrap 4.6.2):
Result current (Bootstrap 5.2.3):
You can add your own custom CSS that overrides the Bootstrap 5 border:
.table > :not(caption) > * > * {
border-bottom-width: 0px; /* Remove Bootstrap's bottom border */
border-top-width: 1px; /* Add a top border */
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<title>Demo</title>
<style>
.table > :not(caption) > * > *
{
border-bottom-width: 0px;
border-top-width: 1px;
}
</style>
</head>
<body>
<main class="py-4">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">
<table class="table">
<tbody>
<tr>
<th scope="row">First entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Second entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Third entry</th>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I was trying to make an accordion in my page with this tutorial but nothing works. This is my view:
#model SGP.Models.Queries
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<h3>Assiduidade</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query1)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Nome)
</td>
...
</tr>
}
</table>
}
</div>
<h3>Avaliação</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query2)
{
<tr>
...
</tr>
}
</table>
}
</div>
</div>
This is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - SGP</title>
...
#Styles.Render("~/Content/fullcalendar")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
...
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/fullcalendar")
#RenderSection("scripts", required: false)
</body>
</html>
But when i run my application, there is no accordion. I added the jQuery-ui.css and the code in the BundleConfig like it says in the tutorial but nothing works. What am i doing wrong? Thanks
All you need is to include jquery plugin and jquery-ui.css in your view.
Another solution is to set layout in top of view.
#{
Layout="~/your_layout_path";
}
Here is an example of working solution
I know this might be easy but somehow I'm unable to implement foreach for a knockout binding. The code is as below:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section scripts
{
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
}
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
And the rendered HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/knockout.debug.js"></script>
<script src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="/Scripts/knockout.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
The problem is that the foreach doesn't work as implemented in the code. The error I get is (debugged using Knockout context):
ExtensionError: TypeError message: "Object.getOwnPropertyNames called
on non-object" stack: (...) get stack: function () { [native code] }
set stack: function () { [native code] }
proto: Error info: "Please select a dom node with ko data."
Uncaught TypeError: undefined is not a function
I have trying this for a while now but with no success.
Thanks.
So I solved it!
The problem was that knockout 2.0 has a line of code:
var elems = jQuery['clean']([html]);
But the jQuery 1.10 that I was using deprecated the clean method.
So I upgraded my knockout to 3.0 and it worked!
Thanks to #Boaz for answering this question on stackoverflow
I have option of photo upload in my create.gsp page. I'm able to see the uploaded photo in my create page and able to upload my photo in database, but cannot see that photo in my show page.
This is create.gsp page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="billing-without-grid" />
<g:set var="entityName"
value="${message(code: 'skeletonBill.label', default: 'SkeletonBill')}" />
<title><g:message code="default.create.label"
args="[entityName]" /></title>
<script>
function showPhoto(imageFile) {
var fileReader = new FileReader();
var image = document.getElementById("uploadPhotoFile");
fileReader.onload = function(e) {
image.src = e.target.result;
}
fileReader.readAsDataURL(imageFile.files[0]);
}
</script>
</head>
<body>
<div class="body">
<div class="container-fluid">
<div class="row">
<div class="span6">
<img src="" name="uploadPhotoFile" id="uploadPhotoFile"
height="200" width="160" />
<table style="width: 25%">
<tbody>
<tr class="prop">
<td valign="top" class="name"><label for="uploadPhoto"><g:message code="uploadInformation.uploadPhoto.label" default="Upload Photo" /></label></td>
<td valign="top" class="value ${hasErrors(bean: uploadInformationInstance, field: 'uploadPhoto', 'errors')}">
<input type="file" id="uploadPhoto" name="uploadPhoto" onchange="showPhoto(this)" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html> '
Domain class that I created
class UploadInformation {
static constraints = {
uploadPhoto(nullable:true, maxSize: 16384 /* 16K */)
}
byte[] uploadPhoto
static transients = ["uploadPhoto"]
static mapping = {
uploadPhoto column:"uploadPhoto",sqlType: "blob"
}
}
Anuj.
The problem I see after quick look at your code is:
static transients = ["uploadPhoto"]
UploadPhoto will not be saved to database because it's declarated as transient.
See more details transient properties
Ive looked everywhere for this. How can a link specify the title of a tab and url to load?
Something like:
Create new tab dynamically
And how can I close the tab?
The closest I found is http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html but id prefer to use jquery
Thanks
UPDATE
I found jeasyui and looks really simple but Im having some problems. heres my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function open1(title,plugin){
if ($('#tt').tabs('exists',title)){
$('#tt').tabs('select', title);
} else {
$('#tt').tabs('add',{
title:title,
href:plugin,
closable:true,
extractor:function(data){
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
}
});
}
}
</script>
</head>
<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#666;text-align:center">
<div id="header-inner">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td rowspan="2" style="width:20px;">
</td>
<td style="height:52px;">
<div style="color:#fff;font-size:22px;font-weight:bold;">
TEST
</div>
</td>
<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
</td>
</tr>
</table>
</div>
</div>
<div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Base</span><ul>
<li iconCls="icon-gears">test</li>
<li iconCls="icon-gears">test1</li>
<li iconCls="icon-gears">test2</li>
<li iconCls="icon-gears">test3</li>
</ul>
</div>
<div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
<h1>Hello</h1>
</div>
<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Welcome" href="dashbord.php"></div>
</div>
</div>
</body>
</html>
It adds a new tab with a title but it doesn't load the URL(demo.php)
Use jQuery UI !!!
http://jqueryui.com/demos/tabs/#manipulation