Jquery to load content into div

Question

Hey there, I would like to load an html page into a div using

$(document).ready(function() {
    $("#popupContent").load("aeffect.html");

    //Close property
$("a.close").click(function(){
  $("#popupContainer").empty();

  });
});

My html from the calling page is:

<div id="popupContent"></div>

What I would like to do, is when aeffect.html is loaded into the div, that it also writes the code from aeffect.html into the body of the calling page so that the end resulton the calling page would read as follows:

<div id="popupContent">
    <div class="projectPopup" id="aeffect">
    <a class="close">Close &times;</a>
    <img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
    <p class="description">Description</p></div>
</div>

My problem is resulting because I am trying to make aeffect.html disappear once the user hits close. I figured I could just have it empty the DIV, but there is nothing to empty…

Answer 1

(You're missing a closing div, I think, on #aeffect.)

$('#popupContent').load('page.htm #aeffect')

The first selector is the target container. The load method takes the page followed by the selector within that page that you want.

I'm not sure about loading pages from other sites though.

Let me know if that works for you. Scott

Check out the jQuery documentation for fine tuning. You can pass parameters to the page if it is a post and you can use a callback to populate the div for a smoother experience.