onclick not loading iframe

Here is the JS I am using

<script type="text/javascript">
function loader(value, url)
{
    document.getElementById("page").innerHTML=value;
    document.getElementById("display").src = url;
}var home = "HOME";

var admin = "ADMINISTARTOR";
var sales = "SALES";
var isve = "ISVE";
</script>

This is in the head of the document. I have made a sidebar containing links:

<li><a href=<?php echo ""/".INDEX."/sales/"";?> onclick="loader(sales, this.href)">Sales</a>
    <ul>
        <li><a href=<?php echo ""/".INDEX."/sales/move"";?> onclick="loader(sales, this.href)">Movement</a></li>
        <li><a href=<?php echo ""/".INDEX."/sales/cancel"";?> onclick="loader(sales, this.href)">Cancel</a></li>
        <li><a href=<?php echo ""/".INDEX."/sales/add"";?> onclick="loader(sales, this.href)">Add new HW</a></li>
    </ul>
</li>

I have a target frame as:

<div id='content' style='margin-left: 170px; height: 700px; width: 800px; overflow: auto;'>
    <iframe id='display' src=<?php echo ""/".INDEX."/main/home"";?> style='height: 650px; width: 800px;'></iframe>
</div>

It works when I click the top level link, Sales in my case, the relevant document gets displayed in the target frame, but as soon I navigate to submenu links, its get loaded in the whole page. Please help!

Answer

It looks like you’re trying to do something similar to what AJAX already does. You can adjust your loader class to use jQuery’s load function. This will also allow you to get rid of the iframe if you want and just load the page into a div. In my opinion loading it into a div would be the better way to go anyways.

You’ll need to reference jQuery in your pages header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Then you’re new loader would look something like this:

function Loader(page) {
    $('#display').load(page + '.html');
}

That will load the contents of a separate HTML page into the display div based on the page name you pass it. I recommend doing some more reading on how to use jQuery and the AJAX load method. http://api.jquery.com/load/