I am trying to display a table data using vaadin-grid, embedded within a paper-header-panel element. The data is supposed to come from a Rest call. The Rest client used is and I am binding the last-response attribute with the 'items' attribute of the vaadin-grid. When I am inspecting the HTML using firebug, I am able to see the table is properly getting created, but in the frontend nothing is getting visible.
Below is my custom element: 'aws-api-gateway-call'
<template>
<iron-ajax
auto
url="{{url}}"
handle-as="json"
last-response="{{handleResponse}}">
</iron-ajax>
<vaadin-grid items="{{handleResponse}}" selection-mode="multi">
<table>
<colgroup>
<col name="fileName">
<col name="titleName">
<col name="artist">
<col name="albumName">
<col name="action">
</colgroup>
<thead>
<tr>
<th style="z-index: 10">MP3 File Name</th>
<th>Title Name</th>
<th>Artist Name</th>
<th>Album Name</th>
<th>Action</th>
</tr>
</thead>
</table>
</vaadin-grid>
</template>
<script>
Polymer({
is: "aws-api-gateway-call",
properties : {
hostname:{
value: 'test',
notify: true
},
stage:{
value: 'test',
notify: true
},
method:{
value: 'test',
notify: true
},
url:{
computed: 'computeUrl(hostname, stage, method)'
}
},
computeUrl: function(hostname, stage, method){
console.log('URL to call-->' + [hostname, stage, method].join('/'))
return [hostname, stage, method].join('/')
}
});
</script>
And, here is my :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>An Web-app to customize MP3 songs' metadata</title>
<link rel="shortcut icon" href="img/vector-black-ipod-10170961.jpg" />
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="bower_components/prefixfree/prefixfree.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="elements/api_calls.html">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="fullbleed layout vertical">
<paper-header-panel class="flex">
<div class="paper-header ipodHeaderPanel">My Ipod Customizer Application</div>
<div class="content">
<aws-api-gateway-call
hostname="https://<acct-id>.execute-api.us-west-2.amazonaws.com"
stage="mp3file"
method="MP3MetadataReadMicroService">
</aws-api-gateway-call>
</div>
</paper-header-panel>
</body>
</html>
Can you please help me understand the issue? And how to fix it?
I had the same problem with paper-scroll-header-panel and vaadin-grid. I found two causes/solutions for this:
A quick inspect revealed the page-scroll-header-panel had a height of 0px. Making sure that the pager-scroll-header-panel height was 100% fixed it:
.max-height {
height: 100%;
}
<paper-scroll-header-panel fixed class="max-height">
</paper-scroll-header-panel>
The paper-scroll-header-panel will create a mainContainer div and height: with position:'absolute' to place it's contents (which vaadin-grid might not like).
If the height is not your problem then try to override the position of the mainContainer to 'relative' to diagnose:
#mainContainer.paper-scroll-header-panel {
position: relative !important;
}
Disclaimer: Try to stay away from the !important clause, it usually causes huge negative impact on the style sheet’s maintainability. Inspect the mainContainer closely first since height:0 is usually the cause for this kind of things.
Hope this helps!
Related
i want to read this txt-file using datatables.net
https://www.rapidtech1898.com/aaadownload/arrays.txt
But when i want to use the file with the following files the output is not working i have this error in the chrome inspector:
(datatables is not reading as it sould and the inspector shows me that)
(at first i had the txt-file locally and read that there are some problems with that using chrome with local file - but this is a "normal" http-link isn´t it? - why is this stil not working as expected?
I also tried to do the same thing locally before - but i get the same error:
I have an index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container py-5">
<header class="text-center text-white">
<h1 class="display-4">Levermann Scores</h1>
</header>
<div class="row py-5">
<div class="col-lg-10 mx-auto">
<div class="card rounded shadow border-0">
<div class="card-body p-5 bg-white rounded">
<div class="table-responsive">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="mainAJAX.js"></script>
</body>
</html>
And this is the mainAJAX.js file:
$(document).ready(function() {
$('#example').DataTable( {
// "ajax": "http://localhost:2121/arrays.txt"
"ajax": "https://www.rapidtech1898.com/aaadownload/arrays.txt"
} );
} );
Somebody told me - that if also the server is hosted on the same domain (like rapidtech1898.com) it would probably work. But is there no way to test such think locally before deploying this somewhere else?
For reasons of security, that is how CORS works. You cannot request data from a different origin unless the server allows it. However, for the purpose of development, you can disable CORS in multiple ways. There is a nice article for it here. But my personal favourite is this solution (to use a proxy that doesn't bypasses CORS):
fetch('https://cors-anywhere.herokuapp.com/https://www.rapidtech1898.com/aaadownload/arrays.txt', {
method: "GET",
headers: {
"Content-type": "application/json;charset=UTF-8",
"x-requested-with": "localhost:3000"
}
}).then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err));
I think i found the problem -
In the server-js i have to usse express.static for the data-folder:
const express = require("express");
const app = express();
app.use(express.static('data'))
app.listen(2121, () => {
console.log("Server is running on port 2121...");
});
And in the datafolder i have to put all files (index.html, mainAJAX.js and arrays.txt).
Then i can call the text-file in the mainAJAX.js like that:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "arrays.txt"
} );
} );
Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off
index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Big header</h1>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<!-- at the bottom of the page -->
<script src="bundle.js"></script>
</body>
</html>
app.scss:
#import "material-components-web/material-components-web";
app.js:
import * as mdc from 'material-components-web'
mdc.autoInit()
I have no other files pulling in. No other styles added. What could be happening?
That usually happens when .mdc-text-field__input has incorrect box-sizing (for example, inheriting parental .mdc-text-field's border-box). Please ensure that .mdc-text-field__input has initial box-sizing:
.mdc-text-field__input {
box-sizing: initial; // or content-box
}
The following worked for me: add the following to a custom style sheet.
.mdc-text-field {
width: -webkit-fill-available;
width: fill-available;
}
I am having a trouble trying to access a nested div that has id and class, I don't know why but I only can see his parent.
This is the HTML code:
<html xml: lang="en" xmlns="http://www.w3.org/1999/xhtml" webdriver="true">
<head id="ctl00_Head1"></head>
<body onunload="deshabilitaHistoria();" onload="deshabilitaHistoria();">
<form id="aspnetForm" action="ConsultaReceptor.aspx" method="post">
<div class="aspNetHidden"></div>
<script type="text/javascript">
//<![CDATA[ var theForm = document.forms['aspnetF…
</script>
<script type="text/javascript" src="/WebResource.axd?d=w3hP2KgSK0z5QKKeYrfjOjGIUO1WTymINPb1PJaT2…AjAREgWLQ_9gOp19BJLQL03iwEhxTK_VlYMMLk1&t=635757173565717094"></script>
<script type="text/javascript" src="/ScriptResource.axd?d=JZxa8gqDBBrScXZMeyf5kBYrESwOlB3UypK5wa…sdGfW92qpYAba8RsL1xfZ_4qsx20HZ3gnR8gWNG81&t=ffffffff805766b3"></script>
<script type="text/javascript" src="/ScriptResource.axd?d=Z6KcuJ_OzxT6nvHmSunXcYkoXPPYk2iZ6iqqza…Mhq8K8bd09EWTYt8d-AfoMh3rrp75DWb5vMAI1wb0&t=ffffffff805766b3"></script>
<script type="text/javascript">
//<![CDATA[ var PageMethods = function() { PageMe…
</script>
<div class="aspNetHidden"></div>
<script type="text/javascript">
//<![CDATA[ Sys.WebForms.PageRequestManager._init…
</script>
<div id="cuerpo_principal">
<div id="encabezado"></div>
<div id="menucontainer"></div>
<div id="cuerpo" style="margin-top: 30px">
<h2 class="subtitle">
Consultar Facturas Recibidas
</h2>
<span></span>
<br></br>
<br></br>
<div id="ctl00_MainContent_PnlConsulta" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_MainContent_BtnBusqueda')">
<div id="ctl00_MainContent_UpnlBusqueda"></div>
<div id="ctl00_MainContent_UpnlResultados">
<div id="ctl00_MainContent_PnlResultados" class="pnlResultados" style="height:auto;display:inline;">
<div id="DivContenedor" class="resultados" style="width: 900px; margin-left: 40px; overflow-x: scroll; height: auto; float: left">
<div id="ContenedorDinamico" style="margin-left: 0px;">
<table class="encabezadoresultado"></table>
<div id="DivPaginas" style="height: auto;">
<div id="masivapg0" class="pgActual"></div>
The div that i am trying to access is
div id="masivapg0" class="pgActual"
I am trying to access the element by the following code, however i always get a false result:
print browser.form(id: 'aspnetForm').div(id: 'cuerpo_principal').div(id: 'cuerpo').div(id: 'ctl00_MainContent_PnlConsulta').div(id: 'ctl00_MainContent_UpnlResultados').div(id: 'ctl00_MainContent_PnlResultados').div(id: 'DivContenedor').div(id: 'ContenedorDinamico').div(id: 'DivPaginas').div(id: 'masivapg0').exist?
But if i search for his parent i always get a true response:
print browser.form(id: 'aspnetForm').div(id: 'cuerpo_principal').div(id: 'cuerpo').div(id: 'ctl00_MainContent_PnlConsulta').div(id: 'ctl00_MainContent_UpnlResultados').div(id: 'ctl00_MainContent_PnlResultados').div(id: 'DivContenedor').div(id: 'ContenedorDinamico').div(id: 'DivPaginas').exist?
Any idea of why could this be happening?
your help is appreciated!
I loaded your html into a file and ran it in watir and, while the browser didn't display anything likely due to the incomplete html code, it didn't have any problem returning true like so:
browser.div(:id => "masivapg0").exists?
#=> true
id tags are supposed to be unique, so you shouldn't have to provide any more selectors than this...
I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/
Hello i have something very simple:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap-responsive.min.css">
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="{{adminUrl}}/assets/js/vendors/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{adminUrl}}/assets/js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 20px; background: #fafafa; border-bottom: solid 1px #eee">
users list/no paging
create new user
</div>
<h1>List data:</h1>
<ol>
{{#each data}}
<li>
<div><b>{{username}} - {{id}}</b></div>
{{email}}
<div> </div>
</li>
{{/each}}
</ol>
</body>
</html>
This is an expressjs view that uses handlebars. 'adminUrl' is in app.locals.
app.locals({
adminUrl: _config.rootUrl
});
In the css, js and a href links outside the {{#each works just fine, but in the {{#each... does not. How can i fix it to work?
try {{../adminUrl}} within your {{#each}} block as I believe handlebars will change the context to be the current member of data and thus you need .. to access the parent context.