Load page fragments with jQuery

Question

So I have a menu:

<nav id="side-nav">
<ul>
<li><a href="consulting">Consulting</a></li>
etc..

jQuery reads

$(document).ready(function() {
  $( "#side-nav ul li a" ).on( "click",function() {
   $('#services-content').load('side-menu.html #' + $(this).attr('href'));
    return false;
  });
});

and have an html file with corresponding id's to the href. It does not load. Thought i followed exactly as per jquery website. Whats wrong ?

Even if I have it hard coded, nothing is loaded :

<div id="services-content">

</div><!--load services content in here-->

<script type="text/javascript">
   $(document).ready(function() {
     $('#services-content').load('side-menu.html #consulting');
   });
</script>

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

Read Local files doesn't load with Ajax in Chrome but Work on Firefox

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

edited May 23 '17 at 10:31

Community

1
1

answered Nov 10 '13 at 02:51

Tushar Gupta - curioustushar

58,085
24
103
107

Nop, there has to be a space – chucky Nov 10 '13 at 02:56
@chucky you are correct you need that space.But why u use return false ? – Tushar Gupta - curioustushar Nov 10 '13 at 02:59
Does it matter ? I just followed the example on [jquery](http://api.jquery.com/load/) – chucky Nov 10 '13 at 03:00
@chucky try running code without return false.and Check console for errors . – Tushar Gupta - curioustushar Nov 10 '13 at 03:01
It attempts to open a URL- ie: 'consulting'. Does the side-menu file have to be in specific format? – chucky Nov 10 '13 at 03:09
@chucky just html which contains element with id `consulting` as you are calling that element in `.load()` .Is your site live ? – Tushar Gupta - curioustushar Nov 10 '13 at 03:10
Nope its not live. Does it even have to be an href why not `a id="consulting"` – chucky Nov 10 '13 at 03:23
@chucky It's up to you .if you use than use `load('side-menu.html #' + $(this).attr('id'));` or `load('side-menu.html #' + this.id);`.But better is if you use ` – Tushar Gupta - curioustushar Nov 10 '13 at 03:25
@chucky check console for error and are you including jQuery library ? – Tushar Gupta - curioustushar Nov 10 '13 at 13:19
Yes its included. console- 'XMLHttpRequest cannot load file:///C:/IBC/side-menu.html.' – chucky Nov 10 '13 at 13:28
Works in firefox, i think i solved it. Tested only with Chrome, I think it does not like the file to be in a local directory. Probably wants it to be on a server... – chucky Nov 10 '13 at 13:41
Thanks for help, i spotted it same time :) – chucky Nov 10 '13 at 13:42

score 0 · Answer 2 · answered Nov 10 '13 at 03:05

Looks like a scope problem. I didn't test this, so don't shoot me.

$(document).ready(function() {
  $( "#side-nav ul li a" ).on( "click",function(e) {
    e.preventDefault();

    var $this = $(this);
    $('#services-content').load('side-menu.html#' + $this.attr('href'));
  });
});

Load page fragments with jQuery

2 Answers2