how do I target a specific id with ajax?

Question

I'm trying ajax (and to a degree a lot of js) for the first time so I'm not sure what I'm doing wrong.

The goal is that a series of thumbnails in a sidebar will change the content of a centrally located div when selected. The link currently looks like this:

<img src="images/thumbs/elon-scissors-logo.jpg" onclick="reloadMiddleWith('about','about','test')"/>

When clicked it runs the below function and changes the background and calls a php source.

function reloadMiddleWith(theme, page, content) {
  var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
  $('#live-area').addClass(theme);
  $.ajax({
      url: new_url,
      dataType: 'html'
 })
  .done(function(data) {
      // Assuming the request returns HTML, replace content
      $('#area-loader').html(data);
 });

}

I tested that and it worked fine when it was just the background and the new php page, but rather than making 50 pages to call in (and not even trying arrays or databases at the moment for lack of proper understanding) I thought I would just make 1 or 2 new page that repeat the same container style and just call the one I want to display by id tag. Currently when I try it, it just changes the background but does not change the php content.

Answer 1

The jQuery itself has a handy function jQuery(...).load , using it jQuery would handle all the necessary points:

function reloadMiddleWith(theme, page, content) {
    var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
    $('#live-area').addClass(theme);
    jQuery("#area-loader").load(new_url);
}

for more information check documentation page out.