best practice for dealing with common "structural" elements of pages?

Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site's header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its "ajaxy-ness" is done client-side).

What is the best way of importing/"including" those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders

<div id="header"></div> <div id="leftSideBar"></div> (...)

and then do in jquery's $(document).ready():

$.get("header.html", function(html) { $("#header").html(html); }); // ....

Is this the best way to do this? I'm new to web development. : )

I guess I could also dig up a "macro-like" code-generation tool that I would run on the HTML files to replace, eg, "#header" with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.

What is the smart way to achieve this? I am sure this problem has been solved a thousand times.

EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing "web 2.0-ish" web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)

Thank you for your insights,


-------------Problems Reply------------

If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.

<?php include 'other_file.php'; ?>

Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don't want to use a backend language, some IDE have a way to handle templates, you could look into that.

Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.

Here's an example using Rails :

<div id="content"> <%= yield %> </div>

Here all the content of a subpage will go into the "yield". Here's a link to learn more about that.

Some frameworks can handle multiple place holders.

To some extent, it depends on what you're using on the server side to render the pages. If your using server side scripts to generate the page you should be able to use a web framework (eg. Django or RubyOnRails) or even just a basic templating engine such as Genshi. Basic include functionality may even be built into the language you're using (ie. PHP)

If it's just static HTML you may want to look into setting up some form of server side includes such as Apache SSI or NGINX SSI. You'll need to pick the one that works with whichever server you're using, and you'll need enough access to install and configure the plugin or module.

Alternatively, you might want to look at using a script to generate your pages (edit, generate and deploy). A simple approach using cat / sed / awk / make (additional useful reference - Sed & Awk) may be all you need, or you might want to use a templating engine and a language such as Python or Perl.

I'd have the includes handled server-side, and this will mean fewer requests from the client, and may also have other benefits (easier to debug js, etc).

Having the server process includes really isn't going to put a major strain on it.

Category:javascript Views:1 Time:2009-12-28

Related post

  • Common-practice in dealing with high-load tables in MySQL 2009-10-12

    I have a table in MySQL 5 (InnoDB) that is used as a daemon Processing Queue, thus it is being accessed very often. It is typical to have around 250 000 records inserted per day. When I select records to be processed, they are read using a FOR UPDATE

  • Is it a good practice to use float to position element? 2011-06-15

    Can I use float to place the element in a webpage rather than using position: absolute or relative? --------------Solutions------------- Fundamentally? Sure, that's what it's there for. Whether it's the right choice depends on what exactly you want t

  • lxml - root.xpath() is returning HtmlElements with \r replaced with &#13; what are the best practices in dealing with this? 2012-02-10

    The following code prints a bunch of unwanted entities within the HTML import lxml.html page = lxml.html.parse('').getroot() category = page.xpath("//*[text()='By Category']/following-sibl

  • Speeding up jQuery empty() or replaceWith() Functions When Dealing with Large DOM Elements 2009-06-12

    Let me start off by apologizing for not giving a code snippet. The project I'm working on is proprietary and I'm afraid I can't show exactly what I'm working on. However, I'll do my best to be descriptive. Here's a breakdown of what goes on in my app

  • What are the best practices for dealing with the Back Button in IE (and Firefox) 2009-11-20

    I know this in old issue but I can't figure out the best practices for dealing with the back button. I'm writing a web application with lots of data movement between the browser and the backend server. I currently use post and of course when the user

  • Best practice to deal with form processing 2010-06-04

    I was wondering what is the best practice to deal with form processing? In my case I do something like that: if the user hasn't submited the form display the form else if there are form errors display errors display form again else display a success

  • What are best practices for dealing with out of memory errors? 2010-12-20

    I'm wondering, what are good practices for dealing with out of memory errors. void SomeTask() { try { SomeObj obj = new SomeObj(); } catch( std::bad_alloc& ) { // What should be done here? } // ... more code ... } I feel like silently returning i

  • Common structure of gem 2011-03-07

    As we all know, the common structure of rubygem assumes presence of lib directory. I noticed, that generally in this directory are two items: gem_name.rb and gem_name/ directory. The gem_name/ directory hold main sources of project. It is heart of ap

  • Visualize/plot the morphological structuring element in Matlab 2011-05-02

    Someone can help to visualize or plot the morphological structuring element, created by function 'strel' for only 'disk' structuring, in Matlab? Thanks. --------------Solutions------------- Yes, it's a big strange, but I assume that for efficiency re

  • why semaphore, message queues are based on a common structure 2011-11-12

    I am reading through These three (Shared Memory, Semaphores and Message Queues) seeming unrelated topics are presented together in they are based on a common structure Why would they use same str

  • Best practice for dealing with different client time zones? 2012-01-19

    I'm building an iPhone chat app, that uses a central server. What is the best practice for dealing with different clients time zones? I mean when client1 sends a message to client2, the server save the message in his database with timestamp according

  • Is it possible to get structural elements from a PDF file using iTextSharp? 2012-02-16

    We are using iTextSharp with a C# WinForms application to parse a PDF file. Using iTextSharp, I can easily extract the text data from the PDF file. Suppose a PDF file contains an image surrounded by two lines of text. In this case, I could not extrac

  • Refer to common structure from other structures 2012-04-02

    I need to define copybook, describing my file format. In my file, there are rows of different format, but the first part of all rows is the same. How can I define the common structure only once and refer to it from other structures? I need something

  • Dealing Whit Common Svchost__ 2013-01-10

    Remember - This is a public forum so never post private information such as email or phone numbers! Ideas: Programs you are having problems with Error messages Recent changes you made to your computer What you have already tried to fix the problem De

  • How can I reset the List(of String) in my structure but not reset the values in the previous structure element in VB.NET? 2014-01-15

    I have multiple menu items. Each menu item has multiple fields. I'm trying to add all field values the AllFields variable for each item, but I keep getting values from the previous item(s) (example: the first item has 12 field values (which are diffe

  • Most common array elements - Swift 2014-12-22

    I need to find the most common (modal) elements in an array. I have racked my brain for a clever way of doing it. The simplest way I could think of was to set variables for each unique element, and assign a count variable for each one, which increase

  • In Struts2, how do you share your common html across all pages? 2009-11-23

    In Struts2, how do you share your common html across all pages? In, you've got Master pages, and in Rails there are Layouts. The idea is that your common html (eg the header, menu, and styles) are all easy to maintain because they are in one

  • How to hide any element from page only from Screenreader but not from page for normal users? 2011-01-25

    How to hide any element from page only from Screenreader but not from page for normal users? I know these snippets but I want to hide something from screen redaer but not from page visually. Sscreen reader should skip the hidden part. /* Hide for bot

  • Is it bad practice to query two different databases on one page? 2010-03-10

    I'm working with a programmer who doesn't want me touching his database... I would like work with a database instead of hard coding my content but don't want the sites performance to suffer. Is it bad practice to query two different databases on one

Copyright (C), All Rights Reserved.

processed in 0.148 (s). 11 q(s)