Links into Loading into Content Div

[Xtremer360]

I'm just curious to know what would be the best way to go about this. I have my navigation and content area divs from my admin panel show below and what I want to do is when one of links is clicks then to load that links file into the content div. I've been told JQuery but I can not find a function exactly detailing and teaching me how to do what I'm trying to do.

 

<!-- Global -->
<div id="page-content">
<div class="container content">
	<!-- Sidebar -->
	<div id="sidebar" class="bImg">
		<div class="bInner"><span class="bTR"></span><span class="bBL"></span>
			<ul id="side-nav">
				<li class="active"> 
					<a href="#" title="Character" class="button">
						<strong>
							<img src="img/icons/newspaper_48.png" alt="Character" class="icon "/>
							<span class="title">Character</span>
							<span class="expand expanded"></span>				
						</strong>
					</a>
					<ul>
						<li><a href="/mods/bio.php" title="Bio">Bio</a></li>
						<li class="active"><a href="/mods/allies.php" title="Allies">Allies</a></li>
						<li><a href="/mods/rivals.php" title="Rivals">Rivals</a></li>
						<li><a href="/mods/quotes.php" title="Quotes">Quotes</a></li>
					</ul>
				</li>
				<li class="inactive"> 
					<a href="#" title="Submit" class="button ">
						<strong>
							<img src="img/icons/paper_content_48.png" alt="Submit" class="icon "/>
							<span class="title">Submit</span>
							<span class="expand"></span>
						</strong>
					</a>
					<ul>
						<li><a href="/mods/roleplay.php" title="Roleplay">Roleplay</a></li>
						<li><a href="/mods/news.php" title="News">News</a></li>
						<li><a href="/mods/match.php" title="Match">Match</a></li>
                            <li><a href="/mods/segment.php" title="Segment">Segment</a></li>
					</ul>
				</li>
				<li class="inactive"> 
					<a href="#" title="Booking" class="button">
						<strong>
							<img src="img/icons/image_48.png" alt="Booking" class="icon "/>
							<span class="title">Booking</span>
							<span class="expand"></span>
						</strong>
					</a>
					<ul>
						<li><a href="/mods/champions.ph" title="Champions">Champions</a></li>
						<li><a href="/mods/booker.php" title="Booker">Booker</a></li>
						<li><a href="/mods/compiler.php" title="Compiler">Compiler</a></li>
                            <li><a href="/mods/archives.php" title="Archives">Archives</a></li>
					</ul>
				</li>
				<li class="inactive"> 
					<a href="#" title="Fed Admin" class="button">
						<strong>
							<img src="img/icons/comment_48.png" alt="Fed Admin" class="icon "/>
							<span class="title">Fed Admin</span>
							<span class="expand"></span>
						</strong>
					</a>
					<ul>
						<li><a href="/mods/handlers.php" id="handlers" title="Handlers">Handlers</a></li>
						<li><a href="/mods/characters.php" id="characters" title="Characters">Characters</a></li>
						<li><a href="/mods/manageapplications.php" id="templates" title="Applications">Applications</a></li>
                            <li><a href="/mods/eventnames.php" id="templates" title="Event Names">Event Names</a></li>
                            <li><a href="/mods/titles.php" id="templates" title="Title Names">Title Names</a></li>
                            <li><a href="/mods/divisions.php" id="templates" title="Divisions">Divisions</a></li>
                            <li><a href="/mods/matchtypes.php" id="templates" title="Match Types">Match Types</a></li>
                            <li><a href="/mods/arenas.php" id="templates" title="Arenas">Arenas</a></li>
					</ul>
				</li>
				<li class="inactive"> 
					<a href="#" title="Site Admin" class="button">
						<strong>
							<img src="img/icons/spanner_48.png" alt="comments" class="icon "/>
							<span class="title">Site Admin</span>
							<span class="expand"></span>
						</strong>
					</a>
					<ul>
						<li><a href="/mods/templates.php" id="templates" title="Templates">Templates</a></li>
						<li><a href="/mods/contentpages.php" id="contentpages" title="Content Pages">Content Pages</a></li>
						<li><a href="/mods/bioconfiguration.php" id="bioconfiguration" title="Bio Configuration">Bio Configuration</a></li>
                            <li><a href="/mods/newscategories.php" id="newscategories" title="News Categories">News Categories</a></li>
						<li><a href="/mods/menustructures.php" id="menustructures" title="Menus">Menus</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /Sidebar -->


	<!-- Content -->
	<div id="content" class="roundedBorders">

            
            
            
            
            
            
            
		<div class="bBottom"><div></div></div>
	</div>
	<!-- /Content -->

[trq]

The idea is quite simple.

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Example</title>
  </head>
  <body>
    <section id=links>
      <a href=#foo>foo</a>
      <a href=#bar>bar</a>
      <a href=#bob>bob</a>
    </section>
    <section id=stage></section>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('a').click(function() {
        $('#stage').load($(this).attr('href').replace(/#//)+'.html);
      });
    });
</html>

 

When you click on the link pointing to #foo, the file foo.html will be loaded into the 'stage' section. See jQuery's load() for more info.

[Xtremer360]

So simple I'm not getting it to work. I understand the function in yet I'm still not getting it to work properly.

 

http://defiantwrestling.net/efedmanager/index.php

[Xtremer360]

But with the modification it needs to load the files out of the mods/filename.php sort of deal.

[trq]

Your id's don't have hashes in them so there is no need for the replace. Your also missing a ' around the '.php' string.

 

$('#content').load($(this).attr('id')+'.php');

[Xtremer360]

The only thing is index is in the root directory and there's a folder in the root directory called mods and all my linked files are in the folder called mods so shouldn't I tell it somehow that it has to be from that directory.

[trq]

Indeed you should.

 

$('#content').load('mods/' + $(this).attr('id') + '.php');

 

Does that make things clearer?

[Xtremer360]

Very much clearer however nothing is happening.

 

http://defiantwrestling.net/efedmanager/index.php

 

I would try and trouble shoot and try and figure out with FireBug to see what it happening but as far as js/jquery I'm at a loss as to how to trouble shoot with that.

[trq]

Your missing the closing }); from your code.

 

$(document).ready(function() {
  $('a').click(function() {
    $('#content').load('mods/' + $(this).attr('id') + '.php');
  });

 

Should be....

 

 

$(document).ready(function() {
  $('a').click(function() {
    $('#content').load('mods/' + $(this).attr('id') + '.php');
  });
});

[Xtremer360]

Thank you so much!