jquery ajax load function not loading content

I'm trying to figure out what I'm doing wrong here - if I access the URL I'm trying to load with jquery directly, the content loads fine. But when I use jquery, nothing loads in, despite the fact that the console reports a successful load. This is my code:

<div id="bio_switcher">
    <a href="[removed]void(0);" class="alix active" data-ident="alix_lambert">Alix Lambert</a>
    <a href="[removed]void(0);" class="david" data-ident="david_mcmahon">David McMahon</a>
</div>

<div id="bio_container">

</div>


$('#bio_switcher a').click(function(){
    $('#bio_container').load('/index.php/ajax/bios/2',showContent);
});

INDEX.PHP/AJAX/BIOS/2 :

{exp:channel:entries channel="开发者_JAVA百科bios" limit="1" {if segment_3 !=""} url_title="{segment_3}"{/if}}
<div id="bio_content">
    {bio_content}
</div>
<div id="bio_photo">
    <img src="{bio_photo}" alt="{title}" />
</div>
{/exp:channel:entries}

Any ideas would be appreciated. Thanks!

Two thoughts:

1. Ensure the anchor is not causing the browser to fetch a new page and thus just reloading the page with no content. The best way to do this is not to return false, but to use preventDefault right at the top.

   $('#id').click(function(evt){
   
       evt.preventDefault();
   
       //do the other stuff
   });
   

2. If this doesn't fix the issue, start simplifying the problem. Remove the call back in the load function. Simplify the content being loaded (remove the templating stuff).

Hope this helps.

Bob