I want to have an external .html file, from which I will load snippets programatically, and insert them in the document at runtime. I did it like this in my index.html
<head>
<link rel="import" href="html/html_snippets.html">
</head>
This is the example content of the html_snippets.html file
<div id="asd">
<some stuff here>
</div>
Then after everything is loaded, I load the snippet like this
var friendSnippet = $("#asd").html();
The problem I am facing now is that I use the jQuery code in a loop, which runs several times, and the first time it always returns an undefined, but after that it's fine.
Why is that happening?
You can use the jQuery .load() function to load an html file into a certain element on the page.
$("#destinationElement").load("path/to/file.html");
This may solve the issue.
Related
I have a java script function test1.js. The function loads external scripts on demand and injects it in the head. As part of the vendor documentation we need to load few scripts in the html head and One of the external script is loaded as follows
<script>esmDefine(["https://website1.com/web1-component.js"]);</script>
I want to do the same in java script and inject the above line in the html tag.
I tried the following
let scriptElement = document.createElement('script') scriptElement.textContent = 'esmDefine(["https://website1.com/web1-component.js"])' document.getElementsByTagName('head')[0].appendChild(scriptElement);
Tried
scriptElement.innerText, scriptElement.innerHtml etc but nothing worked as expected.
Result expected will be
<html>
<head>
<script>
esmDefine([
"https://website1.com/web1-component.js",
]);
</script>
...
</head>
Any ideas in this regard is appreciated
I guess you're facing this issue because you're trying to append a script tag in your head tag, that has a function call within it, so as soon as your script tag is injected into the head of your page, the page tries to execute the esmDefine function. But there must be some other external script file that has it defined, as you're saying that you've not defined it anywhere on your own. Then in order for this function to execute, the base declaration for this needs to present there, I mean the page's JavaScript renderer should know how to execute this function and the file that has this functions definition, is an external script file that you linked to your page, but how JavaScript rendering works is, it first parses the page (HTML, CSS, JavaScript (everything that is there on the page)), that you've added as inline to the page, not the external files. Then when everything is done loading then it goes on to fetch the external references and add those later to the CSS Object Model & JavaScript Object Model. But since you're adding this function call as internal to your page, it'll immediately try to execute it and will fail since the definition to this function (the external script file) is not yet loaded. You can try appending this script tag (with your esmDefine) to your page's head inside the window's load event listener. This will be fired only when everything on the page, including the dependent external resources are done loading on to the page. This way you'll not encounter this not defined ReferenceError.
I hope this will help you to move forward.
If you want to import a js script in a script tag I think you could import it or use a src="" if you do not need to interact with the script and know how it behaves.
Maybe try something like:
<html>
<head>
<script>
import esmDefine from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script>
import { esmDefine } from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script src='https://website1.com/web1-component.js'/>
...
I am importing an html document, form.html, from a script located in my index.html file.
form.html is a basically a fragment of HTML and at the bottom of the html is an internal script that attaches the html to the main document:
Afterwards, I reference an external script that is supposed to do some stuff to the HTML in form.html. However, this fails to have an affect in Firefox.
If I inspect the <head> of the main document in Firefox developer tools, I can see the "document fragment" composed and with the correct scripting affect. However, the actual imported HTML that appears in the body is unaffected.
I have tried inlining the script at the bottom of form.html. I also tried using window.onload to attach the external script to the end of the body of the main document as well as trying to use a link tag as per this question.
Not quite sure what else to try. I would like to keep the script modular and contained inside form.html if possible as to only request it when that HTML page is requested.
Thanks,
When using the HTML Imports polyfill, the processing of the imported document is only asynchronous. So you should wait for the HTMLImportsLoaded event or use the HTMLImports.whenReady() method to be sure the content was imported.
<head>
<script src="html-imports.min.js"></script>
<link rel="import" src="from.html">
<body>
//code to be injected
<script>
document.addEventListener( 'HTMLImportsLoaded' , ev => {
//you can safely access the imported code in the body
} )
</script>
I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>
I am making a javascript function that adds script and css elements into my head section, but I need to run that before the page is loaded, how could I do that?
you can run script after DOM tree is loaded not images and sounds etc just DOM
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
Your best bet is to send just the script in your html and then have it bootstrap the rest of the page:
<html>
<head>
<script>
// do whatever you're trying to do with your code
$.get('path/to/page/partial.html').done(handleNewPartial);
</script>
</head>
<html>
The reason you can't do it the way you're asking is that your code is always included as a DOM element on the page, ie it has to be delivered inside a <script> tag to be used by the browser. So by definition your script can not be used until after your html has been parsed into the DOM.
Hope this helps!
I think I figured out my issue.
The issue was that it was loading the scripts, but it wasn't running their window.onload. When I made the function run staticly instead of a window.onload, it works fine. Thanks for the help!
EDIT: This also works to dynamically load the CSS stylesheets, so YAY
When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");