CODEWITHSUNDEEP
javascriptjqueryhtmlnode.js
streetlight
streetlight

Reputation: 5968

Comparmentalize HTML via Javascript or jQuery

I'm trying to come up with a purely front-end solution to a common practice.

In the past, I've stored the HTML for reused website elements (like the <nav>, <header>, <footer>, etc.) in a functions.php file, and used php functions to call these things in on multiple pages. This of course makes it easier to make changes site-wide, making my life easier.

However, I don't really want to use PHP (or in the past, ASP) to do this anymore. Does any one know of a clean way to do this in Javascript, jQuery or even Node? To be clear I want to call a function in the HTML (like writeNav(); ) that pulls the HTML for the nav. I'd rather not include <script> tags everywhere, if possible.

Upvotes: 1

Views: 137

Answers (4)

Madbreaks
Madbreaks

Reputation: 19549

This is trivial with jQuery, e.g.

function writeP(str){
    document.write($('<p />').text(str).get(0));
}

You could then do something like:

<div class="foo">
    <script type="text/javascript">writeP('hello');</script>
</div>

...which would result in:

<div class="foo">
    <p>hello</p>
</div>

That example is silly, but I believe the mechanism is in the spirit of what it is you're trying to accomplish.

Cheers

Upvotes: 0

cratervale
cratervale

Reputation: 121

I think what you're talking about are html includes.

This is not really a production worthy solution, but gets me through the prototyping phase.

Using jQuery, include this in your $(document).ready() callback:

$(".include").each(function() {
    var inc = $(this);
    $.ajax({
        url : inc.attr("title"),
        dataType : 'html',
        success : function(data) {
        inc.replaceWith(data);
        console.log("adding " + inc.attr("title"));
    });

Then in the body wherever you want to include an html file, do this:

<div class="include" title="path/to/html/file.html"></div>

All elements (divs, spans, etc) with the "include" attribute will be replaced by the content of the file path in the title attribute.

Note: the entire tag will be replaced in this process.

Upvotes: 0

machineghost
machineghost

Reputation: 35813

One very common solution for "building up a library of chunks of HTML that can be reused elsewhere" is "templating". There are numerous templating libraries to choose from (Underscore even has its own, small, template function), but I'd recommend looking at Handlebars.js first, as it's very robust but also very simple.

Handlebars templates will allow you to store your HTML however you want:

  • in strings in your .js files,
  • in <script type='text/handlebars'> tags on your html pages, or
  • in separate html files that get compiled in to a single JS file

It will also allow you to swap out small pieces of the HTML, so that you could (for instance) have a header that gets used all over, but replaces the title, like so:

<h3>{{title}}</h3>

The Handlebars site (http://handlebarsjs.com/) has an excellent run through; I highly recommend it.

Upvotes: 3

Erik Reppen
Erik Reppen

Reputation: 4635

There are also text editors like BBEdit with include support if it's just about organizing how you write your HTML.

Upvotes: 0

Related Questions