To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.

What I'm trying to do: I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.

My HTML part with the navigation menu:

<ul id="nav_main">
    <li class="navLink">link here</li>
</ul>

The div that is supposed to change dynamically (on click) is labeled as this:

<div id="main_content">
    <p></p>
</div>

The other .html file that I pull data from has a div that looks like this:

<div id="one">blahbalhblahblahlbhalbhlah</div>

The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:

$(document).ready(function(){
    $("#nav_main li").on("click", function() {
        // here was my first attempt:
        $("#main_content p").load("contentholder.html #one");

        // my second attempt, using get():
        $.get("contentholder.html", function(data) {
            $("#main_content p").html(data)
        });
});

My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.

All these files are on my local drive. Any help would be greatly appreciated

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.

What I'm trying to do: I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.

My HTML part with the navigation menu:

<ul id="nav_main">
    <li class="navLink">link here</li>
</ul>

The div that is supposed to change dynamically (on click) is labeled as this:

<div id="main_content">
    <p></p>
</div>

The other .html file that I pull data from has a div that looks like this:

<div id="one">blahbalhblahblahlbhalbhlah</div>

The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:

$(document).ready(function(){
    $("#nav_main li").on("click", function() {
        // here was my first attempt:
        $("#main_content p").load("contentholder.html #one");

        // my second attempt, using get():
        $.get("contentholder.html", function(data) {
            $("#main_content p").html(data)
        });
});

My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.

All these files are on my local drive. Any help would be greatly appreciated

• javascript
• jquery
• html

• 1 Use Firefox's firebug or Fiddler to watch for the calls and see the responses. This will let you know if it is going out to the server and what the server response is. Is contentholder.html in the same directory level as the page calling it? Do you get any JS errors that would prevent the event? – scrappedcola Commented Mar 12, 2013 at 19:28

2 Answers 2

$(document).ready(function(){
     // your code here
});

You are missing the function(){

In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.

See more info here: Get HTML code of a local HTML file in Javascript