I am creating a simple app in AngularJS and I am trying to build form steps wizard but JS is not getting applied.
I have copy pasted all the code from w3schools editor to the component.html file
getting the following output
output
The fastest way you can reuse this code is to take advantage of HTML <iframe>. Assuming that you saved all code from w3c site to file my_downloaded_code.html your iframe will look like
<iframe src = "path/to/file/my_downloaded_file.html" width="350px" height="600px" frameborder="0" scrolling="no"></iframe>
Attributes width, height etc. are not mandatory of course, but I have chosen them for exactly that case.
What's more the form is sent to action_page.php after confirmation, so You have to create such a file in appropriate localization (the same as the localization of my_downloaded_code.html).
However, if you like to make a AngularJS component containing that code it won't be very easy because as #Tomas commented
Code on the site w3school not written in Angularjs, but in pure JS...
but it is possible of course :) .
What have to be done?
Functions have to be moved to component controller.
Functions and variables in controller have to be visible in template, thus we must assign them to $scope.
on-click has to be changed to ng-click
Content of <style> tag has to be moved to .css file
You must create your action_page.php
I have made plunker with such working component for You.
Related
I am learning AngularJS by decomposing code samples and putting them together in different ways. What specific changes need to be made to the code in this plnkr so that code from an external script can be called from the index.html view?
The code is from this tutorial, and the change that I want to make is simply moving the JavaScript code to an external JavaScript file that is called from inside the view.
First I changed the scripts tags to be like in the example you linked to.
Second, I added ng-app="helloApp" attribute to the html tag, so the helloApp angular module you defined will run on the html element (instead of not running at all).
Third, and lastly, I changed Calvin Hobbes on line 42 to be {{name}}, so it will be binded to the $scope.name var in your controller, instead of being a regular static text.
Here is a working example.
I am generating some tabular content using ng-repeat in AngularJS, and I would like to have this content display in an iframe, so that the user can drag it and resize it.
I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.
I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.
How can I construct my iframe such that the ng-repeat generated content is displayed within?
You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
document.getElementById("frame").contentWindow.document.getElementById("mydiv")
The srcdoc property can be used instead of src to indicate you will be providing code for the contents. Seamless is also expected when you use srcdoc; it tells the browser that the iframe's contents are supposed to be treated as a part of the website, rather than a nested one. Unfortunately, this will trigger styling changes that eliminate the whole reason you wanted the iframe in the first place (the resize handles disappear). Furthermore, you'd have to inject css files and javascript files into the iframe - it's not worth it.
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
Here's a fiddle I was using to test out controlling iframe contents. It's very basic but accurately demonstrates how much trouble they actually are: Fiddle
I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).
I have external API data which is a user generated content. The client wants to dynamically update his own site with this feed, including the ability to use JavaScript.
<div ng-bind-html="post.content"></div>
Will display anything that is HTML or CSS but does not work with JavaScript:
"content":"<div>Hello Stack</div><script>alert('whats up?');</script>"
I have tried including ngSanitize as well as using ng-bind-html-unsafe.
No dice.
You have to include jQuery for this to work.
After some searching I came across https://stackoverflow.com/a/14088380/1264846.
Example plunkr: http://plnkr.co/edit/zEXXCB459Tp25VJiyyZb?p=preview
I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.
HTML files should look like this:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
How can I do that?
If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.
Have a look at the jQuery 'load()' function here:
http://api.jquery.com/load/
Assuming your have the following html:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
your usage would look something like this:
$('#header').load('header.html');
$('#footer').load('footer.html');
Here's a link (first one from Google I might add) that explains how to do this in various languages.
Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript is another way to include HTML within the pages of your
site. This has the advantage of not requiring server-level
programming. But it's a little more complicated than the server-level
include methods.
Save the HTML for the common elements of your site to a JavaScript
file. Any HTML written in this file, must be printed to the screen
with the document.write function.
Use a script tag to include the
JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">
Use that same code on
every page that you want to include the file.
PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.
Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).
If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.
If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.
http://docs.angularjs.org/#!/api/ng.directive:ngInclude
If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?
As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.
For example, adding a main menu on every page with
<div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.