4

I'm a former (avid) user of ASP - I love it - but I've decided for certain reasons to go ahead and use a linux based server for my website. I haven't even started building my site yet and I'm already pulling my hair out trying to do something that is remarkably simple to do with ASP - Load a constant navigation bar.

Basically my goal is to have a template page - a single layout - that will dynamically load content I create in a separate page. For example;

index.html will load "navi.html" into the div marked "navigation", load "banner.html" into the div marked "banner", etc... So when a user clicks a link it doesnt refresh the entire page, but changes the content in the "main" div. With ASP this is remarkably simple, however so far in my research the best method I've come up with is using jQuery to load html into divs - only problem is it isn't working for me and I don't know nor can I find why.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Ace8i</title>
 </head>

<body>

<div id="navigation">
nav div tag is here
</div>


<p onclick="">test</p>

<script type="text/javascript" src="js/jquery.js">
$(document).ready(function(){
$('#navigation').load('navi.html');
});
</script>

</body>
</html>

I've created it basically exactly as I've seen it done in three other posts I've found online, and I've tried it in the head and in the body. I've also tried the load function wrapped in and without the document.ready function. No errors, just no navigation bar.

Ace
  • 123
  • 1
  • 2
  • 9
  • I see that you did not include the query library in your code, http://jquery.com/download/ – aahhaa Aug 01 '14 at 19:03
  • Yes I did, I even tested it by using jQuery to hide that test paragraph when clicked... jQuery is functioning as far as I can tell o_O – Ace Aug 01 '14 at 19:07
  • This really shouldn't be done with javascript if you can avoid it. What back-end language are you using? – Kolby Aug 01 '14 at 19:08
  • I would be fully open to suggestions on doing this. Personally, I hate JavaScript. It's like C#'s ugly child nobody wants to play with but they have to. Not sure what you mean by back-end language, but if you mean OS I'm using Linux. Like I said, I'm an ASP junkie, but I elected to use a Linux host because there's more information available for MySQL than for Windows SQL-S – Ace Aug 01 '14 at 19:13
  • try php include()? http://php.net/manual/en/function.include.php it run in linux – aahhaa Aug 01 '14 at 19:15
  • I'm just as bad with php as I am with JS/JQ, but isn't php's include() method only for attaching other php documents, similarly to creating an instance of a class in C#? – Ace Aug 01 '14 at 19:18
  • just change the extension of your .html to .php it works the same. `` http://alistapart.com/article/keepingcurrent maybe you will find this useful. – aahhaa Aug 01 '14 at 19:26

2 Answers2

0

Your script tag is already loading a script "js/jquery.js". Try close that tag and make a second one for your inline script.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').load('navi.html');
});
</script>

JavaScript: Inline Script with SRC Attribute?

Community
  • 1
  • 1
Strongbeard
  • 39
  • 7
  • hmmm. Did you made sure that the reloaded pages reflected the change using an inspector, console, or view source? – Strongbeard Aug 01 '14 at 19:21
  • Not sure what you mean by that, but I'm using Dreamweaver and testing in Chrome. This is all new to me, I've only ever used Visual Studio for Web. – Ace Aug 01 '14 at 19:23
  • In Chrome you should be able to right click on your page and hit the "Inspect element" button. That opens a debugger for your webpage. Since you are using an inline script, checking that your change to the inline javascript is actually there and that an older cached version wasn't loaded instead can also be done by right clicking on the page and then clicking "view page info". – Strongbeard Aug 01 '14 at 19:30
  • XMLHttpRequest cannot load file:///C:/Users/Nicolas/Desktop/Ace8Interactive/Website/WEBSITE/public_html/navi.html. Received an invalid response. Origin 'null' is therefore not allowed access. Index.html:1 – Ace Aug 01 '14 at 19:35
  • FINALLY figured out my problem. Everything I did was correct, HOWEVER: I don't fully understand this, but the .load file would not recognize the target html file because I was testing locally. Sync'd my site w/ my host, tested it live, works exactly as it should. Thanks for the help nonetheless :) – Ace Aug 01 '14 at 21:10
0

I am sure you figured this out but I stumbled across this question when searching for an answer to the same question. If you are testing locally it will not work but if you throw your files up on a server or localhost you will see that it is performing correctly.

user3556920
  • 21
  • 3