Load a href into a div when pressing a link?

Question

I know this has been asked before and I tried to do what was suggested but I can't seem to get it working.

Basically I've got links like this:

<ul>
    <li class='current'><a href='portfolio/index.html'>portfolio</a></li>
    <li><a href='about/index.html'>about</a></li>
</ul>

And then I've got a div like this:

<div class='loaded_content'></div>

What I want to do is, load the page in the link href into the div as I press the link. I also want to prevent the browser from navigating the link the normal way.

This is the script I have, which is loaded in the html header along with the jquery base:

$(document).ready(function() {
    $('a').click(function(event){
        event.preventDefault();
        $('.loaded_content').load($(this).attr('href'));
        return false;
    });
});

What am I doing wrong?

edit:

Ok so I placed the script into the document.ready and the preventdefault is now working, but the href is still not getting loaded into the div.

edit:

Okay so I have got this working partially now. The html is now getting loaded properly into the div but I am now facing a new problem. The page I am loading is in a subdirectory along with its own .css file and some images. How can I make sure the css is being loaded aswell?

The reason I want to do this is because my pages on the website has the same structure on all pages, and I want to have like a frame website, where I only load the content of each page to keep from loading the same things over and over. Maybe there's another, better approach of this?

What is the problem ? What is happening when users click in a link? — Hilder Vitor Lima Pereira, Mar 25 '15 at 22:50
When I click the link (in Chrome), it just proceeds to the link href as it normally would. — , Mar 25 '15 at 22:52
Please, put an alert inside the onClick's function and tell us if this function is being called or not (if it alerts is displayed when you click in the link) — Hilder Vitor Lima Pereira, Mar 25 '15 at 22:54
@Hellsten, I'm not sure if you figured it out but just adding a link into a comment doesn't help anyone trying to help you. If you figured it out, add an edit to your question and then answer your own question and mark it as accepted please. — kel, Mar 25 '15 at 23:14

Mario A · Answer 1 · 2015-03-25T23:09:27.273

3

You can use event.preventDefault(); to prevent the default behaviour of the link:

$('a').click(function(event){
    event.preventDefault();
    $('.loaded_content').load($(this).attr('href'));
});

Ensure that this code is either wrapped in $(document).ready(); or put it at the bottom of your html, otherwise the click event can not be attached to the links, because they need to be processed first.

edited Mar 25 '15 at 23:09

answered Mar 25 '15 at 22:53

Mario A

3,286
1
17
22

This seem to do no difference for me. – Mar 25 '15 at 23:01
Then you have a different problem, here is a working jsfiddle: http://jsfiddle.net/8k2ppn5x/1/ – Mario A Mar 25 '15 at 23:04

Hilder Vitor Lima Pereira · Accepted Answer · 2018-11-06T07:53:42.347

3

I think the problem is that the function isn't being called.

It can happen if you try to bind function to some elements when these elements are not yet in the document. You said that this code is the header, so, I think it is the case.

There are at least two options:

First: Write your javascript code inside a document.ready function:

$(document).ready(function(){
   // your on click function here
   $('a').click(function(){
       $('.loaded_content').load($(this).attr('href'));
       return false;
   });
});

Second: Move your javascript code, writing it after the links.

edited Nov 06 '18 at 07:53

answered Mar 25 '15 at 23:05

Hilder Vitor Lima Pereira

1,648
13
20

I just tried this. So I put the script into a document ready and now I know the function is being called because it no longer navigates the link to the href. However, the href doesn't seem to get loaded into the div. – Mar 25 '15 at 23:09
The page is being redirected ? – Hilder Vitor Lima Pereira Mar 25 '15 at 23:10
No no, the preventdefault is working, but the href page isn't getting loaded into the .loaded_content div. – Mar 25 '15 at 23:12
XMLHttpRequest cannot load file:///E:/Coding/HTML/portfolio/index.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.jquery_1.8.3.js -What does this mean though? – Mar 25 '15 at 23:15
Does this help? http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file – Hilder Vitor Lima Pereira Mar 25 '15 at 23:20
It does seem to help, but it looks like the css and images isn't getting loaded. The pages I'm trying to load are in subdirectories of this main page, and they have their own css and image files. – Mar 25 '15 at 23:31
@Hellsten it seems like path problems. You must check what directory is being used as current directory in the relative paths. Maybe, the main page's directory is the one being used and the relative paths from it is not right. – Hilder Vitor Lima Pereira Mar 26 '15 at 00:09
CORS Policies are blocking the URLs ... it's very annoying! – Tormy Van Cool Oct 31 '18 at 10:53

score 2 · Answer 3 · answered Mar 25 '15 at 22:53

2

Try preventdefault ()

$('a').click(function(e){
e.preventDefault ();
    $('.loaded_content').load($(this).attr('href'));
    return false;
});

answered Mar 25 '15 at 22:53

Mark

4,773
8
53
91

This doesn't make any difference for me. – Mar 25 '15 at 23:01
Post a fiddle So we can see what is going on. – Mark Mar 25 '15 at 23:04

score 1 · Answer 4 · answered Apr 12 '17 at 07:42

1

$(document).on('click', 'a', function(e){
    e.preventDefault();
    $('.loaded_content').load($(this).attr('href'));
});

http://api.jquery.com/load/

answered Apr 12 '17 at 07:42

TheAivis

181
1
4

score 0 · Answer 5 · answered Mar 25 '15 at 22:52

0

change link to this

<a href='javasctipy:;' data-link='portfolio/index.html'>portfolio</a>

and then

$('a').click(function(){
  document.getElementById("loaded_content").innerHTML='<object type="text/html" data="'+$(this).attr('data-link')+'" ></object>';
});

answered Mar 25 '15 at 22:52

miszczu

1,179
4
19
39

not very good for SEO or accessibility (screen readers ) creating href like that – charlietfl Mar 26 '15 at 00:05

score 0 · Answer 6 · edited Mar 13 '16 at 08:14

0

Add the jQuery library to the doc. Based on the fiddle, u have missed that.

edited Mar 13 '16 at 08:14

marc_s

732,580
175
1,330
1,459

answered Mar 25 '15 at 23:16

Mark

4,773
8
53
91

score 0 · Answer 7 · answered Mar 25 '15 at 23:27

0

Open the file via your web server, eg

http://localhost/someFile.html

Chrome doesn't allow AJAX requests for 'file:///' URLs by default. Use the path with http://localhost/

answered Mar 25 '15 at 23:27

Saagar Elias Jacky

2,684
2
14
28

Load a href into a div when pressing a link?

7 Answers7