I am trying to use jQuery and jQuery UI in salesforce lightning component which is embedded inside VF page. This VF page is available on console for ex. domain/my.salesforce.com/console
When I run it I am able to load only jQuery version 3.2.1 inside this console, not other jquery versions are able to load.... fine I am happy with it. but next step is to load the jQuery UI version which should be compatible with jQuery 3.2.1.
But I am getting below error when jQuery UI loads in such scenario : lightning component embedded inside vf which is shown on console.
Jquery UI error:
Uncaught TypeError: n[o].hasOwnProperty is not a function
throws at /resource/jQuery_UITEST:8:5049
what I found is jQuery v2.2.4 and jQuery UI - v1.11.2 works together well when use purely as lightning app but do not work when I embed this lightning component inside vf and that vf is part of console.
If you have any idea kindly provide your inputs.
Thanks,
Akki
This question has been answered here:
https://salesforce.stackexchange.com/questions/180535/jqueryui-inputinputindex-hasownproperty-is-not-a-function
Simply said: All external libs that use the function hasOwnProperty are not working (yet) because the function has not been added to the LockerService SecureWindow object. Using an older version of jquery UI solves it for now (version 1.11.4 is supported)
When you embed lightning inside Visualforce, things do behave differently. Have you looked in your browser's console to see what JavaScript errors are being thrown? Typically you will see some related to CORS.
You then need to update your CORS settings in Salesforce to whitelist the URLS mentioned in the errors.
Use CORS for Lightning Out
Related
I have to customize a platform designed in ASPX and AngularJS.
I only have access to the HTML and CSS code, I do not have access to the AngularJS controller.
I want to add a small JavaScript script, but I encounter a problem when I integrate it on the platform.
I cannot detect when the page is loaded.
If I use the javascript (window.onload) or jQuery ($(document).ready) functions, it doesn't work.
Since I don't have access to the AngularJS controller, do I have a way of knowing when the page is loaded?
Thank you
Florian
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
I am currently working on a project using Django and Angular. I am trying to implement Django's Password-Reset app, which seems pretty easy to set up. I followed the instructions and I ran into a peculiar issue that is caused by Angular's routing. I am trying to link to a FormView using
Forgot password?
But it seems that Angular's routing keeps picking up the literal translation of the link
http://127.0.0.1:8000/%7B%%20url%20'password_reset_recover'%20%%7D
This of course causes a routing error to pop up.
Is there anyway I can link to this view without Angular interfering?
Looks like the problem is that Django is not parsing your URL tag in the template. Might want to look into that rather than into Angular
Could you check the a tag in your Developer tools and see what it says? Chances are that it says exactly what the URL is pointing to.i.e. /%7B%%20url%20'password_reset_recover'%20%%7D
Have you added password_reset_recover in your root urls.py?
I am facing a unique scenario, when an experience is set up on a component using Target, the page breaks. Issue is because the components for which an experience has been set up is loaded through ajax using AEM's internal javascript libraries. AS the angular app is already instantiated the dynamically injected components are not compiled and all the angularJS syntax shows up on the page when it breaks. Angular Bootsrapping is also not possible as the dom is injected by AEM's internal javscript, not sure when to call bootstrap method.
Please let me know how to resolve this issue if anyone has faced it before.
I don't have experience with Angular apps, but I can tell you that the use-case you are describing it's not supported with AEM (others have complained). The main problem is the one that you described - the Target client-library (mbox.js) loads the content asynchronously (using mboxUpdate() ) calls.
However, I don't know if this is necessarily an AEM issue - are you able to use targeted content with mbox.js and Angular without AEM?
What version of AEM are you using?
I have written an ionic application and would like to know how(if) i can validate the ionic app. Much like validating HTML with W3C.
Is there any way possible to run a validation check on the app.
I have tried to run the application in the browser and run a google chrome local html validation, however the directives are still visible and haven't been generated to html.
I don't believe there is a way to validate the Ionic HTML in the same way you validate the HTML in W3C validator.
however the directives are still visible and haven't been generated to html
Probably a bit of confusion here.
1. AngularJS directives will always be visible "as is" in the HTML code, they will not transform to anything. It's AngularJS itself to use them in its special way.
2. Ionic components are build with custom HTML tags, which means, for example will not transform to anything else. All Ionic custom tags are defined in ionic.css file.