Why can't I load new content into a div?

Question

I want to have a list of links in one div that load content into a second div. I've read up all that I can find on the matter..and it doesn't seem to work. Here's what I have:

<div id="scentwrap" align="center">
        <div id="sounds"><h2>Sounds like you need to celebrate!</h2><div>
        <div id="myList">
            <div id="listtit">
                <br>Try more recipes below!
            </div>
            <div id="list">
                <ul>
                    <li> <a href="scent2.html">Soothing Blend</a></li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li>
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                </ul>
            </div>
        </div>
        <div id="currentscent">
            <div id="recipe"> 

                <h4>- Celebration Blend -</h4>
                <ul>
                    <li>Diced Ginger </li>
                    <li>Grapefruit Peels </li>
                    <li>Frankincese Oil </li>       
                </ul>
                <p>
                 Lorem ipsum lorem dadsum doodsum lercem vi can ojr <br> ig thn sas vbg 
                 Lorem ipsum lorem dadsum doodsum<br> lercem vi can ojr ig thn sas vbg 
                </p>
            </div>
            <div id="rec">
                <img src="recimg.jpg"/>
            </div>
        </div>
    </div>

Javascript:

$(function() {
$('a[href=scent2.html]').click(function() {
    $('#recipe').load('scent2.html');
   return false;
});

Any help is really appreciated!

What does "doesn't seem to work" mean? What's happening and are you getting any errors? — j08691, Apr 02 '13 at 18:51
Sorry, I should have explained that. The Link takes me straight to the html page, rather than load the content in the div — Gantrof, Apr 02 '13 at 18:54
Is this a repeat? http://stackoverflow.com/questions/4101770/load-content-of-a-div-on-another-page — mconlin, Apr 02 '13 at 18:51
Have you looked at the debug console for errors, or to see that the request is successful? — j08691, Apr 02 '13 at 18:55
When I load the page, the JS console says, "Uncaught SyntaxError: Unexpected end of input ". When I click the link, I'm taken directly to the html page rather than loading the content in a div. — Gantrof, Apr 02 '13 at 18:59
Not sure if it's a typo or not, but your JS is missing an ending `});`. — j08691, Apr 02 '13 at 19:01
Thanks for pointing that out. Sadly, the anchor still takes me directly to the html. Thanks for all the help though. — Gantrof, Apr 02 '13 at 19:06

score 1 · Answer 1 · edited Jun 13 '13 at 03:35

1

You are not closing off the jQuery document ready event. The code should look like this:

   $(function() {
     $('a[href="scent2.html"]').click(function() {
       $('#recipe').load('scent2.html'); 
       return false;
     });
   });

edited Jun 13 '13 at 03:35

Leigh

28,765
10
55
103

answered Apr 02 '13 at 18:59

Robert Owen

930
7
12

Thanks. I tried this, and I get the error: Uncaught Error: Syntax error, unrecognized expression: a[hrscent2.html] – Gantrof Apr 02 '13 at 19:03
I've upadated the code to include the href in quotes `a[href="scent2.html"]` – Robert Owen Apr 02 '13 at 19:07

pollirrata · Answer 2 · 2013-04-02T19:07:12.347

0

Try checking if there's an error loading the file

<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

Edit

Be sure that your call complies the Same Origin policy. From Jquery doc site

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

So trying the load using file:// protocol will throw an error if your site is being loaded using http or https, etc.

edited Apr 02 '13 at 19:07

answered Apr 02 '13 at 18:53

pollirrata

5,188
2
32
50

I got this.."XMLHttpRequest cannot load file:///Volumes/NO%20NAME/DESIGNSITE/scent2.html. Origin null is not allowed by Access-Control-Allow-Origin." – Gantrof Apr 02 '13 at 19:01
@kayz1 Yes it's Google Chrome, but ti doesn't seem to work in Firefox or Safari either. – Gantrof Apr 02 '13 at 19:10
@pollirrata Sorry, I don't know what the is. I'm very new to Javascript. – Gantrof Apr 02 '13 at 19:11

Why can't I load new content into a div?

2 Answers2