Question

I want to make a few divs on the same page work similar to iframes. Each will load a URL which contains links. When you click on those links I want an AJAX request to go out and replace the div’s html with new html from the page of the clicked link. It will be very similar to surfing a page inside an iframe.

Here is my code to initially load the divs (this code works):

onload:

$.ajax({
  url: "http://www.foo.com/videos.php",
  cache: false,
  success: function(html){
    $("#HowToVideos").replaceWith(html);
  }
});
$.ajax({
  url: "http://www.foo.com/projects.php",
  cache: false,
  success: function(html){
    $("#HowToProjects").replaceWith(html);
  }
});

This is a sample of code that I’m not quite sure how to implement but explains the concept. Could I get some help with some selectors(surround in ?’s) and or let me know what is the correct way of doing this? I also want to display a loading icon, which I need to know where the right place to place the function is.

$(".ajaxarea a").click(function(){
        var linksURL = this.href; // 
        var ParentingAjaxArea = $(this).closest(".ajaxarea");;
        $.ajax({
      url: linksURL,
      cache: false,
      success: function(html){
        $(ParentingAjaxArea).replaceWith(html);
      }
    });
    return false;
});

$(".ajaxarea").ajaxStart(function(){
    // show loading icon
});

Answer 1

Figured it out! The problem was I was using the function “.replacewith()” which was removing my AJAXed div(class=”ajaxarea”) entirely instead of replacing the content. The proper function to use here was “.html()”.

Here is my working code to make an AJAXed div work like an iframe:

//onload to initialize the div
$.ajax({
  url: "http://www.foo.com/projects.php",
  cache: false,
  success: function(html){
    $('#HowToProjects').html(html);
  }
});

$(".ajaxarea a").live('click',function(e){ // must use live instead of .click()
  e.preventDefault();
  var URL = $(this).attr('href');
  var parentFrame = $(this).closest(".ajaxarea");
  $.ajax({
    url: URL,
    cache: false,
    success: function(html){
      parentFrame.html(html);
    }
  });
});