How I can modularize static HTML file? - javascript

I'm a front-end developer. When I write a html code I repeat my self a lot by copy and paste (header section, footer section, etc).
How I can write modularize my html files? Like separate header.html and footer.html, and after that call both in index.html... same as erb in Ruby on rails? (I don't like jade lang)

In PHP we would do something like this:
index.php
<?php
include 'inc/head.inc.php'; //DOCTYPE and <head> stuff
include 'inc/header.inc.php'; //NAV or other top-of-page boilerplate
?>
<div id="uniqueDIV">
//Your unique page-specific divs can go here
</div>
<?php include 'inc/footer.inc.php'; ?>
So, in your head.inc.php file, you just have the usual DOCTYPE and <head> portion of your page file.
In Ruby, it appears the equivalent instruction is something like:
load "inc/head_inc.rb" -- OR --
require_relative "inc/head_inc.rb"
https://practicingruby.com/articles/ways-to-load-code
Another option is to use a bit of js/jQuery to populate parts of the document. If you don't have PHP, this is 2nd best option. It's less optimal than PHP because the js/jQ code will run after the page is fully rendered, which may cause a minuscule (but noticeable) lag before the code appears.
For example:
html
<div id="navbarDIV"></div>
js/jQuery:
<script type="text/javascript">
$(function(){
$('#navbarDIV').load( 'inc/navbar.inc.html' );
});
</script>
Note that you will need jQuery loaded to use the above code. Simple as this line in your <head>:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
jsFiddle demo
Final note: the script tag can be included in your <head> as an external file, or it can be plopped anywhere in your document with the rest of the html. Whatever works. But <head> as external file, or last element in body (also as an external file) are preferred.
Final final note: the ".inc." naming convention is not required, it's just my own practice. Include file could be named head.html or head.php or etc.

You could consider using something like Swig, which doesn't require a server (you can compile your templates locally).
Swig's syntax is much like Mustache or Handlebars, it uses braces and works inside of normal HTML, so you can retain the HTML syntax you want (unlike Jade).
For separating HTML into files to be reused, you can check out Template Inheritance. You can also see File Inclusion and File Imports.
Here is a small example:
{% include "./header.html" %}
<div id="body">Hello world</div>
{% include "./footer.html" %}
i use gulp, and i want tools for compile file to standard html file. like jade. – Sajad Abedi
For this you can use gulp-swig and build your templates locally in a task.

I have used EJS, which is convenient.
You can have a try.

For HTML files there is no standard way for reusing HTML parts. You have to use into a templating system.
But erb is a templating system and can handle that. See this Stack Overflow answer about "Including one erb file into another".

Related

Using text.js with require.js how can I create one template html file but grab each script template individually?

I'm using require.js and text.js to load a template file that has a bunch of <script> templates in it:
e.g. /scripts/templates/comments.html
<script type="text/template" id="js-comment-reply-tmpl">
// html in here
</script>
<script type="text/template" id="js-comment-edit-tmpl">
// html in here
</script>
And because using underscore's template system (or any similar js micro-templating system), this file itself gets loaded as a string. Is there a smart way to just grab each template from within that file? e.g. $(template).html() wrap it in jQuery and then do a find() or something on it? I'd essentially have to place it into the DOM first though, so that would probably be slow as hell and I might as well just not even load it with text.js and just pluck it out of the DOM initially.
My other thought is to split them each into their own files, but then that would slow down on request time (although I'd probably just end up using r.js with node to minify this all in the end anyway so it wouldn't matter).
e.g. /scripts/templates/comment_reply.html
<script type="text/template" id="js-comment-reply-tmpl">
// html in here
</script>
e.g. /scripts/templates/comment_edit.html
// html in here
What's the best/most efficient way to do this?
I would advise moving each template into it's own file and loading them all separately. Some of the advantages of doing so are:
Easier maintainance - Searching for a template in a project is easier if they all have their own names and it also reduces hassle with source control conflicts if developers aren't all editing the same file.
Portability - If you end up using a templating system that can be used on the server (like Mustache) then the templates are already easy to share between front and back-end.
The main disadvantage that you already highlighted are the extra requests, but you should definitely not be going to production without building your scripts with r.js so this shouldn't be a problem

JS file not triggering if I include another JSP file inside JSP file

I have a main jsp file, inside of that JSP file, I have invoke a JS file and included another JSP file called login.jsp.
Before adding the include for login.jsp the functions of my JS file can be called. After adding the login.jsp it is no longer working.
I tested invoking the JS file inside the login.jsp, it is working that way. The thing is, I cannot do that because many JSP pages will include login.jsp and I don't need to call each and every JS file that uses the login.jsp.
Here is the code:
this is my main jsp file:
<html>
<head>
.. some scriplets with no error ...
<SCRIPT type="text/javascript" src="<%=request.getContextPath()%>/js/pcLotsFrontProcessMaterialRegistration.js" ></SCRIPT>
.. other js files that is included this way ..
</head>
<body>
<div id="login_holder" align="center">
<jsp:include flush="true" page="../admin/login.jsp"></jsp:include>
</div>
... some codes ....
</body></html>
and my login.jsp is this :
<div id="login-box">
<table id="login-box-table">
... table contents ...
</table>
</div>
<script>
... functions ...
</script>
Is there something wrong with this format?
Please don't mind the scriplets and all I intend to modify them some other time, I just need to make this work first.
Thank you very much. :D
It's really hard to tell what's going on since you chose to omit the javascript, however it seems highly likely that something in the javascript in login.jsp is conflicting with the javascript in the 'main' jsp.
I suggest using a javascript console and debugger (like the Developer Tools in Chrome or FireFox) to find the problem.
By the way, this not a very good way to structure things, and is particularly prone to this type of problem.
First of all, you shouldn't have your javascript in your jsp pages - it should be in external .js files, and it should be name-spaced to avoid conflicts (I suggest reading Doug Crockford's 'Javascript - The Good Parts').
Second, there are much better ways to compose pages - for instance, take a look at the Apache Tiles project.
How about using JSP Scriptlets #include
like
<%#include file="../admin/login.jsp" %>
if your page is static page.

