How to load two divs into separate targets with JQuery?

Question

Hi all,

I'm trying to achieve two things, both of which I fail to get at. On a server are a series of notes; all contain a div (id=ajxContent). Some notes also contain an additiona div (id=ajxHead). The ajxContent itself contains links (class=clicking) to call the next installment, hence the link destination in a variable.

This is my code:

$(document).ready(function(){
$( 'a.clicking' ).live('click', function(e){
    e.preventDefault();
    var theLink = $(this).attr('href');
    $('#loadText').load(theLink + '#ajxContent');
    $('h1').load(theLink + '#ajxHead');
});
})

Where it fails:

1) the ajxContent gets loaded into the h1 tag as well as in its intended target. 2) when I had set up the code differently, if there was no div id=ajxHead present in a note, the load would nevertheless erase the existing value in the h1 tag.

Am I on a totally wrong track here, with two load statements? Input is very welcome, thanks.

Answer 1

You need a space in there to get the a portion of the content, see the .load() docs for details:

$(document).ready(function(){
  $( 'a.clicking' ).live('click', function(e){
    e.preventDefault();
    var theLink = $(this).attr('href');
    $('#loadText').load(theLink + ' #ajxContent');
    $('h1').load(theLink + ' #ajxHead');
  });
});

Updated - Fix for your specific page:

$( 'a.clicking' ).live('click', function(e){
  e.preventDefault();
  $.get($(this).attr('href'), function(resp) {
       $('#loadText').html($(resp).filter('#ajxContent').html()); 
       var head = $(resp).filter('#ajxHead');
       if(head.length) $('h1').html(head.html());
  });
});

Because your elements are all root elements, which I just haven't come across, $(selector, context) doesn't work, since it does this internally: context.find(selector) In your case they aren't children of a root response element, they're all siblings at the root, do alert($(resp).length) to see this.

Anyway, the above code will do what you're after, tested here in Chrome and Firefox, looks good and only requesting the page once.