So my client has a website he's created on weebly and he wants me to add a page with some complex functionality. I went ahead and coded the page with angularJs, but now when I add it to weebly with an embed code element, the angular doesn't work. Any clue how to either
A) just add a page normally (.html file)
B) get angular to work within the weebly page
Any help is greatly appreciated
I guess it would really depend on what you are trying to do. Please provide your code, for reference.
To directly answer your questions;
You can add, at least some, angular JS. (I haven't tested it all, but what I did worked)
With Weebly you do not have the ability to add .html files as standard pages.
You CAN add a 'Page Type' to the Theme. (which is essentially an HTML file).
You can add a page and then assign said page type.
~
Example, adding the following to the embed code element will work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
I figured out this issue, the angular was working with embed, but not on weebley's editor site. Once deployed, the code worked fine
Related
My company has created a generic application that launches custom applications within an iframe. The parent window allows end users to click on an item within a worklist, and depending on what they've clicked on, we navigate to a launch controller which will build up a url to the product associated with the task. We then load that product application into an iframe within the launch view.
We are seeing duplicate static content files (js and partial templates) existing inside IE's developer tools.
Image of dev tools
Bundled js as well
We end up seeing additional copies of the file after every load the iframe. Since we're an SPA the assumption was that these files would be cached (which they are in all browsers except for IE). Each file is served up from the same web server. We even notice that if we dont set a breakpoint in the correct instance of the js file it wont get hit.
We have tried numerous things including removal of the iframe in the destroy event within the launch controller (since the frame gets added to the window object, we figured it was living on forever). We've ensured that the iframe has a valid ng-src tag as well as using $sce for the dynamically created url.
Since we require the iframe to be loaded via a POST from a form, we're doing something like this which is a super hacky way of submitting a POST. The snippet wont run as is but i wanted to include info on how we're populating our iframe.
function launch() {
//return launchService.launch(vm.url, buildLaunchRequest()).then(success, error);
$timeout(function() {
$("#productForm").submit().remove();
}, 1);
}
launch();
<div id="launch" class="container-fluid ss-container">
<iframe name="productFrame" id="productFrame" data-ng-src="{{vm.url}}" resize-frame />
</div>
<form id="productForm" role="form" method="post" action="{{vm.url}}" name="productForm" target="productFrame">
<input type="hidden" name="user" ng-value="vm.user" id="user" />
<input type="hidden" name="authToken" ng-value="vm.authToken" id="authToken" />
<input type="hidden" data-ng-repeat="(k,v) in vm.styles" name="{{k}}" value="{{v}}" />
</form>
Im sure there is a better way to submit a form with the target being an iframe but at the moment nothing seems to have worked for us.
If anyone has seen this duplicate source file issue and/or knows the proper way to submit a form with generated inputs automatically when the controller is loaded please help us out!
Thanks,
Jake
Turns out it was some weird issue with how IE caches the iframe if you dont clear out the src tag on the iframe that causes this.
This question helped identify the issue:
IE8 reloads dynamic iframe content from cache into the wrong iframe
It somehow would add a clone of the iframe to the parent window every time the angular view was loaded regardless of the src being the same. Clearing the src tag out on $destroy of our angular controller seems to kick IE into actually removing the node from the dom. We even tried $("#productFrame").remove() without any luck. Removing the src attrib didnt work as well.
What worked was $("#productFrame").attr("src", "").remove();
I have an angular app that has to be loaded from the file system, by IE, and will be shipped to clients (so I can't override security configurations)
The error I am getting has to do with trying to ng-include templates and getting an Error: Access is denied. in IE.
Searching the web, I found the perfect solution in the form of Mark of the Web.
I added <!-- saved from url=(0014)about:internet --> to the second line of my index.html, but that didn't remove the error.
I know another possible solution is to add all my templates as <script type="text/ng-template"> and load them from the templateCache, but this will be a large app and I don't want to have all my html written in one file.
Is there anything i'm missing? Any possible solution? Why is my MOTW tag not working? Appreciate any idea, i'm desparate!
Thanks,
Uri
I made a little chrome extension with angularjs and bootstrap. I have a alert like this:
<div class="alert alert-danger" role="alert" ng-show="errorMailZR">error</div>
and in angularjs controller :
$scope.errorMailZR = false;
i put it to false because i see the alert by default, it's not hidden :/ but in single web page when i go on it with browser, everything is ok. So, what i need for it's works in chrome extension ?
ng-show="false" doesn't work too in chrome extension...
UPDATE:
https://docs.angularjs.org/api/ng/directive/ngCsp#!
In order to run angular on an extension page, you have to use the ng-csp directive, or satisfy the ng-csp policies. I'm assuming you've done this, or nothing would be working at all.
Doing so turns off inline style insertion, this line in particular in angular.js (showing for reference, not for modification!):
!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend('<style type="text/css">#charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');
To get directives that rely on classes like ng-hide, ng-animate, ng-cloak, to work, manually link to the classes using:
<link rel="stylesheet" href="path/to/angular/angular-csp.css">
That's all there is to it.
OLD HACKY STUFF
Immediate fix, add this to your document head:
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
Ng-show and hide work by angular adding the class ng-hide to items that are hidden and removing it when they are shown.
Why doesn't it work in extensions?
Good question. For whatever reason (will update when I find the reason) chrome extensions prevent that style tag from being added to the head. It's probably some kind of security thingy, and there's probably a way to turn off that security bit, I'll update when I find out more.
You can debug chrome extension in chrome, just click right on extension popup. my guess is that angularjs isn't loaded or bootstraped in your extension, from my experience you should rather load angular from local files rather than CDN
I try creating nested wizard with jQuery Steps plugin. On the official site written
Multiple wizards
Have multiple wizards on one page or even have nested wizards like you want.
site -> http://www.jquery-steps.com/GettingStarted
But when I try this, I'm getting confused. Before step with nested wizard, all fine. But after this step slides content is not displayed.
Demo on JsFiddle
All code (including Css) taken from the demo example of project. From here
I just added next code snippets
$("#wizard_embedded").steps();
<div id="wizard_embedded">
<h1>Embedded Wizzard Step 1</h1>
<div>Embedded Wizzard Content 1</div>
<h1>Embedded Wizzard Step 2</h1>
<div>Embedded Wizzard Content 2</div>
</div>
Tested it and found some small issues on js and css site. Worked once a while ago. Seems to be a regression bug. I will fix it. Would be nice if you could post a bug on github with a meaningful title and describtion.
I'm trying to add a Google +1 button to my website.
I have followed the instructions here:
http://www.google.com/intl/en/webmasters/+1/button/index.html
This the code for my webpage:
<html>
<head>
<title>
Why won't it appear?
</title>
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<body>
<h1>
Example title
</h1>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="http://www.example.com/"></g:plusone>
</body>
</html>
As you can see, I've followed their instructions exactly, and yet it does not appear. I've tried it on Chrome, Firefox and IE8 (all on Windows XP). I'm just opening the webpage from my local system.
Interestingly I can see it working here http://www.satinbow.co.uk/xxtest.html
Can anyone solve the mystery?
Update / clues
When the page is stored on my system locally, it doesn't work (hard refreshing didn't fix it either.)
But I've put the page here: dl.dropbox.com/u/6920023/test2.html and it seems to work there.
It would be really cool know what's going on :)
I think it's because when it's local (not webserver) browser block the JS script (that's hosted externally) to prevent security breach. That's why it doesn't work
Link: http://ejohn.org/blog/tightened-local-file-security/
Another thing to check for is whether you have any ad blockers active. These can disable the +1 button and move the iframe containing the button out of the screen.
Working on my open source project, http://code.google.com/p/gwt-socialmedia,
i have discovered another reason that can cause the +1 button not to render: You forgot to define the "URL to +1": It must be a valid URL to an accessible website (so http://localhost won't work for i.e.).
Indeed, the PlusOne API seems to connect to the site URL, in order to get some metadata about it (like the description, title, etc)
If you don't define the URL, Google will send you an error HTTP 400 (Bad Request), with the internal message : "The requested URL was not found on this server. "
and the button will not appear...
Hope it helps!
Due to browser security(as mentioned in one of the answer) it would not display the button. Still to display google plus buttons when your file is local use local web server(WAMP/XAMPP) or you may use PHP local server https://www.sitepoint.com/taking-advantage-of-phps-built-in-server/ to host your file on your computer and you will see the button displayed in your file.