partials like rails has only done in pure javascript, and purely on the clients side. --I.E. no servers -

i'm working on little home brew project , i've found i've been spoiled working ror , more ror partials.

my project entirely client side. i'm using javascript , html5. this: have home screen template container in classic <%= yeild %> tag in ror.

i have thought using iframes seems messy. have thought using xmlhttp requests to file in javascript , update innerhtml of content div file stream. have done before personal projects, it's hacky , have flag browsers chrome --allow-file-access-from-files tag. can't advise end users do.

my other thought write html javascript string, , put different strings value of content.innerhtml sounds stupid hard maintain , not clean @ all.

ultimately writing own solution (which post here answer else looking) wanted know if there solution out there.

the ultimate end goal behavior follow flow:

main_page:

<div id="main_content">     <!-- yield area --> </div> 

app starts , file menu.html loaded yield area:

<div id="main_content">     <!-- content of menu.html, notice it's partial,           there no body or head or doc type tags, list -->     <ul>         <li>menu item</li>     </ul>     <!-- end of menu.html content --> </div>  

and when click on menu item loads contents of menu_item.html content div replacing current content (menu.html).

---

some research did:

• div iframe?
• div src attribute plugin (looks interesting runs on webserver)
• stack question updating div javascript
• found link somewhere led pure looks trick, seems difficult implement lot of content (since don't have generating json, have hand.)
• this talks seamless attribute of iframes, looks promising chrome has implemented , bugs have been abandoned.see here status of webkit development of seamless attribute.

if you're using jquery, use jquery.load(): http://api.jquery.com/load/

example:

$("#main_content").load("menu_item.html");