Here my code:
<!DOCTYPE html>
<html>
<head>
<script src="/client/polymer-0.5.2/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link href="/client/polymer-0.5.2/bower_components/polymer/polymer.html" rel="import">
<link href="/client/polymer-0.5.2/bower_components/core-ajax/core-ajax.html" rel="import">
</head>
<body>
<core-ajax id="directorInfoAjax" url="/main.ashx?action=directorInfo" handleAs="text" on-core-response="callback">
<script>
Polymer(
{
callback: function ()
{
var bp = this.response;
}
});
</script>
</core-ajax>
<script>
document.addEventListener('polymer-ready', function()
{
document.querySelector("#directorInfoAjax").go();
});
</script>
</body>
</html>
What wrong? Call back not fire.
111111111111111111111111111111111111
222222222222222222222222222222222222
333333333333333333333333333333333333
As far as I know, you aren't using <core-ajax> as it should be used.
Here you have a working example for <core-ajax>:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/components/core-elements/core-elements.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html">
</head>
<body>
<core-ajax id="directorInfoAjax" url="http://echo.jsontest.com/key/value" handleAs="text" on-core-response="{{callback}}"></core-ajax>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response", function(e) {
alert("I received a response "+ this.response);
console.log(this.response);
}
);
ajax.go(); // Call its API methods.
});
</script>
</body>
</html>
In your code, the Polyymer declaration inside the component doesn't seem to work, and even if it worked, the callback function need to be wrapped in {{ }}.
A Plunker here: http://plnkr.co/edit/rOuNPu99D7ROX4ewbLnK?p=preview
I hope it helps, but if not, don't hesitate to ask for further information!
[EDIT] I wrote a simpler example
Check the below tutorial it might help you to figure out the issue:-
http://www.tutorialsavvy.com/2014/07/understanding-polymer-core-ajax-element.html
Related
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
I am implementing a simple routing app in polymer.js using iron-pages and page.js but this is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="routes.html">
<title>Document</title>
</head>
<body>
<div is="dom-bind" id="app">
<a data-route="home" href="/">home</a>
<a data-route="users" href="/users">users</a>
<a data-route="settings" href="/settings">settings</a>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">Home</section>
<section data-route="users">Users</section>
<section data-route="settings">Settings</section>
</iron-pages>
</div>
</body>
</html>
<script src="/bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
page('/', function() {
app.route = 'home'
console.log(app.route)
// console.log('home')
})
page('/users', function () {
app.route = 'users'
})
page('/settings', function () {
app.route = 'settings'
})
page({
hashbang: false
})
})
</script>
Everything seems okay but this is not working.
At first, you should NOT use iron-pages in index.html.. It's much more easier and in future of your application also necessary to create new element where is located all the structure logic (routing, some popup elements etc...).
Dom-bind is only temporary solution. Your code seems ok and there should be no problem.
I assume you have your .htaccess configured as it is necessary to have it when using page.js
I have small JSON data from server and wanted to show in html file. unfortunately not working. Any idea?
I have invested couple of hours to find these. but still not found.. :(
Thanks for your feedback.
JS File:
(function() {
var app = angular.module('myreddit', ['ionic']);
app.controller('RedditCtrl', function($scope, $http) {
$scope.conditions = [];
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.stories.push(child);
});
});
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myreddit" ng-controller="RedditCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">FootBall</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div ng-repeat="condition in conditions">
{{conditions.name}}
</div>
</ion-content>
</ion-pane>
</body>
</html>
Thanks for your feedback.
There might be more issues with your application, you did not provide enough data to troubleshoot, but from the code you have posted I see at least these 2:
1 you are pushing to stories array, which doesn't seem to be read in your application. I think it should be:
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.conditions.push(child);
});
});
2 when inside ng-repeat cycle, you should be addressing the item, not the collection, so not {{conditions.name}} but {{condition.name}}, so the code should be:
<div ng-repeat="condition in conditions">
{{condition.name}}
</div>
I am getting the following error:
Uncaught ReferenceError: Polymer is not defined
when I click on the link on the following element:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
</head>
<body>
<my-element id="my_element"></my-element>
</body>
</html>
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
Is this a Polymer bug or am I doing something wrong?
http://jsbin.com/cuxep/1/edit?html,output
As #badsyntax points out above, it looks like event.preventDefault() doesn't work well for the tap event. Changing to on-click seems to solve the problem of preventing a navigation though.
The error that you saw:
Uncaught ReferenceError: Polymer is not defined
That seems to be an artifact of malformed HTML, I suspect this was causing a race condition between loading polymer.html and your <script> element being executed. After cleaning up the HTML I was no longer able to reproduce it.
Here's a jsbin that works as I believe you intend: http://jsbin.com/boweliwe/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>console.clear()</script>
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<my-element></my-element>
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
</body>
</html>
A Polymer noob...
I'm trying to create a custom element as per the Polymer API docs, where my main page looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<div id="test"></div>
<polymer-element name="book-template" constructor="BookTemplate" noscript>
<template>
<style>
h1 { color: orange; }
</style>
<h1>Hello from some-foo</h1>
</template>
</polymer-element>
</body>
</html>
I know that the page content will render if I just put <book-template></book-template> on the page, or if I do something like this inside the <body> tag:
<script>
var book = document.createElement('book-template');
document.getElementById('test').appendChild(book);
</script>
But I'm trying to utilize the element's constructor attribute, assuming that this will create the element when placed somewhere inside of <body>:
<script>
var book = new BookTemplate();
</script>
...but getting a console message that BookTemplate() is not defined.
I'm sure it's something simple...any idea? Thanks in advance.
I guess you have to wait for the polymer-ready event, so that the constructor is available in the global window object http://jsbin.com/kosuf/2/edit?html,console,output:
<script>
document.addEventListener('polymer-ready',function() {
var book = new BookTemplate();
if (book) {
console.log('Ok');
}
});
</script>