I am trying to fire a simple listen function on an iron-select event based on the selection of a value in a paper-dropdown-menu.
Here is my HTML's head
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script src="./js/app.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>
My HTML's body
<div class="assign-country">
<paper-dropdown-menu on-iron-select="listen" label="Country">
<paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item>France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
And my JS function
function listen () {
console.log('coucou');
}
The on-EVENTNAME="METHODNAME" is Polymer-specific syntax to setup an annotated event listener, but these annotations only work inside a Polymer template (inside a <dom-module> or <dom-bind>).
Given the example code and your intention to avoid Polymer syntax, you should setup the event listeners manually with a reference to the element. The same iron-select event fires on both <paper-dropdown-menu> and the inner <paper-listbox>, so you only need to listen to the iron-select event on one of them. Here's one solution:
Assign an ID to <paper-dropdown-menu> so that it can easily be referenced in JavaScript (with Document.getElementById()).
<paper-dropdown-menu id="mydropdown">
Add an event listener (with EventTarget.addEventListener()) to the <paper-dropdown-menu> reference:
const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));
const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));
function listen(e) {
console.log('iron-select', e);
document.getElementById('output').innerText = e.detail.item.innerText;
}
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<paper-dropdown-menu id="mydropdown" label="Country">
<paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item>France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<pre id="output"></pre>
</body>
Not too sure if it is what you are trying to achieve:
$('paper-item').click(function(){
console.log($(this).text());
})
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>
<div class="assign-country">
<paper-dropdown-menu on-iron-select="listen" label="Country">
<paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item name="france">France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
Related
i am using laravel and vuejs to develop single page application in my index.blade.php i am invoke app element vuejs
this is my index.blade.php
#extends('layout.header')
<div id="app" v-cloak v-on:shownav="shownavO()">
<nav_bar v-if="hide" :authType="authType" ></nav_bar>
<menuuu v-if="hide" :authType="authType" ></menuuu>
<router-view class="v-cloak--hidden"></router-view>
</div>
#extends('layout.footer')
<script src="{{asset('js/app.js')}}"></script>
in my layout.header it is a blade file i include css file
<!DOCTYPE html>
<html class="loading" lang="{{$lang}}" data-textdirection="{{$lang=='ar'?'rtl':'ltr'}}" id="app">
<!-- BEGIN: Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>munasbaty</title>
<link rel="apple-touch-icon" href="{{url('/')}}/app-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="{{url('/')}}/app-assets/images/ico/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<!-- BEGIN: Vendor CSS-->
#if(!isset($lang)||$lang=='en')
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/shepherd-theme-default.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/colors.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/semi-dark-layout.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/dashboard-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/plugins/tour/tour.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/css/style.css">
#endif
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body>
when update the page or when open the project the application It appears this way in the beginning
I have implemented a print function that allow the user to print a portion of a page.
This is the code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<meta charset="utf-8">
<title>MegaMark - Reporting App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="window.print();">${printContents}</body>
</html>`
);
popupWin.document.close();
}
The function runs properly, It open a new window with the content properly rendered.
The problem is that when I save the content as PDF file using "Microsoft print to PDF" as printer or "PDF Creator" , the PDF is not applying all the css properly...
I don't know if it is an angular problem or css problem...
Thanks to support
I am trying to use jQuery UI in my MVC 5 project. But I continue to get this .resizable/Resizable is not a function. It is the same for all of jQueryUI functions.. It looks like it keeps trying to see if those function reside in jQuery 3.1.1 instead of jQueryUI?
What I am trying to achieve.
https://jsfiddle.net/vp1dwuv3/
Uncaught TypeError: $(...).resizeable() is not a function
at HTMLDocument.<anonymous> (<anonymous>:2:22)
at mightThrow (jquery-3.1.1.js:3570)
at process (jquery-3.1.1.js:3638)
This is the of my page when it loads.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overview</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="/Content/themes/base/core.css" rel="stylesheet" />
<link href="/Content/themes/base/resizable.css" rel="stylesheet" />
<link href="/Content/themes/base/selectable.css" rel="stylesheet" />
<link href="/Content/themes/base/accordion.css" rel="stylesheet" />
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet" />
<link href="/Content/themes/base/button.css" rel="stylesheet" />
<link href="/Content/themes/base/dialog.css" rel="stylesheet" />
<link href="/Content/themes/base/slider.css" rel="stylesheet" />
<link href="/Content/themes/base/tabs.css" rel="stylesheet" />
<link href="/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="/Content/themes/base/progressbar.css" rel="stylesheet" />
<link href="/Content/themes/base/theme.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</head>
It is the same for all of jQueryUI functions.. It looks like it keeps trying to see if those function reside in jQuery 3.1.1 instead of jQueryUI
It means that the jquery ui files are not getting loaded, and as discussed in comments
So check if the path is correct, or the filename is proper, or the file exists at the said path.
Hopefully somebody can help me better understanding using app-router with Polymer. I have the following files - index.html, app.html and updates.html.
Everything is working as it should with the main layout appearing when I navigate to the root of the domain but nothing appears in the content area where I am trying to render the contents of the updates.html file using the app-router element.
Any help is much appreciated
index.html
<html>
<head>
<title>Example App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/app.html">
</head>
<body fullbleed unresolved>
<example-app></example-app>
</body>
</html>
app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/app-router/app-router.html">
<polymer-element name="example-app">
<template>
<core-scaffold id="scaffoldPanel">
<core-header-panel navigation flex>
<core-toolbar id="navheader" class="tall">
<img class="middle profile" src="../images/main-carer.png">
</core-toolbar>
</core-header-panel>
<core-toolbar tool flex>
<div id="main-title" flex>Example App</div>
<core-icon icon="search"></core-icon>
</core-toolbar>
<div class="content">
<app-router>
<app-route path="/" import="elements/updates.html" element="app-updates"></app-route>
</app-router>
</div>
</core-scaffold>
</template>
</polymer-element>
updates.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-updates">
<template>
<div vertical layout style="height:50px;">
<div flex class="home-update-menu"><h4>UPDATES</h4></div>
</div>
<div>Updates appear here</div>
</template>
</polymer-element>
Firefox goes as far as the then it keeps "loading" but does not load any component or anything at all.
<!doctype html>
<html>
<head>
<title class="titulo"></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-fab/paper-fab.html">
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="pagina.js"></script>
<link rel="stylesheet" href="pagina.css">
</head>
<body fullbleed>
<core-ajax url="" handleAs="json"></core-ajax>
<core-drawer-panel drawerWidth="320px" >
<core-header-panel drawer mode="standard" >
<paper-shadow z="2">
<core-toolbar id="topo-do-menu-lateral" class="medium-tall" >
<div id="toolbar-content"></div>
</core-toolbar>
<core-menu class="menulateral" id="menulateral" z="1" selected="0"></core-menu>
</paper-shadow>
</core-header-panel>
<core-header-panel id="main-content-header-panel" mode="waterfall" class="" main>
<!-- topo com tÃtulo -->
<core-toolbar id="topo-do-titulo" class="medium-tall middleJustify">
<paper-icon-button id="navicon" icon="menu" class="middle"></paper-icon-button>
<div id="titulo" class="indent middle" flex></div>
<paper-fab id="viva-close-button" icon="close" class="middle"></paper-fab>
<paper-shadow z="1"></paper-shadow>
</core-toolbar>
<div id="conteudo" class="indent" flex vertical layout center>
<responsive-embed id="responsiveEmbedContent">
</responsive-embed>
</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
Its all i have besides the style.css (which i can attach if you think it might help, i even copied all imports to the index.html because FF was blabing about it.
Hope someone can help me.
I believe it has something to do with Firefox same-origin policy for Ajax calls.
Have you tried setting up a web server on your localhost to serve index.html?