6

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

1
  • 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? Commented Mar 12, 2013 at 19:28

2 Answers 2

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

You are missing the function(){

1
  • Sorry, I should have added it in. I actually do have a function attached to it, just forgot to put it in my post. It still doesn't work :(
    – Isaiah Lee
    Commented Mar 12, 2013 at 19:37
1

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

2
  • oh i see. I feel pretty stupid now lol. Thanks a bunch, I will get that going and try it out!
    – Isaiah Lee
    Commented Mar 12, 2013 at 19:43
  • So I installed XAMP, I have all the files loaded into the same folder inside localhost, and it's still not working :( I can't even get the .html() to change, even if i'm not trying to pull content from a different file. For example, I tried writing $("#main_content p").html("why is this not working?"); and it doesn't work. It changes for a brief second right as you click the link, then changes back to nothing
    – Isaiah Lee
    Commented Mar 12, 2013 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.