I'm adding a new web page to my app using polymer2. I've already done similar adds before but this one really does not show on the page even tho i have the imports and the components ready...
I'm starting to have some headaches watching my code trying to find what is wrong so maybe some of you will find the error instantly.
As i said before i've already implemented other pages on the app using the
Maybe the problem comes from the "lazy import" of my new component but it worked fine for the other previously added components.
i tried to look for misspelled DOM or components but everything looks fine
This is the menu from which i go to the other pages
<!-- i import the components like that -->
<link rel="lazy-import" href="c2m-connexion.html">
<link rel="lazy-import" href="c2m-newPage.html">
<app-drawer-layout id="drawerLayout" force-narrow>
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<div id="anonyme">
<a name="connexion" href="[[rootPath]]connexion">Connexion</a>
<a name="newPage" href="[[rootPath]]newPage">New Page !!</a>
</div>
<!--[... Some other pages in the menu ...]-->
<div id="top ">
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404 " role="main ">
<c2m-connexion name="connexion"></c2m-connexion>
<c2m-newPage name="newPage" subroute="{{subroute}}"></c2m-newPage>
<!-- other pages implemented the same way-->
</iron-pages>
</div>
i use this script cause all my files have a normalised name :
// Load page import on demand. Show 404 page if fails
let resolvedPageUrl = this.resolveUrl('c2m-' + page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
Now the component itself (c2m-newPage) :
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="./components/sweet-alert.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="./services/c2m-service.html">
<link rel="import" href="components/c2m-menu-newPage.html">
<dom-module id="c2m-newPage">
<!-- Defines the element's style and local DOM -->
<template>
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/util.css">
<style is="custom-style" include="shared-styles">
:host {
display: flex;
padding: 9px;
}
paper-input#email-input {
width: 50%;
}
.card-content paper-dropdown-menu {
width: 100%;
}
</style>
<!-- I TRIED PUTTING SOME TEXT HERE ASWELL TO SEE IF THE COMPONENT WAS LOADING BUT NOTHING APPEARED -->
<c2m-menu-newPage></c2m-menu-newPage>
<!-- Services -->
<c2m-service id="service"></c2m-service>
</template>
<script>
class C2mNewPage extends Polymer.Element {
/**
* #inheritdoc
**/
connectedCallback() {
super.connectedCallback();
}
static get is() {
return 'c2m-newPage';
}
}
customElements.define(C2mNewPage.is, C2mNewPage);
</script>
</dom-module>
i expect the page to show something, at this point the text i tried to put didn't even show and i think if i put a some text it is supposed to appear on the page. So i don't know where it comes from.
Thanks for the answers !
Renaming the element to c2m-new-page probably solves your problem.
Polymer does not go well with capitals, since your element has the name 'c2m-newPage' it probably can't be found when used in the dom, since it searches for an element with lower letters or with the Capital replaced by a dash-lowercase.
Related
So I'm trying out Elm and WebRTC together. However for WebRTC I need some interop to javascript. So I created an index.html with the needed script includes, for both WebRTC and main.js.
However, I am using elm-reactor. Which is super nice. But there is no main.js. I can create it with elm-make, but then I would have to manually update it.
So, is there a way to have elm-reactor work together with embedded elm?
Note: I'm using Elm 0.18, latest as of writing.
You might want to look at elm-live.
It has the same options that elm-reactor has, but you can use your own index.html.
As of today(0.18.0), officially you can not use elm-reactor for embedding your application into custom HTML. It is also impossible to have port subscriptions with elm-reactor without additional setup.
Consider using something like Create Elm App or alternatives.
If you're willing to hack a bit, it's perfectly possible to use your own index.html with elm reactor. Just put the following in an index.html file and open it in reactor (e.g. http://localhost:8000/src/index.html):
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
</head>
<body>
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: 'Source Sans Pro';">
<div style="font-size: 3em;">Building your project!</div>
<img src="/_reactor/waiting.gif">
<div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
</div>
</body>
<!-- Fonts and external JS and styles are available, I've put Ace for example -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>
<!-- Put the name of your app here (my sources place in `src` forder) -->
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script>
<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
runElmProgram();
</script>
</html>
If you want to use ports or flags, use the following example (you need Elm.App.fullscreen(flags) etc to use ports, but runElmProgram() to show errors):
<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}
try {
app = Elm.App.fullscreen(flags)
/* app.ports is now available */
} catch (e) {
// this will run in case there are compile errors:
var stylesheets = document.querySelectorAll('link')
for (var i = 0; i < stylesheets.length; i++) {
stylesheets[i].parentNode.removeChild(stylesheets[i])
}
runElmProgram()
}
</script>
I am new in MVC and i was looking for by above error but a i can't find it.
I create a partial view to EDIT and CHANGE the data base. Partial View is callling from INDEX.cshtml.
When I call one specific item the program below is executed at the first time in this point:
I have one field (date) with drop down. I use the datepicker function. In debug mode at the same program below is executed again because to the datepicker function and IN THIS MOMENT i receive a warning message at the command Open as shown at the second screenshot below.
_Edit.cshtml
Im my partial view I have the code below (part) with the datepicker. Two points. Will be this the problem (two points to datepicker ?).
Does anyone can help me to solve this problem ?
Thanks in advance
#model i_Projeto.Models.Ativ_Compr_Models
#using Newtonsoft.Json
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
.
.
.
.
.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script type="text/javascript">
$('#DeadLine').datepicker({
language: 'pt-BR',
autoclose: true,
orientation: "bottom right",
dateFormat: 'dd/mm/yyyy',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
I solved the problem!
remove it in partial view:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
And put it in the View Father.
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
I'm playing around with Polymer 0.4. I'm trying to do a jsonp request using polymer-jsonp component which I've installed using bower.
But it's not working, it looks to me like the polymer-jsonp component is not compatible with Polymer 0.4 and it has been deprecated according to this https://github.com/PolymerLabs/polymer-jsonp/releases/tag/0.3.0
I can see in my network panel that the polymer-jsonp comoponent is being correctly imported but even though it has the "auto" parameter it does not make the request at all. I'm not running it throug any JS code, I'm expecting it to run automatically because of the auto param and to bind it results to the results param value.
May I wait for a compatible version to be released or is there any way to use it or some alternative?
EDIT:
Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
<style>
#drawer {
background-color: #CCC;
}
#main {
background-color: #EBFA6F;
}
#main site-table {
padding: 20px;
}
</style>
</head>
<body unresolved>
<template>
<polymer-jsonp url="http://127.0.0.1/abmonitor-server/Ajax.class.php?callback=" auto response="{{ sitelist }}"></polymer-jsonp>
</template>
<core-drawer-panel>
<div id="drawer" drawer>
<sites-menu></sites-menu>
</div>
<div id="main" main>
<header>
<core-toolbar>Toolbar</core-toolbar>
</header>
<site-table></site-table>
</div>
</core-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Thank you very much.
The jsonp element really should be updated for core, it's just a nuisance that is hasn't been yet. However, I looked at the code, and I believe the old one should work just fine. It's possible you just have a simple problem in your setup.
I can see in the browser console that it is not being imported.
Make sure you have a <link> tag in your application that imports the element. Probably something like:
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html>
<head>
<!-- Meta / Boilerplate Stuff -->
<meta charset="UTF-8">
<title>Hey</title>
<!-- END Meta / Boilerplate Stuff -->
<!-- LESS + CSS links -->
<link rel="stylesheet/less" type="text/css" href="/resource/css/style.less">
<!-- END LESS + CSS links -->
<!-- Imported JavaScript -->
<script type="text/javascript">
// Dev-environment only LESS debugging object
less = {
env: "development",
dumpLineNumbers: "all"
};
</script>
<script type="text/javascript" href="/resource/js/imports/less.min.js"></script>
<script type="text/javascript" href="/resource/js/imports/jquery.min.js"></script>
<!-- END Imported JavaScript -->
<!-- In-house JavaScript -->
<script type="text/javascript" href="/resource/js/custom.js"></script>
<!-- END In-house JavaScript -->
</head>
Here's my head element, and the URL: http://boilerplate.samstil.es/
My LESS isn't compiling and I can't for the life of me figure out why. I'm not getting any 404's in the console.
LESS doesn't like the space between the -webkit-linear-gradient and the ( in the vertical-gradient and horizontal-gradient mixins. Where you have:
background-image : -webkit-linear-gradient (left, #startColor, #endColor);
you should have
background-image : -webkit-linear-gradient(left, #startColor, #endColor);
Make sure you do this with the other background-image options. I tested this with the online less compiler, available at: http://winless.org/online-less-compiler
Hope this helps!
I have found a few questions relating to this, but generally there are many different answers and they all seem very messy and complex.
If that is what needs to be done, then ok i better sit down and tackle it.
I want to know what the simplest and most efficient way is to add content to your head from partial views.
Reason I need to do this is i need certain java script and jquery on each page and it differs from page to page. I donot just want to add them all in the _layout view.
You can do this with sections. For example:
I have more than two view which each other has same _Layout.My Index action in Company Controller has a sections as follow:
#model Invoice.Model.HelperClasses.CompanyViewModel
#{
ViewBag.Title = "Companies";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section usage{
<link href="~/css/uniform.default.css" rel="stylesheet" />
}
#section other{
<link href="~/css/datepicker.css" rel="stylesheet" />
<link href="~/css/SimpleSlide.css" rel="stylesheet" />
<link href="~/css/responsive-tables.css" rel="stylesheet" />
}
#section script
{
<script src="~/js/datepicker/bootstrap-datepicker.js"></script>
}
and Display Action in Invoice controller has same sections but different css and js as follow:
#model Invoice.Model.HelperClasses.InvoiceViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section usage{
#*<link href="~/css/uniform.default.css" rel="stylesheet" />*#
}
#section other{
<link href="~/css/DT_bootstrap.css" rel="stylesheet" />
<link href="~/css/responsive-tables.css" rel="stylesheet" />
<script src="~/js/datatables/extras/ZeroClipboard.js"></script>
}
#section script
{
<script src="~/js/datepicker/bootstrap-datepicker.js"></script>
<script src="~/js/validate/jquery.metadata.js"></script>
<script src="~/js/validate/jquery.validate.js"></script>
}
and then you can use this section in _Layout but its required argument should be false. Look at:
<!DOCTYPE html>
<html>
<head>
<!--usage-->
#RenderSection("usage", required: false)
<!--other-->
#RenderSection("other", required: false)
<!--script-->
#RenderSection("script", required: false)
<head>
<body>
</body>
</html>
On your _Layout.cshtml page (Or any other master page) Use following code on inside of <head></head> tag.
#if (IsSectionDefined("SpecialOther"))
{
#RenderSection("SpecialOther")
}
On the page that you want special css,script or any other item, specify their refernces. e.g.,
#section SpecialOther{
<link href="~/css/responsive-tables.css" rel="stylesheet" />
<script src="~/js/datatables/extras/ZeroClipboard.js"></script>
}