ページのコンテンツを読み込むOnclick - AJAX

Question

私は、誰かがjQueryのアコーディオンonclickにコンテンツをロードすることに関する問題を解決するのを手伝ってくれることを願っています。現在、アコーディオン機能が動作していてAJAXによってコンテンツがロードされていますが、ページが読み込まれたときにすべてのコンテンツをロードするのではなく、特定のアコーディオンリーフをユーザーがクリックしたときにのみコンテンツをロードします。

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> 

のように...

アコーディオンの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(); 
}); 

私はそれは単純なものだと確信していますが、私は非常に任意の助けをいただければと思います。

おかげで、 @rrfive

Answer 1

私はこれがあなたが求めているものであるかどうかわからないんだけど、あなたは彼らがアコーディオンボタン原点をクリックしたときにcontent_origin.htmlロードするために探しているならば、あなたは自分をラップすることができますjQueryのクリックハンドラを使ってAJAXを呼び出し、各ボタンにIDを与える

<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> 

Answer 2

あなたは、これは常にあなたのコンテンツは、すぐにページがこれらのタグを見ているようにロードされるようになります<script>タグ—でデータをインラインで読み込んでいます。 clickハンドラ内のコンテンツを読み込みたいと思うかもしれませんが、これはアニメーションに問題を引き起こす可能性があります。

さらに、loadコールバックを再度確認する必要があります。 AJAXリクエストによって返されたstatusは、error_originまたはerror_styleと決して等しくありません。これは、リクエストのステータス（「成功」、「変更されていない」、「エラー」、「タイムアウト」、「中止」、または「パースエラー」）を分類する文字列でなければなりません。 http://api.jquery.com/jQuery.ajax/