2

I am tasked with creating a website using only client side techs such as HTML, CSS and JavaScript. We can't using any server-side tech because the instructor is too lazy to install anything and won't allow us to deploy using something such as Heroku. Is there a way I can do this? In particular I want to create partials for that navigation and footer without having to copy and paste them in every single file.

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
Antarr Byrd
  • 24,863
  • 33
  • 100
  • 188

1 Answers1

2

I know of two different approaches:

1. Using Ajax

You can use ajax to do this - probably with the help of a JavaScript library or framework.

JQuery's load can do things like $('#header').load('header-partial.html');

If you're building something more complex with a lot of views, etc... I'd consider using a MV* javascript framework like Backbone.js or AngularJS.

Check out the AngularJS seed project on GitHub for an example

2. Using a build script

If your site is simple enough that all you want to do is include a header and footer on each page, you should consider doing this as a build step in your deployment process. I.E. complile your html with the partials locally, and upload full pages, with the header/footer code on every html page.

This approach has the benefit of not breaking your site if js is disabled.

For an example, check out html5boilerplate's ant build script

Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
  • I will trying finding some ajax examples, because it AngularJS is not an option. It requires node.js which also requires an install. Thanks – Antarr Byrd Feb 04 '13 at 18:15
  • How are you going to use AJAX without server-side components? AJAX needs to send requests to server scripts. – Barmar Feb 04 '13 at 18:18
  • it doesn't require node.js - its all just front-end tech. Node is just used for integration of its testing framework. Learning something like this *will* be a pretty large amount of work, so perhaps a straight ajax approach would be good (I'd use JQuery personally) – Zach Lysobey Feb 04 '13 at 18:18
  • @Barmar rly? Can't you just use [JQuery's `load`](http://api.jquery.com/load/) to do things like `$('#header').load('header-partial.html');`? – Zach Lysobey Feb 04 '13 at 18:21
  • Right, didn't think of such a simple case. – Barmar Feb 04 '13 at 18:24
  • @Barmar Your Id works great as long as I'm using IE, I get an error saying "Origin null is not allowed by Access-Control-Allow-Origin" in Chrome and Opera. – Antarr Byrd Feb 04 '13 at 18:30
  • @AntarrByrd assuming you mean me... everything should work on all browsers once uploaded - the `origin null` thing is b/c you because you are running it locally: http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – Zach Lysobey Feb 04 '13 at 18:34
  • @ZachL thanks for the feedback. This may be an option,im not sure since the instructor wants to just unzip the file and run it locally. Maybe we can convince him to allow a some kind of deployment. Sorry for the mixup – Antarr Byrd Feb 04 '13 at 18:38
  • hmmm... bummer. Well good luck. I don't have any experience with the other (non-js) option - but maybe you should give it a go. You can create a build process that executes when you save a file, and compiles the pieces into the final product - which you could then send to the professor. Aside from combining html partials, this could do all kinds of other clever things, like concatenation and minification of your css & js. – Zach Lysobey Feb 04 '13 at 18:44
  • 1
    @AntarrByrd funny I realize this a year later, but you say AngularJS requires node.js. It doesn't. It's fully client-side js. Its common to use node.js build-related tools when working with Angular, but thats all just in development. The resulting html/css/js gets deployed in the same way as any "normal" front end project. – Zach Lysobey Mar 16 '14 at 22:30