What: I am creating a Chrome Extension.
Setup:
When I click the extension icon, it loads popup.html as a window. I am trying to load a JSON table of data using this code http://bootstrap-table.wenzhixin.net.cn/examples/ into a pretty HTML table.
Problem: The table loads fine. The javascript appears to be working fine but the stylesheet does not appear to be working. I linked to the local stylesheet in the head of popup.html which loads when I click the extensions's icon in Chrome like so...
<link rel="stylesheet" type="text/css" href="bootstrap-table.css">
Question: Do I need to add it to the manifest somewhere? I just need the stylesheet for the popup html. I dont need to inject it into the web page. I am just trying to display a pretty html table.
manifest.json
{
"manifest_version": 2,
"name": "Chrome Extension",
"description": "Analyze page.",
"version": "0.1",
"icons": { "32": "icon32.png",
"72": "icon72.png",
"114": "icon114.png",
"144": "icon144.png" },
"browser_action": {
"default_icon": "icon32.png",
"default_popup": "popup.html"
},
"web_accessible_resources": [
"bootstrap-table.css",
],
"permissions": [
"activeTab",
]
}
// see http://bootstrap-table.wenzhixin.net.cn/documentation/
// see http://issues.wenzhixin.net.cn/bootstrap-table/#methods/getSelections.html
var data = [
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
},
{
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
},
{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
function renderStatus(statusText) {
document.getElementById('status').textContent = statusText;
}
// MAIN CODE: on click of extension icon
document.addEventListener('DOMContentLoaded', function() {
//renderStatus('Test1');
//$('#status').append('Test2');
$(function () {
$('#table').bootstrapTable({
data: data
});
var $table = $('#table');
$('#select-button').click(function () {
var msg = 'getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'));
renderStatus(msg);
});
});
});
<!doctype html>
<html>
<head>
<title>Chrome Extension</title>
<link rel="stylesheet" type="text/css" href="bootstrap-table.css">
<style>
body{
width:820px;
height:400px;
}
#table{
width:100%;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-table.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="status"></div>
<div class="toolbar">
<button id="select-button" class="btn btn-default">Selected Rows</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-heart"></i>
</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<table
data-show-columns="true"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-height="460"
id="table">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name"
data-switchable="false"
data-sortable="true">
Name
</th>
<th data-field="stargazers_count"
data-sortable="true">
Stars
</th>
<th data-field="forks_count"
data-sortable="true">
Forks
</th>
<th data-field="description"
data-visible="false"
data-sortable="true">
Description
</th>
</tr>
</thead>
</table>
</body>
</html>
In my experience, referencing CSS files included in the extension from the popup does work without adding anything CSS specific to the manifest.
After modifying the manifest so it loads, your sample above does work for me, producing a well formatted table. The manifest I used:
{
"manifest_version": 2,
"name": "Chrome Extension",
"description": "Analyze page.",
"version": "0.1",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Related
I need to create a dynamic form with multiple nested items. I've found this example
but i'm not sure it's doing deep recursive since once i've tried to add more levels of nested items - the ui brakes down.
Here is the default json structure with my attempts :
{
key: "common",
title: "main fields",
group: [
{
key: "createdAt",
title: "Create Date",
type: "date"
},
// group:[{
// key: "foo",
// title: "Foo",
// type: "select",
// },
// {
// key: "goo",
// title: "Goo",
// type: "input",
// },
// ]
]
},
So as you can see under "common" - i've added 2 more levels of groups - the first group works fine - but the nested group with key "foo" and "goo" it's working.
I'm pretty sure the problem is in the template / markup
<form [formGroup]="filterForm" class="filter-form">
<ng-template #recursiveList let-filterFields let-fromGroup="fromGroup">
<ng-container *ngFor="let item of filterFields">
<ng-container *ngIf="item.group; else default;">
// in this area i'm not sure it's iterate over deeper nesting...
<p>{{item.key}} </p>
<div [formGroupName]="item.key">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit:
item.group, fromGroup: {name: item.key}, isChild:true }"></ng-container>
</div>
</ng-container>
<ng-template #default>
<div class="form-group" [formGroupName]="fromGroup.name">
<input [type]="item.type" [formControlName]="item.key"
[placeholder]="item.title" [name]="item.key" />
</div>
</ng-template>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields
}">.
From my understanding, there are two issues in the example you provided:
The data structure.
The template.
Data Structure
These are the interfaces I understand from your example:
interface Base {
key: string;
title: string;
}
interface Field extends Base {
type: 'select' | 'input' | 'date' | ...
}
interface Group extends Base {
group: Array<Field | Group>
}
So the JSON example you provided should look something like this:
{
"key": "common",
"title": "main fields",
"group": [
{
"key": "createdAt",
"title": "Create Date",
"type": "date"
},
{
"key": "test",
"title": "Test"
"group": [
{
"key": "foo",
"title": "Foo",
"type": "select"
},
{
"key": "goo",
"title": "Goo",
"type": "input"
}
]
}
]
}
Template
Let's look at a very simplified version of the form:
<form [formGroup]="filterForm">
<ng-container formGroupName="common">
<ng-container *ngTemplateOutlet="control;
context:{ controlName: 'foo', group: 'test' }">
</ng-container>
</ng-container>
<ng-template #control let-group="group" let-controlName="controlName">
<div class="col-md-3">
<div class="form-group" [formGroupName]="group">
<input type="input" [formControlName]="controlName" />
</div>
</div>
</ng-template>
</form>
The code won't work, why? Think about the ng-template as a function. If you want it to know about the formGroupName="common" it needs to be declared within that scope. What matters is the declaration context and not the invocation context, just like regular functions.
This is the working version of the above example:
<form [formGroup]="filterForm">
<ng-container formGroupName="common">
<ng-container *ngTemplateOutlet="control;
context:{ controlName: 'foo', group: 'test' }">
</ng-container>
<ng-template #control let-group="group" let-controlName="controlName">
<div class="col-md-3">
<div class="form-group" [formGroupName]="group">
<input type="input" [formControlName]="controlName" />
</div>
</div>
</ng-template>
</ng-container>
</form>
Things get trickier when you have nested and you need to use recursion.
That's why I think that the approach of using the formGroupName and formControlName directives in this scenario makes things more complicated than they are.
I suggest passing the form control directly into the input by providing the right path to it.
Here is a working example of the idea based on your original example.
#Bean
public RestTemplate restTemplate(RestTemplateBuilder builder) {
return builder.build();
}
#GetMapping("/printJson")
public String getJson(#RequestParam(name="reports", required=false, defaultValue="None") RestTemplate restTemplate, Model model) throws Exception {
List<DailyReport> reports = restTemplate.getForObject("http://localhost:8080/pwa/services/dailyReport/all",
(Class<List<DailyReport>>) ((Class)List.class));
model.addAttribute("reports", reports);
return "printJson";
}
Hi, I am trying to consume my own webservice with restTemplate. On my webservice I have stored data with JSON and I want to print it or use it with a web application
This is what my json file looks like :
{
"serial_number": 202102,
"report_date":"2019-11-23T23:00:00.000+0000",
"status": "en service",
"automate_information":{
"state": "ok",
"temperature": 20,
"payment_state":{
"coins": "normal",
"smart_card": "normal",
"card": "normal"
}
},
"errors":[
{"type": "ax23", "description": "azerty"},
{"type": "cx400", "description": "qzerty"}
],
"articles":[
{"name": "cafe", "quantity": 20},
{"name": "chocolat", "quantity": 30},
{"name": "oasis", "quantity": 10}
],
"income": 300
}
I have made a matching structure with the same names and all, but when I launch my application and I go on the corresponding view :
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>JSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<tr th:each="report: ${reports}">
<td th:text="${report.id}" />
<td th:text="${report.serial_number}" />
</tr>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign Out"/>
</form>
</body>
</html>
Nothing at all is printed. When I tried to call the .size() on the variable reports, I had the error : Cannot call .size() function on null.
I have searched everywhere, and looked back at my structure to see if the names were exactly alike and didn't find anything.
Is there something wrong I am doing with resttemplate ?
Thank you a lot for your help, I might have done a lot of mistakes I am new to spring.
Any idea why the onRefresh event is not firing? First time through the table displays properly. But when clicking the refresh button it does not work (event does not fire). I thought this worked before, but I think a new version of bootstrap.min.js may have killed it (or perhaps it is just a coincidence). Any help would be helpful.
HTML:
<table id="stats-view-output4" data-pagination="false" data-show-refresh="true" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-show-header="false" data-show-footer="false">
</table>
Javascript (a button gets u to this function):
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
onRefresh: function (params) {
bpt_pie_chart();
},
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
Well, I gave up and did a brut force solution. Feels like a bug of a conflict somewhere. For anyone stumbling onto this here it is:
HTML:
<div id="toolbar4">
<div class="form-inline" role="form">
<button id="refresh4" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<table id="stats-view-output4" data-pagination="false" data-show-refresh="false" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-toolbar="#toolbar4" data-toolbar-align="right"
data-show-header="true" data-show-footer="false" style="font-size:11px;">
</table>
Javascript:
$(function () {
$('#refresh4').click(function () {
bpt_pie_chart();
});
});
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
I want create Jquery Datatable with Paging,Sorting,Searching in my ASP.NET web Api project as this youtube clip
in my bootstrap table as shown below. I don not recieve any Error but not showing me pagin field, serach field .. nothing showing me just my table. I understan it's not the same table form as that youtube clip but how should I do have the same functionality as him.
<!DOCTYPE html>
<html>
<head>
<title>Countries</title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.js"></script> // Tried even with jquery-1.12.4.js
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover table table-responsive success" id="countriesTable">
<thead>
<tr>
<th>
Country Id
</th>
<th>
Country name
</th>
<th class="col-md-2">
Action
</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#countriesTable').DataTable({
"bSort": true,
"bFilter": true,
"bPaginate": true,
"bProcessing": true
});
loadCountries();
}
function loadCountries() {
$('#compTable').DataTable({
"bSort": true,
"bFilter": true,
"bPaginate": true,
"bProcessing": true
});
$.ajax({
url: "/Api/Countries",
type: "GET",
headers: {
'Authorization': 'Bearer ' + sessionStorage.getItem('accessToken')
},
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.CountryId + '</td>';
html += '<td>' + item.CountryName + '</td>';
html += '<td><Button class="btn btn-primary" onclick="return getByID(' + item.CountryId + ')">Edit</button> <Button class="btn btn-danger btn-md" onclick="return Delete(' + item.CountryId + ')">Delete</Button></td>';
html += '</tr>';
});
$('.tbody').html(html);
},
error: function (jqXHR) {
if (jqXHR.status == "401") {
$('#errorModal').modal('show');
}
else {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
}
});
}
</script>
You have to initialize the table correctly and also add proper dependent library from the documentation page. To get you started
$('#countriesTable').DataTable({
"bSort": true,
"bFilter": true,
"bPaginate": true,
"bProcessing": true
})
For the small arrow buttons in the column heads (which indicates sorting direction etc.) you need to add proper glyphicon libraries.
You can learn more options here.
How to find the proper dependent library?
Check this example. In the example section there 3 parts HTML, CSS and javascript. They mentioned the libraries there. You need to add them in the correct order they are mentioned.
As per your requirement you need to feature that dattable provides with table generation. After ajax call is made a response is found. Now you get the data from it and map it to appropriate columns.
$('#my-table').DataTable({
ajax: {
url:websiteurl,
data:function(dtl){
}
},
columns: [
{ data: 'col1'},
{ data: 'col2'},
]
});
HTML:
<table id ="my-table" class="table table-striped table-responsive sorting " >
<thead>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Remember
For this you hvae to build the json output in the fom of array of objects.
JSONArray ja= new JSONArray();
JSONObject jo = new JSONObject();
jo.put("col1",col1val);
jo.put("col2",col2val);
ja.put(jo);
return ja in the response.
You might think
Can I put a html button code in a json string ..yes you can. Try that.
Referrence:Link
we need to customize footer to keep it build version in facted search screen in 5.1.1;i have followed below link.
http://pavelmakhov.com/2016/02/customize-alfresco-footer-aikau
now after implementing it entire footer was not visible.its calling faceted-search.get.js & custom widget.js;I think there is some problem with custom html file.
custom-footer.html
<div class="alfresco-footer-AlfShareFooter" data-dojo-attach-point="footerParentNode">
<span class="copyright" data-dojo-attach-point="footerContainerNode">
<a href="#" onclick="Alfresco.module.getAboutShareInstance().show(); return false;">
<img src="${logoImageSrc}" alt="${altText}" border="0"/>
</a>
<span>Buildversion:${buildVersion}</span>
<span class="licenseHolder" data-dojo-attach-point="licenseHolderNode">${licensedToLabel} ${licenseLabel}<br></span>
<span>${copyrightLabel}</span>
</span>
</div>
faceted-search.get.js
var footer = widgetUtils.findObject(model.jsonModel, "id", "ALF_STICKY_FOOTER");
logger.log("footer:"+footer);
footer.config.widgetsForFooter = [{
name: "blogs/footer/search-footer", config: {
semanticWrapper: "footer",
currentYear: new Date().getFullYear(),
buildVersion: "2.0.0",
buildDate: "4th Nov 2016"
}
}];