On my website I have a menu button that goes on every page and also a comments section. Instead of copying and pasting this into every single HTML file I created a JavaScript file that creates all of the HTML via the document.write function. This works fine, but as it is getting more and more lengthy and complicated it is also getting harder and harder to find elements and attributes since they are all squashed in one line.
I want to know if there is a better way to do this because I feel this is not the correct way due to it being so messing and disorganized.
I am just using a JavaScript file. It would look something like this:
document.write("<div id="id"></div>");
but with a lot more HTML.
I would suggest templating with a server side language such as PHP. This will allow you to format your different sections so that they are easily readable. Also it will work even if JavaScript is turned off on the browser.
<html>
<head></head>
<?php require("menu.php"); ?>
<!-- HTML body content -->
<?php require("comments.php"); ?>
</html>
If you want to stick with a client side approach then you can just put your menu and comments into separate html files and use jQuery to load it using
$('#Menu').load('menu.html');
$('#CommentSection').load('comments.html');
You can use jquery
Put your button in its own .html file like button.html with .load() in main html file.
$('#WhereYouWantItID').load('whatfolder/button.html');
This will load the button.html file to a specific target on your page
Related
I am looking to have a chunk of html containing a heading which i want to reuse across multiple html pages.
I have tried the EXACT code but it doesn't seem to work. it is displaying the script in HTML rather than actioning it.
index.html:
<html>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1>This is a test</h1>
<script>$("#content").load("commonContent.html");</script>
</html>
commonContent.html:
<div id="content"><h2>If this shows my test worked!</h2></div>
Any suggestions would be much appreciated. Please note i am a newbie to javascript!
You need:
To include the jQuery library since your script depends on it
To put your script inside a <script> element
To put an element in the document in which you will load the content (you are trying to use one with id="content" but no such element exists).
I'd recommend using a server side or build time template system instead though. They are more reliable and better food for search engines.
For this type of thing I usually use php like this:
<?php include("youhtmlfile.html"); ?>
It is an advantage because this way you don't have to worry about browser support.
Hello everyone quick question.
First time working with java script
I have a jsp file that will create a data grid and one of the columns of the data grid are checkboxes. My question is can a JSP file contain javascript in it or will I have to create a different file for just the javascript. The function of the java script will be a select all button.
If JSP can hold javascript where does the code belong? by this I mean what headers does the code reside int?
<html>
Thanks for the help everyone.
I've just answered a similar question here:
https://stackoverflow.com/questions/25059168/java-websocket-client-in-jsp-possible/25059382#25059382
The generic answer is: JSP can contain anything that a regular HTML page can contain. JSP is an HTML extended with JSP tags that are processed on a server. After the JSP tags are processed and a response is generated there is no any difference between that response and a regular HTML.
So, the question really is where to store the java scripts in an HTML. I think, the cleanest way would be to put them to a separate file or files and then use a <script> tag with an 'src' attribute:
<script src="<java-script-url>"></script>
But in cases when java scripts are not that big and complicated, it's OK to include them to the page itself under <head> element of your page.
Script tags should be added under the head tag of the HTML node.
The script tag can then simply contain JavaScript.
This should not be any different from adding a script tag to a normal html page.
<html>
<head>
<script type="text/javascript"><!-- required for FF3 and Opera --><jsp:text> </jsp:text></script>
</head>
</html>
Add inline javascript to the body of the jsp:text (jsp:text may not be necessary, I am not sure), or add a src="" attribute containing the path relative (or absolute) to the URL the browser will consume the page from.
Yes, it technically can. You'd simply put it under a <script> tag inside <head>. However, I recommend including a JavaScript file using a <script> tag, instead of inserting JavaScript directly into your JSP.
There is no dependency between JavaScript and JSP because JavaScript is used for client side scripting and JSP is used to produce HTML pages or contents dynamically using Java EE. JavaScript can be used along with HTML on any browser that supports JavaScript (all browsers we use for work and development supports JavaScript).
Feel free to write JavaScript functions and code for HTML page to create an interactive website, it doesn't matter whether you are using ASP, JSP or PHP for server side scripting and dynamic HTML content generation because all these frameworks produce and use HTML, CSS, JavaScript and Media Contents. Your browser can only understand HTML, CSS and JavaScript, its the web server application which understands JSP and its Java code.
Why don't you write this code in your JSP page and check yourself whether it works or not.
<script type="text/javascript">alert('Hello World!');</script>
JavaScript is not limited to be written inside <head> tag, you can write it anywhere you want in a HTML page. There are some cases in which you would like to write a JavaScript function at the end of <body> tag.
In my ASP.NET MVC4 application I got 1 javascript file for my functions across the site.
This works pretty good - however I want to run certain code in certain views.
Usually I would solve this by simply putting a short script tag in the view calling the desired function.
However I load my js files at the bottom of the body tag so this script tag would call a function before it being loaded which would obviously not work.
How can I call individual parts of my js file from different views while keeping my js files at the bottom of the body?
There are a few things going on here.
I would not be putting JavaScript directly in the page. Many reasons for this, and is not the focus of your question, but something I wanted to bring up.
You can have a separate JS file that gets loaded after your main JS file that actually does the call to the functions from "main".
My approach is to tag said views with an id:
<div id="specific-page-name"></div>
Then in my javascript simply do:
if ($('#specific-page-name').length) {
// Run code
}
This way you can still separate your views from js code.
Finally, if I have to use model data in js I can do something like:
<div data-model-data="#Model.Data"></div>
And simply read it as:
$('div').data('model-data');
I'm detailing the answer given by Matt in his comment : in your layout, you can specify that you want some additional HTML content (in your case, that will be your JS). You'll want to add it after your main JS block.
#RenderSection("AddScripts", required: false)
Then in your view, you can add a section and it won't be rendered in the view, but in the corresponding section in the layout (after your main JS block).
#section AddScripts {
<script type="text/javascript">
...
</script>
}
My site calls an external JavaScript file to create the footer on every page. I would like to include a follow button in the footer. However, all of the examples on the developer page are geared toward creating the button from an HTML file with embedded script, and I am not experienced enough with JS to figure out how to rewrite the code to work without the HTML. I have already tried storing the whole HTML blob as a string and writing it to the document. I also took the JS out of the blob and added it to the file, but that didn't work either.
Here is the HTML they provide, and I tried to extract
Follow #dbb0
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
To answer your main question: yes it's possible.
You should use the DOM, innerHTML (be careful with this) or jQuery to create a very similar html structure, and then add it to your document.
You should ask more specific questions to get further, this is too vague :)
I have partial control of a web page where by I can enter snippets of code at various places, but I cannot remove any preexisting code.
There is a script reference midway through the page
<script src="/unwanted.js" type="text/javascript"></script>
but I do not want the script to load. I cannot access the unwanted.js file. Is there anyway I can use javascript executing above this refernce to cause the unwanted.js file not to load?
Edit: To answer the comments asking what and why:
I'm setting up a Stack Exchange site and the WMD* js file loads halfway down the page. SE will allow you to insert HTML in various parts of the page - so you can have your custom header and footer etc. I want to override the standard WMD code with my own version of it.
I can get around the problem by just loading javascript after the original WMD script loads and replacing the functions with my own - but it would be nice not to have such a large chunk of JS load needlessly.
*WMD = the mark down editor used here at SO, and on the SE sites.
In short, you can't. Even if there is a hack, it would heavily depend on the way browsers parse the HTML and load the scripts and hence wouldn't be compatible with all browsers.
Please tell us exactly what you can and cannot do, and (preferably; this sounds fascinating) why.
If you can, try inserting <!-- before the script include and --> afterwards to comment it out.
Alternatively, look through the script file and see if there's any way that you could break it or nullify its effects. (this would depend entirely on the script itself; if you want more specific advice, please post more details, or preferably, the script itself.
Could you start an HTML comment above it and end below it in another block?
What does the contents of unwanted.js look like?
You can remove a script from the DOM after it is called by using something simple such as:
s = document.getElementById ("my_script");
s.parentNode.removeChild(s);
This will stop all functions of the script but will not take it out of user's cache. However like you wanted it can't be used.
Basically you can't unless you have access to the page content before you render it.
If you can manipulate the HTML before you send it off to the browser, you can write a regular expression that will match the desired piece of code, and remove it.