How to include text file into javascript - javascript

Is there any way to load some text from another file into javascript, without server side code?
I was thinking to use another element to hold the text inside some comments, but I don't know how to read it's source code with javascript.
Something like:
<script src="myfile.js"></script>
<script> function readMyText() { ... }</script>
In myfile.js:
/* some text */

You can put anything you want into a script tag if you give it a "type" that's not something the browser understands as meaning "JavaScript":
<script id='Turtle' type='text/poem'>
Turtle, turtle, on the ground;
Pink and shiny - turn around.
</script>
You can get the contents via the "innerHTML" property:
var poemScript = document.getElementById('Turtle');
var poem = poemScript.innerHTML;
Here is a jsfiddle to demonstrate.
That trick is popular lately with people doing client-side page building via templates.

Without using ajax or any server code... sorry mate but you can't :(

Building on Pointy's answer, to import from local files do this:
<script src="foo.txt" id="text" type="text">
</script>
You could also use this to target an external file:
<script src="http://foo.txt"></script>

Related

Add html on head

I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>

Best way to access external JavaScript file and place contents in div?

So, lets say you have a page that wants to load from a javascript file and it includes
temp.html file
<script src="example.js"></script>
<p class="one"></p>
Now in the example.js file you have a function that is
function getInfo() {
var place = "foo"
$(".one").html(place);
}
//Edit currently I call the function inside the JS file
getInfo();
My question is how would you connect the two files so that the external javascript file knows that it is pointed to the paragraph with the class one?
Normally when this is in a single page, you would call the function and the info will be set.
I have seen a getScript method and a load method for Jquery. Would that be applicable here?
Any ideas on how to approach this? If you provide some code that will be super helpful.
Thanks in advance.
Looks like you want to execute getInfo() as soon as it's defined (i.e.: example.js is loaded).
You can try this approach:
<script src="example.js" onload="getInfo();"></script>
In your example.js, change getInfo() to something like this:
function getInfo() {
$(document).ready(function() {
var place = "foo"
$(".one").html(place);
});
}
Your language is confusing, but you could use jQuery's $(document).ready function which would suffice. Generally speaking, an externally loaded file should execute where the tag is in the script.
A hack could be to place a tag before the end of your document body, give it an id, and then use $('#id').ready() there. In general though, you could just try coding the transclusion concept (I'm guessing you're used to this) from scratch using intervals and timeouts.
<div id="rdy">
</div>
</body>
Then in your file:
$('#rdy').ready(getInfo);
Just my added opinion, you should consider that Google is up to some not-so-nice things these days, they are long-gone from the "do no evil" mantra.
If we assume you have a JavaScript file that contains this content:
function getInfo() {
var place = "foo"
$(".one").html(place);
}
then your markup will look something like this:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="example.js"></script>
<script>
$(function(){
getInfo();
});
</script>
</head>
<body>
<p class="one"></p>
</body>
</html>
$(function(){ ... }); is just the simplified version of $(document).ready(function(){ ... });. They both more or less handle the onload event, which fires when page has finished loading.

Is there a way to use javascript code without using <script> tag?

So I'm working on my online portfolio using prosite.com and I created some simple hover thingy using javascript (http://wojtek.szukszto.com/index.html). The problem is prosite.com won't allow me to use < script > tag... Is there any way to do it? Maybe as an external html? I don't know... I'm not really good in coding, so any help would be appreciated.
You can have them as DOM Events like
<div onclick="alert('cat');">
I <strong>Really</strong> want a cat!
</div>
<body onload="//you can put a whole bunch of stuff here"></body>
(It is equivalent to window.onload = function(){ //stuff })
You can put your javascript code into external file and call in the head section of your html document
<head>
<script src ="/JS/yourjsfile.js"></script>
</head>
hope that your host allows you to call JS in the head section
The way I do it is by stating the type of script. The ProSite already has javascript integrated within itself. I use:
<script type="javascript"> Code-Goes-Here </script>

android + javascript : create html dynamically and put javascript in the head tag

I have android application and I need to show banner in some specific manner.
I get the javascript code like this from the server :
<script type="text/javascript"
src="http://rm.face.ua/adriver.core.2.js"></script>
<div id="adriver_top"></div><script type="text/javascript">
new adriver("adriver_top", {sid: 196260, bt:52, pz:1, bn:0});
</script>
I use javascript like this :
webView.loadUrl("javascript:bannerDownload();");
so I need to put my javascript code to the javascript method and create dynamically html there and put this javascript to the head of html.
I know, that is not so difficult for web-developers, but I'm deal with Java so need your help. Thank you for responses.
I solved it with the loadData. Thanks to alexbrickwedde.
But the key is to use like this:
webView.loadData(videoUrl, null, null);
Because in another cases like this :
webView.loadData(videoUrl, "text/javascript", "UTF-8");
it didn't work for me. And also don't forget enable Javascript :
webView.getSettings().setJavaScriptEnabled(true);
With loadData, you can easily load content into the WebView.
See Android API Docs:
https://developer.android.com/reference/android/webkit/WebView.html#loadData(java.lang.String,%20java.lang.String,%20java.lang.String)
And a sample at heading 5:
http://www.mkyong.com/android/android-webview-example/

javascript error: this.node is null or not an object

I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.

Categories