Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing div content via jquery with another html file's content

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

like image 419
Isaiah Lee Avatar asked Mar 12 '13 19:03

Isaiah Lee


2 Answers

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

You are missing the function(){

like image 85
Brad M Avatar answered Sep 23 '22 03:09

Brad M


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

like image 38
zakangelle Avatar answered Sep 20 '22 03:09

zakangelle