1

I wrote code for dropdown Menu and want to insert that code in other html files. DropDown Menu code.

http://jsfiddle.net/techspartan/49Bpb/

For inserting the above HTML code into other HTML files I am using this code:

  <html>
     <head>
       <script src="jquery-2.0.3.js"></script>
       <script type="text/javascript">
         $(document).ready(function(){
           $('#topdiv').load('index.html');
         });
       </script>
     </head>

    <body>
     <div id="topdiv">
     </div>
    </body>
 </html>

Basically I want to declare my DropDownMenu code at one location so that if I make changes in menu code than I don't have to edit every HTML file that has the DropDown.

The above code is working in Firefox but nothing is shown in Chrome and IE-10.

Robbie JW
  • 729
  • 1
  • 9
  • 22
tech spartans
  • 370
  • 6
  • 22
  • 4
    Don't do this with JavaScript. Use [server-side includes](http://en.wikipedia.org/wiki/Server_Side_Includes). – Evan Davis Nov 07 '13 at 16:38
  • 1
    can you provide some code snippet. and I want to do this from client side – tech spartans Nov 07 '13 at 16:40
  • See my [previous comment](http://stackoverflow.com/questions/19841446/i-am-using-javascript-to-load-some-html-page-in-another-html-page-its-working-f?noredirect=1#comment29505892_19841446). – Evan Davis Nov 07 '13 at 16:42
  • 1
    dude i can see your link to wikipedia. I can also search for your wikipedia links. I am asking for some code snippet. Dont give me random links. – tech spartans Nov 07 '13 at 16:52
  • 1
    This isn't a _gimme teh codez_ site. In any case, you are trying to do AJAX without a webserver. You need to take a few steps back and approach this problem differently. – Evan Davis Nov 07 '13 at 16:56

3 Answers3

3

Are you working locally on your machine, without any webserver? Chrome does not allow loading files via AJAX from your file system (see bugreport).

You may use XAMPP or something similar to serve your files via a local webserver.

If you are on Windows, XAMPP is probably the easiest way to get your local webserver up and running: http://www.apachefriends.org/en/xampp.html

On Mac, you may also use MAMP http://www.mamp.info/en/index.html

You may also force Chrome to allow local file access on Windows if you are starting it with --allow-file-access-from-files, more information in this stackoverflow question

Community
  • 1
  • 1
Severin
  • 381
  • 1
  • 3
  • This should be a comment. – Evan Davis Nov 07 '13 at 16:43
  • 1
    ya I am working locally on my machine without any webserver. How to use xampp or some local webserver ?? – tech spartans Nov 07 '13 at 16:44
  • I've edited my answer with some more information about the issue and a link to XAMPP. More information about setting up a local webserver may be found [here](http://www.wikihow.com/Set-up-a-Personal-Web-Server-with-XAMPP) or by just googling 'set up local webserver'. – Severin Nov 07 '13 at 17:13
  • 1
    hi thanks. it worked on google chrome. i used --allow-file-access-from-files and its working fine now. Thanks a lot. – tech spartans Nov 07 '13 at 17:25
1

For what it's worth, I have code that uses jQuery().load() to inject content into a page, and it work just fine.

If this is static content that is meant to be a standard part of your page, then the other answers/comments saying to do it on the server are probably right; stuff like that is generally better to be included on the server, because it will make your site perform a lot better than doing it on page load via Javascript. (in fact, loading a static menu this way is likely to give your site a noticable performance problem when users load the page; be warned!).

However in general the technique of dynamically adding content to a page using Javascript is perfectly valid, and commonly used, so I'll answer the question based on that.

There's nothing that I can see that's specifically wrong with the minimal example you provided, except for a missing Doctype, so I'm going to guess that's probably your issue:

If you don't have a doctype, the browser will render the page in Quirks mode. And jQuery is not designed to work in quirks mode.

Solution: Add the following line to the top of your code and try it again:

<!DOCTYPE html>

You may also want to check that IE isn't showing your page in compatibility mode as well, because that might also cause problems. If it is, you could also add an X-UA-Compatible meta tag to your page's <head> section to force IE into standards mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Finally, if you need to support IE8 or earlier, you should switch from jQuery v2 back to the latest release of jQuery v1 (currently 1.10.2), as jQuery v2 does not work with IE8 and earlier.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 1
    Hi i made changes in my code as told by you. but still its not working in chrome and IE-10 – tech spartans Nov 07 '13 at 17:04
  • Are you getting any errors? Open the browser dev tools (press F12), and then reload the page. Check the console for error messages. Check the Network tool for info on any load errors. – Spudley Nov 07 '13 at 17:09
  • 2
    I think the issues is that this is _not running on a webserver._ – Evan Davis Nov 07 '13 at 17:11
  • 1
    hi i am getting these errors in chrome Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///D:/skyrdrive/SkyDrive/dooooo/temp/integrated%20menu/vertical-round-menu/index.html XMLHttpRequest cannot load file:///D:/skyrdrive/SkyDrive/dooooo/temp/integrated%20menu/vertical-round-menu/index.html. Origin null is not allowed by Access-Control-Allow-Origin. Whereas is case of IE-10 no error is shown in console – tech spartans Nov 07 '13 at 17:14
  • Ah yes... that'll be the problem then. You can't load files via ajax from the local computer. A `file:///` URL wil not work because the browser's access control system will prevent it. This is a security feature in the browser designed to stop sites from aribitrarily loading in files from your machine, but it does also prevent you from doing this kind of code without using a proper web server. – Spudley Nov 07 '13 at 17:24
  • hi used the answer posted above and its working now. Thanks a lot for your reply. – tech spartans Nov 07 '13 at 17:26
1

The issue you are having is not due to anything wrong with your code, but with security policies of modern browsers. Here's what happens on your development machine:

Your browser loads your local HTML file.

Your browser executes the javascript, which tries to access a file on your machine.

Your browser says, "NO!" Because this is a huge security error - without this policy websites could read through every file on your hard drive or silently send copies of any of your private information to their servers, just because you visited a site with javascript enabled. BAD!

There are some ways to try to tell your browser "No, it's ok, I want to allow this..."...but you know, this has become exceedingly difficult as it often silently breaks with new browser versions. I've slammed my head against the wall way too often, so I might suggest you skip trying to make your browser OK with what you are trying to do.

Now, why does this work on a live site? Here's what happens.

Your browser loads a website.

Your browser executes the javascript.

The script asks for a file to be loaded/accessed from a website.

Your browser says..."well, we're already on this website, so sure! Load all the files you want from that web server!" And your browser kindly gets the file, and returns it to your script, where you can painlessly include the HTML to your hearts content.

To make this work on your development machine, you have ultimately 3 choices:

1) Upload the files to a web server, then do your testing there.

2) Make your own "localhost" web server. You then access your site with something like localhost/index.html - etc. This is just enough to prevent the browser from shutting down your file load requests, because you are requesting an HTTP operation, note a FILE operation.

3) Try to force your browser to allow these requests. Details vary by browser, some browsers won't let you do this at all, and I've given up on doing this myself.

The hidden 4th choice is using HTML5 File System features, but with such poor support for technology I suggest you not even try it - the bug you are facing is purely with your development machine, so changing the technology you are using purely for a minor development convenience seems silly.

Severin provides links to the excellent XAMPP and MAMP software packages, which are the easiest way of getting yourself a good development localhost server.

BrianH
  • 2,140
  • 14
  • 20