I'm creating a widget that can be integrated by the third party with ease. What I need is to create a .js file and the user only needs to include that javascript file using <script> tags and the html tags gets rendered there.
ie.
example.com
widget.js
$(document).ready(function(){
render();
function render(){
return '<div>Html contents to be loaded</div>';
}
});
Third party file
thirdparty.html
<script src="http://example.com/widget.js"></script>
So while loading example.html how can I load all the html contents.
.append() should do the trick.
$(document).ready(function() {
$("body").append("<div>HTML here</div>");
});
Update: As there is no body tag, you could use .after().
$(document).ready(function() {
$("script").last().after("<div>HTML here</div>");
});
Remember to use .last() in case there is multiple script tags.
Related
I have an the following element in my html:
<img id="teamshot" onload="load.hide()" src="img/images.jpeg" alt="image">
load.hide references a function in an included javascript file. The contents of this included javascript file are as follows:
var load = {
hide: function()
{
alert("pre");
$("#teamshot").hide();
alert("post");
}
}
I know the function is running because I get an alert box that says "pre" when the element loads, but it breaks on the jquery call. It doesn't hide the element, and it doesn't give me an alert box with the dialogue "post".
What is wrong?
Make sure you are loading jQuery and also the order in which you load your JavaScript files is important. You should load jQuery first, then your custom js file. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/your/file/custom.js"></script>
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
Actually I was trying to get the concept of the module pattern. Here I have simple code which I used to type directly on the page. It was fine until I tried to separate the actual code from the HTML file and kept only a single line of code on the main HTML file:
<body>
<script type='text/javascript' src='module.js'>
// module.JS file was here ....
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
</body>
File module.JS
var module = (function() {
return {
show:function(keyCode){
document.body.innerHTML+=(String.fromCharCode(keyCode));
}
};
})();
You'll need to have two <script> elements for this.
Use one to "import" your external module and another for the script you want to embed directly on the page:
<script type='text/javascript' src='module.js'></script>
<script type='text/javascript'>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
For more information, you can check out this MDN documentation page. Here is an excerpt talking about the src attribute (emphasis added):
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. Script elements with an src attribute specified should not have a script embedded within its tags.
A script block referring to an external JavaScript source should be separate and any script inside of it does not get executed. So you need two separate script blocks one for the external JavaScript file and the other for your script.
<script src='module.js'></script>
<script>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
Back-story
I am creating a web application in which individual pages are "loaded" via the jQuery .load function. Originally the loaded page was a single file, but as it got longer I decided to split it into a .html file, a .css file, and a .js file.
Strangely, a single design flaw arose surrounding an element that was positioned using percentage values within the css. To see if I modified the styling while I moved, I replace the style tag (omitting the link tag instead) and it worked fine. Back and fourth a few times and I learned it was strictly occurring only when I used link tags rather than embedding it via style tags.
I wanted to use link tags, so I tried to narrow the problem down. After a while of fiddling, I traced it down to the .js file, specifically a usage of the .focus function on $(document).ready. If I comment out the .focus, everything works fine. Uncomment, and it breaks.
This appears to only happen in Chrome. It doesn't occur in FF26 or IE11.
Example
A fiddle.
Note that the problem only occurs in Chrome and that caching must be disabled. As Chrome's temporary cache disable doesn't extend into iframes of iframes, a direct result is easier to work with.
jQuery provides a callback function when the .load() method has completed and the DOM has been updated. This is where you would want to operate on elements that have been inserted from your external url.
<script>
$(document).ready(function() {
$('#content').load('html/portal.html', function() {
//now i can operate on elements loaded from html/portal.html
//they have been inserted into the DOM
$('input#input').focus();
})
});
</script>
As far as references to the link element, if you want to dynamically load a stylesheet from an external url using javascript you can employ a javascript function something like this:
//load deferred stylesheets
function loadStyleSheet(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
If you want to load an external javascript file you can use jQuery.getScript():
jQuery.getScript('/js/external.js');
So putting all of this together, if you want to load some content from an external resource, insert it into the DOM and the load an external stylesheet and an external javascript resource you could do so as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
//function to load a deferred stylesheets
var loadStyleSheet = function(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
$('#someWrapper').load('external-url.html #someWrapper > *', function() {
loadStyleSheet('/css/external.css');
jQuery.getScript('/js/external.js');
})
});
</script>
</head>
<body>
<div id="someWrapper">
<!-- external content is loaded here -->
</div>
</body>
</html>
I have an hmtl file which includes another javascript as
<script type="text/javascript" src="hello.js"></script>
<div>
something
</div>
This html file is loaded via de .load()
and it loads it in a div from the main page
This tells me that the first line is not well-formed
$(".flip").live("click", function() {
$(this).find("div.panel").slideToggle("slow")
});
$(".flip").live("mouseover", function() {
$(this).css('cursor', 'pointer');
});
If i remove this, it will tell me the next element is not well-formed and so on. If I include this javascript in a page which is not called via .load, it doesn't say any error. Is this because i'm calling this java script inside a div? and not in the head?
try to write the javascript code inde this function
$(document).ready(function(){
//Here insert your javascript code
});