Loading Page Content Onclick - AJAX

Question

I'm hoping someone might be able to help me move through an issue relating to loading content into a jQuery accordion onclick. Currently the accordion functionality is working and content is being loaded by AJAX, the issue is that I only want to load the content when the user clicks the specific accordion leaf rather than loading all content when the page loads.

HTML:

<div class="accordionButton">Origin</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_origin"></div>
    <div id="error_origin"></div>
    <script>
        $("#success_origin").load("content_origin.html", function(response, status, xhr) {
            if (status == "error_origin") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

<div class="accordionButton">Style</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_style"></div>
    <div id="error_style"></div>
    <script>
        $("#success_style").load("content_style.html", function(response, status, xhr) {
            if (status == "error_style") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_style").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

And so on...

Accordion JavaScript:

$(document).ready(function() { 
    $('.close').click(function() {
        $('.close').addClass('hide');
        $('.accordionContent').slideUp('normal');
        $('.accordionButton').addClass('on');
        $('.accordionButton').removeClass('off');
        $('.showHeadline').slideDown('normal');     
    });

    $('.accordionButton').click(function() {
        $('.accordionButton').removeClass('on');
        $('.accordionButton').addClass('off');
        $('.showHeadline').slideUp('normal');
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {
            $('.close').addClass('show');
            $(this).addClass('on');
            $(this).next().slideDown('normal');
             } 
         });

    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');

    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    $('.accordionContent').hide();
});

I'm sure it's something simple but I'd very much appreciate any help.

Thanks, @rrfive

Answer 1

You're loading the data inline with <script> tags — this will always cause your content to be loaded as soon as the page sees those tags. You probably want to load the content in the click handler, however this can cause issues with the animation.

Also, you should double-check your load callbacks. The status returned by the AJAX request will never equal error_origin or error_style. It should be a 'string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror")'. http://api.jquery.com/jQuery.ajax/

Answer 2

I'm not sure if this is what you are asking for, but if you are looking to load content_origin.html when they click the accordion button origin then you can just wrap your AJAX call with a jquery click handler and give each button an id e.g.

<script>
    $("#origin-button").click(function() {
         $("#success_origin").load("content_origin.html", function(response, status, xhr) {
              if (status == "error_origin") {
                  var msg = "Sorry but there was an error when loading the page's content: ";
                  $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
              }
          });
    });
</script>