Help me make a jquery AJAXed divs' links work like an iframe

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

Assuming you want to listen to click events for all anchor tags inside all elements with class ajaxarea, then your selector works fine:

$(".ajaxarea a").click(function(){ .. });

And this line of code, while not a selector (you're just accessing a property on the DOM element that was clicked), should work fine as well:

var linksUrl = this.href;

As for ParentingAjaxArea, you'll need to use $(this).closest() with a selector to determine which parent you want, but it's hard to give a specific example without knowing your HTML structure. It looks like you want ParentingAjaxArea to be either the element with id #HowToProjects or #HowToVideos, so you could write:

var ParentingAjaxArea = $(this).closest("#HowToProjects, #HowToVideos");

As for the loading dialog, I think this answer explains a good method (using ajaxStart and ajaxStop).

Edit: I also noticed you're using the click event--If you plan on being able to attach event handlers to links that will be inserted into the DOM via AJAX later, look at delegate or live.

Answer 2

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

• * - added preventDefault to prevent click action (see e in function's arguments)
• ** - instead of closest, i used parent – like it more for it's descriptive qualities
• *** - the var containing parent AJAX frame should be jQuery object, no need to wrap it in $(..)

This should work fine, but beware, it's untested.

edit:

You probably need a live (okay, I'm sure you need it). what click() does it's that it adds to all elements at the time in DOM an onClick event. What live() does, it's that it waits for any change in DOM and runs used selector (.ajaxarea a) again and if it fits for any of new elements, it adds the action. In pseudocode, it does basically this:

DOM.hasChanged{
  $('selector').click(..)
}

Answer 3

I used this example for my own web page:

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

It works quite well and uses hash tags and jQuery.history.js for the history of your browser. It works very nice, because you can let something like a media player just continue playing. Take a look at my own site elsewise, where you can find the javascript file: ajaxpages.js. I haven't used live(), but maybe I should.

Answer 4

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);
    }
  });
});