I am new to the construction and design of a web app so I’d like some advice please (Django is my framework). I’m trying to code up a “how-to” website instructing users the step-by-step process for doing a certain task. I’d like the navigation of the website to be something like this…
http://technet.microsoft.com/en-us/library/aa991542.aspx
…in which there is a tree-like navigation on the left-pane that lists each step (e.g. Step 1, Step 2, etc…) that expands and loads the instructions for each step into the right-pane. I don’t want to reload the page each time so that leads me into AJAX. At this point, I’m not sure how to implement this. Do I store the HTML/CSS into a database to be pulled when the user clicks on certain links? Or do I write the HTML/CSS into my template files with display: hidden to be changed to display: block when corresponding links are clicked?
AJAX implies that you are making a server call for the data, but there is no reason for the server to fetch the data from a database – it could handle it using property files or even constants within a Java servlet or PHP/JSP page, without any involvement of a DB.
As for your use case, unless the menu is really long and has complex use cases, why not just follow your own comment on hiding the sub menus with CSS until they are needed? If the problem is loading the content in the right hand pane, it can also be done by using target on the menu and having a named frame or iframe for contents.
AJAX has nothing to do with the backend of the website. You don’t need anything “backing” it – not a database, not xml, not JSON… just some way to determine which page should be sent.
AJAX, at its core, is just a way of making a request to the server without posting back the entire page, and getting something back. That something could be JSON, which then gets parsed into new values to display. It could be HTML which just overwrites something else already being displayed. It could just be a true to represent something completed successfully.
So the simplest form of AJAX would be to have a site with main.html, menu/menu1.html, menu/menu2.html. On main.html, you use your AJAX framework to post a request for menu/menu1.html when the user clicks on the first menu option, and for menu/menu2.html when they click on the second. In both cases, you’d probably want to overwrite a menu element with the data you got back (or something) to display it. You’d do that with javascript if django doesn’t handle it for you.
No, you don’t need a database to implement AJAX. Flat xml or JSON files stored on the server will work just fine.
However, you may want to just make a single-document solution instead, or even use a frames-based setup.
3
What I think you our looking for:
Framework page: all links point to this page
Includes hardcoded sidebar and a div with all CSS for instructions.
The sidebar:
The sidebar will contain links to each of the steps, but each href=step1/2/3/…
You will then need JavaScript code that will need to get the href, and make a query to a static page (can be dynamic, but unnecessary) URL = "http://URL.com/path/file/" + href. Then set the instructions div to request.response.
http://URL.com/path/file/[href]
A text file with HTML code that is equivalent to what would go inside the instructions div.
Sample Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<jquery></jquery>
<title></title>
</head>
<body>
<div id="sidebar">
<a href="step1" class="sidebarLink">step1</a>
<a href="step2" class="sidebarLink">step2</a>
...
</div>
<div id="instructions">
loading
</div>
<script>
$(document).ready(function(){
$(".sidebarLink a").click(function(event) {
event.preventDefault()
var step = $(this).attr("href")
request=new XMLHttpRequest()
request.open('GET',"http://URL.com/path/file/" + step,false)
request.send()
document.getElementById('instructions').innerHtml = request.response
})
})
<script>
</body>
</html>
http://URL.com/path/file/[href]
there will need to be one of these files in for each step. The file would contain something like the following:
<p>this is instructions</p>
<p>this is more instructional text</p>
I can’t remember the javascript syntax for changing the url of the browser without a refresh, if you need that feature.