Upgraded primefaces from 5.3.6 to 6.2. Primefaces extn to 3.1.0 to 6.2 in my application.Using IE11 browser.Getting below error in my application. Why jquery shows up undefined when primefaces 6.2 has jquery 3.2.1.
Object doesn't support property or method 'addEventListener'
jquery.js.xhtml (3,147)
The value of the property 'jQuery' is null or undefined, not a Function object for below code
jQuery(document).ready(function() {
-----
---
---
}
In xhtml files added below lines in pages which needs to use jquery
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
Related
I am trying to create custom form element which I am trying to reuse in other applications developed in angular and jsp page of Java
my-element.js:
class MyElement extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.msg = 'Hello, World!';
}
// Called when your element is inserted in the DOM or
// immediately after the constructor if it’s already in the DOM
connectedCallback() {
this.innerHTML = `<form action="/action_page.php">
<div class="container">
<label><b>Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Age</b></label>
<input type="text" placeholder="Enter Age" name="age" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Add</button>
</div>
</div>
</form>`;
}
}
// This registers your new tag and associates it with your class
window.customElements.define('my-element', MyElement);
my-element.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
<script src="my-element.js"></script>
<!-- <link rel="import" href="add-form.html"> -->
</head>
<body>
<my-element></my-element>
</body>
</html>
Two issues I am struggling with now are below
1.Can i incude both the files as below to my angular and java jsp page and use custom tag to work?
<link rel="import" href="my-element.html">
<script src="my-element.js"></script>
<my-element></my-element>
I am trying to pass below json object as an attribute to custom form element and trying to render custom form elements
[
{
"name":"Name",
"type":"text",
"size":"20",
"readyOnly": false,
"validateFunction":"onlyText"
},
{
"name":"Age",
"type":"number",
"size":"3",
"readyOnly": false,
"validateFunction":"onlyNumber"
}
]
I tried using below way to inject json data to custom element to render form elements based on json but no luck and there are no console errors
<my-element form-data="{{data}}"></my-element>
ad 1) yes you can use your element with every server system you would like. It's "just html" that the beauty in it :)
ad 2)
HTMLElement won't do anything automatically. So if you wish to access your json you will have to do something like this
<my-element form-data="{'name': 'Name', 'type': 'text'}""></my-element>
connectedCallback() {
let rawData = this.getAttribute('form-data');
let jsonData = JSON.parse(rawData.replace(/'/g, '"'));
}
Notice that in the form-data json there are ' instead of ". So we have to replace them before using JSON.parse.
it looks like this is using a web component as opposed to a polymer component. The native web component API does not include data binding, although angular and polymer both do (but implemented in different ways).
Native web components and polymer components can be used with Angular as well as other frameworks.
Depending on whether you are using Angular.js(1) or Angular(2+), setting up the data object to be passed into the DOM will vary, but in general the data should be "set up" so to speak in the JS and passed into the DOM. Otherwise as #daKmoR said, the data would need to be declared as he did in his example.
There are packages that assist in implementing data 2-way binding between polymer's data bindings and angulars bindings if that is needed.
Trey
I want to disable download and print button in the documentViewer's toolbar
I tried to do it in JavaScript and CSS as shown below, but but neither worked.
Any suggestions?
I tried to do it like this (JavaScript):
$(function() {
$('#download').hide();
});
And in CSS like this:
.download {
display:none !important;
}
.print {
display:none !important;
}
My XHTML implementation
<h:form id="ReportViewerForm">
<f:event listener="#{ReportController.printReportSchedule}" type="preRenderView" />
<p:panel id="ReportViewerPanel" header="" style="margin-bottom:10px;">
<pe:documentViewer height="500" value="#{ReportController.content}"/>
</p:panel>
</h:form>
#download {
display:none !important;
}
Works for me in PrimeFaces 6.0 (note the # instead of the .) (without the !important it works to btw)
DocumentViewer can not be modified by adding and forcing css or javascript.
DocumentViewer runs inside a JFrame which does not allow inserting css and javascript.
The most optimal solution and the one that worked for me is the following:
Extract the jar file of primefaces "primefaces-extensions-6.0.0.jar" with zip
Edit the file \ META-INF \ resources \ primefaces-extensions \ documentviewer \ viewer.html and add style = "display: none;"
Print
Download
Save and re-compress it with the extension jar "primefaces-extensions-6.0.0.jar"
Replace the jar file and deploy
You can force CSS config using a remoteCommand with autoRun = "true". Call the javascript from the oncomplete. That works.
The pdfview is in an iFrame. So you have to apply the css changes to it directly.
<pe:documentViewer url="#{pdfcontroller.pdfPath}" id="pdfVw" />
Then I used javasript to run on ready
<script>
$(document).ready(function() {
$('#pdfVw').contents().find('#download').css('display', 'none');
$('#pdfVw').contents().find('#print').css('display', 'none');
});
</script>
I found an answer based on Javascript on primefaces forum and it worked for me
this is the link https://forum.primefaces.org/viewtopic.php?t=55587
Add this method to your application javascript file.
pdfHideButton : function(button) {
$('iframe').on('load',
function() {
var head = $(this).contents().find('head');
var css = '<style type="text/css">#' + button + '{display:none};</style>';
$(head).append(css);
});}
On your page with the PDF Viewer you can do this to hide the OpenFile and BookMark buttons...
<script type="text/javascript">
$(document).ready(function() {
pdfHideButton('download');
pdfHideButton('viewBookmark');
});
</script>
I use Primefaces extension 3.0.0 with Primefaces 5.2 with no problem.
But i try now to upgrade to Primefaces extension 3.2.0 and i've a problem with ckeditor.
I don't want to use the embed Primefaces extension CkEditor, but a custom one that is in my webapp/resources directory. With 3.0.0 all is ok.
But with the 3.2.0 version, all the GET for needed resources, like plugins, are intercepted by primefaces extension and my custom ckeditor doesn't start.
I don't want to install the primefaces-extension ckeditor. Just use my own.
I've this errors :
GET
http://localhost:8080/chainedit3/javax.faces.resource/ckeditor/config.js.xhtml?ln=primefaces-extensions&v=3.2.0
404 (Introuvable) Uncaught TypeError: Cannot set property 'dir' of
undefined
The good GET should be :
GET http://localhost:8080/chainedit3/resources/ckeditor/config.js
How can i disable this bad resources GET in primefaces-extension or in ckeditor?
<p:panel rendered="#{inputItem.type == 'typeeditor'}" width="75%">
<script type="text/javascript" >
var CKEDITOR_BASEPATH = '../../resources/ckeditor/';
</script>
<script src="../../resources/ckeditor/ckeditor.js" type="text/javascript"/>
<script type="text/javascript" >
CKEDITOR.plugins.basePath = '../../resources/ckeditor/plugins/';
</script>
<textarea cols="90" rows="20" id="editor0" name="0editor">
#{inputItem.inputItemEditor.value}
</textarea>
<script type="text/javascript" >
CKEDITOR.replace( 'editor0',
{
uiColor: '#85B5D9',
width: '100%',
height: '300px',
readOnly : #{!associateBean.editMode},
chaineditCKEditorURL : "../../resources/ckeditor",
mathJaxLib : 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML',
<ui:repeat value="#{inputItem.inputItemEditor.parameters}"
var="eAttribute" varStatus="statusAttribute">
#{eAttribute.value} : #{eAttribute.label},
</ui:repeat>
allowedContent : true
});
</script>
</p:panel>
I did it the following way:
CKEDITOR_GETURL = function (r) {
return r.startsWith('http:') ? r : "http//cdn.ckeditor.com/4.5.6/full-all/" + r;
};
Since Polymer 1.0 release I start to get a different initialization order between Chrome and other browsers (Firefox, barebone WebKit). Although the 1.0 docs say "there are no guarantees with regard to initialization timing", in version 0.5 I didn't have such issue.
index.html:
<script src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="name-tag.html">
<body onload="console.log('body onload');">
<name-tag></name-tag>
</body>
name-tag.html:
<link rel="import" href="components/polymer/polymer.html">
<dom-module id="name-tag">
<template></template>
<script>
Polymer({
is: "name-tag",
ready: function() {
console.log("polymer ready");
}
});
</script>
</dom-module>
Chrome 44:
polymer ready
body onload
Firefox 39, QWebView (Qt5.4, WebKit):
body onload
polymer ready
What I have already tried:
window.WebComponents = {flags: {register: true, polyfill: true}}; (register used to be in Polymer)
window.Polymer.Settings = {useNativeShadow: false};
attached callback with this.async()
window.Polymer.dom = 'shadow' forces Polymer to use the shadow DOM by default (either the polyfilled one if you used webcomponents.js or natively if you used webcomponents-lite.js instead).
Is there a posibility to set scrollspeed of Primefaces' ScrollPanel? Scrollspeed of Scrollpanel in "native" mode is ok but not in "deafult" mode.
I'm using Primefaces 3.2-SNAPSHOT, JSF 2.1 and Tomcat 7.
Not sure about Primefaces 3.2 but on 6.0 you can do this:
<p:scrollPanel id="scheduleDayViewScrollPanel" styleClass="static-width">
...
</p:scrollPanel>
<script type="text/javascript">
$(document).ready(function () {
$("#scheduleDayViewScrollPanel").jScrollPane({mouseWheelSpeed: 50});
});
</script>
Primefaces 6.0 uses jScrollPane - v2.0.19 - 2013-11-16 http://jscrollpane.kelvinluck.com/