[英]Loading Page Content Onclick - AJAX
I'm hoping someone might be able to help me move through an issue relating to loading content into a jQuery accordion onclick. 我希望有人能够帮助我解决与将内容加载到jQuery手风琴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.
当前手风琴功能正在运行,并且AJAX正在加载内容,问题是我只想在用户单击特定的手风琴叶子时加载内容,而不是在页面加载时加载所有内容。
HTML: 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: 手风琴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 谢谢@rrfive
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 eg 我不确定这是否是您要的,但是如果您希望在他们单击手风琴按钮源时加载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>
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. 您正在使用
<script>
标记内联加载数据-这总是会导致页面一看到这些标记就立即加载您的内容。 You probably want to load the content in the click
handler, however this can cause issues with the animation. 您可能希望将内容加载到
click
处理程序中,但这可能会导致动画出现问题。
Also, you should double-check your load
callbacks. 另外,您应该仔细检查您的
load
回调。 The status
returned by the AJAX request will never equal error_origin
or error_style
. AJAX请求返回的
status
永远不会等于error_origin
或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/
http://api.jquery.com/jQuery.ajax/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.