Calling requirejs' require function after Polymer 1.0 has been loaded results in a mismatch error.
This used to work fine with Polymer 0.5
It would be helpful to know what exactly you tried to give an informed answer. When I encountered a similar issue, The steps I took to resolve the issue was the following.
I removed the requirejs related script which was in the same page
that was loading the Polymer 1.0 elements.
I then created a new module using a definition function, containing
the script I had removed in step one.
I then loaded this new module in the page containing the Polymer 1.0
elements using a requirejs script tag referring to the new module I
just created, with data-main attribute. An example of script tag I used is shown below
<script data-main="./defineTests" src="../bower_components/requirejs/require.js"></script>
Related
I have tried via weasyprint , pdfkit but showing errors even though if all errors removed, its showing very unsimilar output as expected .. Can anyone tell me what to do in changing django template that contains either Bootstrap or Css Or both in Django
Thanks for any help.
Here is the url where you can find how To Generate PDF in Django with WeasyPrint.
https://www.bedjango.com/blog/how-generate-pdf-django-weasyprint/
Weasyprint doesn't work well with bootstrap because it has media query and it is ignored by weasyprint.
This is the reference Link to Github site for clarity.
You can see the "Ignored ..." messsages in WeasyPrint error log(if you ever initilised).
So its better to use CSS for the print-pages and Internal CSS.
I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' #resourceType='foundation/components/parsys'}" />
</body>
I think #l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I am trying to create a custom element that extends a SVGGlement. Here is the JSBin link to the code: http://jsbin.com/kovumoloda/2/edit?html,console,output
When I run the code, ready() isn't called and so aren't the contents of the Shadow DOM rendered.
I tried the same example without Polymer and it worked. Here is the JS Bin link http://jsbin.com/vihosojofi/1/edit?html,console,output
Is there anything I need to do differently to make this thing work with Polymer ?
Thanks !