0

I'm currently using .append() to add a div to page. However, I was hoping to be able to be a bit more streamlined and load the div in from completely separate HTML file rather that hold div and content within the JS file.

Here's what I have currently:

jQuery:

$('.addNewContent').click(function() {
$( '#content' ).append( "new content" );
return false;
});

I've seen there's already been a question that's related, however no inclination as to how it's implemented - Load HTML File Contents to Div [without the use of iframes]

I was wondering if anybody had any ideas? Any help would be greatly appreciated!

Community
  • 1
  • 1
abbas_arezoo
  • 1,038
  • 3
  • 20
  • 38
  • 1
    Take a look at jQuery's `.load()` function. – Bram Vanroy Sep 26 '13 at 19:36
  • As a sidenote, ajax is great, but loading another HTML file can make your site more "streamlined", or it can screw it up royally, depends on what you're doing ! – adeneo Sep 26 '13 at 19:45
  • It's to basically to not make the .js file bloated. It's not overly technical what I'm trying to achieve - just a bit beyond my skillset :) – abbas_arezoo Sep 26 '13 at 19:49

3 Answers3

0

You probably need the load function:

$('.addNewContent').click(function(e) {
    $( "#content" ).load( "ajax/test.html #container" );
    e.preventDefault();
});

Note that it may take a while to load the actual content; Also it will replace contents within #content, but you may create another element inside, and load contents to it instead:

$("<div></div>").appendTo("content").load( "ajax/test.html #container" );
Adam Zielinski
  • 2,774
  • 1
  • 25
  • 36
0

Assuming the html file is on the same server...

$(".addNewContent").click(function() {
    $("#content").load("other-page.html #containerID");
    return false;
});

That will load the other html page and put the contents of #containerID into #content.

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
0

You can use the .get() function:

$('.addNewContent').click(function() {
    $.get("/path/to/file", function(data) {   
       $("#content").append(data);
    });
    return false;
});
Terry
  • 63,248
  • 15
  • 96
  • 118