Make one all.js from various js files

I am making a website using PHP. I have various Javascript snippets in various pages and various Javascript files. I want to put them all in one .js file. How can I do that?
Copy them all into one file, in the order they were included within document.
If they were written correctly, there should be no problems. But there may be problems regarding some conflicts (like names of the variables) or cases, when the script was not meant to be executed on all pages (eg. assumes some container exists within HTML, but this container is only on some pages - thus on other pages the script may throw some errors or behave inappropriately).
With PHP you could just make a faux-javascript file, e.g. js.php and then include all the js files like:
<?php
include('foo.js');
include('bar.js');
Then reference this file from the main php page's html:
<script type="text/javascript" src="js.php"></script>
Another way is by inline js as
<script type="text/javascript">
<?php
include "one.js";
include "two.js";
?>
</script>
I also try to reduce js, css and use image sprite for background to reduce browser header requests.

How to get visual studio to recognize a cshtml file as javascript

I am writing a css/js page that has some dynamic parts in it.
To do this i am using a cshtml file containing css/js - i am using mvc.net and returning the css from a controller action.
The trouble is visual studio recognizes this page as html and not as javascript/css so it does not give me javascript/css coloring and IntelliSense.
My questions:
is there a better/easier way of creating dynamic css/js in .net
How can i get visual studio to recognize a cshtml page as javascript.
I know this is an old post...but...
What I did was just put the script tags around my javascript files in their own .cshtml file.
I created a separate controller (JavascriptController.cs), and I created a filter on that controller that removes the script tags. I set the filter in the OnActionExecuting method. by just doing
this.Response.Filter = new ScriptFilter(Response.Filter, Response.ContentEncoding);
So you get the syntax, you get razor without having to use RazorJS, and you can request the js files like regular routes in an MVC application. You just have to keep the script tags on the partial view while editing.
So you can call
/Javascript/{Action}
and you'll get your javascript file with your razor in it, and the filter will remove the script tags so you can include it like a normal script.
<script src="http://{host}/Javascript/{action}"></script>
What is wrong with putting <script> and <style> tags in a page and put your dynamic js/css there , in the end if it is dynamic there is no way for caching it so this approach will be fine.
you can write something like below:
<script>
function myFunction_#MyFunc(params)(obj) { return obj.field + #MyOtherFunc(params); }
<script>
and razor engine will evaluate #MyFunc(params) and #MyOtherFunc(params) before sending it to browser
The best solution is to follow unobtrusive javascript and unobtrusive styling and put your javascript into a .js file, put your css into a .css file and reference them in the markup in your cshtml file with a <script> and <link> tag.
e.g.
<script src="Scripts/scriptName.js" type="text/javascript"></script>
<link rel="stylesheet" href="Content/styleSheetname.css" type="text/css" />
This is good practice as it keeps your content(markup)/styling/behaviour separate.
For JavaScript you could try the RazorJS nuget package. But we've run into some inconsistencies while using it.
Still trying to find a better way to do this using Controller/Views and still be able to use intellisense and get decent coloring.

Include the prototype.js code directly in the html file

Is there a way to include the prototype.js code directly in the html file?
I do not want to have something like this:
<script type="text/javascript" src="/path/to/prototype.js"></script>
I want something like this:
<script type="text/javascript" >
// the code of prototype.js to be here
</script>
The context for what I want this is more complex. I just want to know now if this is possible or not.
P.S.I'm not very familiar with Prototype.
Thank you.
Yes it will work if you copy paste the entire content inside the script tags.
We do something similar with jQuery and our other JS and CSS files for our web app. They are all compressed and included inline when we run our deployment script.
It makes the page relatively heavy (300kb) but the main advantage is you get everything in a single http request. This makes the app look very fast.
The page is then cached, making next visits even more responsive.

Categories