加載頁面內容Onclick - AJAX

我希望有人能夠幫助我解決與將內容加載到jQuery手風琴onclick有關的問題。目前手風琴功能正在運行，內容正在由AJAX加載，問題是我只想在用戶點擊特定的手風琴葉時加載內容，而不是在加載頁面時加載所有內容。加載頁面內容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

來源

2012-02-20 rrfive

我不知道這是否是你所要求的東西，但如果你正在尋找，當他們點擊手風琴按鈕原點加載content_origin.html那麼你可以換你AJAX調用與jQuery點擊處理程序，並給每個按鈕一個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>

來源

2012-02-20 22:54:11 christophmccann

你加載數據內嵌<script>標籤—這將始終會導致一旦頁面看到這些標籤加載您的內容。您可能想要加載click處理程序中的內容，但這可能會導致動畫問題。

此外，您應該仔細檢查您的load回調。由AJAX請求返回的status將永遠不會等於error_origin或error_style。它應該是一個'字符串分類請求的狀態（「成功」，「未修改」，「錯誤」，「超時」，「中止」或「parsererror」）。 http://api.jquery.com/jQuery.ajax/

來源

2012-02-20 22:56:02

加載頁面內容Onclick - AJAX

回答

相關問題