CODEWITHSUNDEEP
jquery
mheavers
mheavers

Reputation: 30158

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="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!

Upvotes: 0

Views: 201

Answers (1)

rcravens
rcravens

Reputation: 8390

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

Upvotes: 1

Related Questions