Load content from external html file

Question

Im trying to load html pages that exists locally on the server in a folder called HTML-FIles.

I want to use jquery to load one file and present its content in a div.

As it is now, I can load the file, but in the div a link is created that leads to the files content. I dont want it as a link, I want the content immediatly.

Here is the script:

function loadAllPosts() {
    $(document).ready(function () {
        var dir = "../HTML-Files";
        var date = "2014-10-16";

        $.get(dir, function (data) {
            $(data).find("a:contains(" + date + ")").each(
                function () {
                    var post = this;
                    $("#content").append($(post));
                });
        });
    });
}

Answer 1

You may use .load()

To load data in a div, use the following:

       $(document).ready(function(){
   $("#content").load("YOUR FILE NAME");  //put your file name there in the bracket
});

Answer 2

If you want to load data on click try this.

$(document).ready(function () {
    $("div").live('click', function () {
        var data_id = $(this).data("id");
        $('#container').load("external.html?" + data_id,myCallback);
    });
});