[英]Ajax call loads the current content
I have looked through so many forums racking my brain to try and get this super simple load function working. 我已经浏览了很多论坛,不遗余力地尝试使此超级简单的加载功能起作用。 I've narrowed it down to what I believe is a selector issue on the
.fadeIn()
part of the loadContent
function. 我将其范围缩小到在
loadContent
函数的.fadeIn()
部分上我认为是选择器的问题。
I can see why it keeps loading the same stuff, as it uses the same selector, but based on the tutorial I've been trying to use ( http://css-tricks.com/rethinking-dynamic-page-replacing-content/ ) as well as the other (even MORE broken) method that I DID get to work (based on this: http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26 ), it seems like it should work! 我可以看到为什么它会继续加载相同的内容,因为它使用相同的选择器,但是基于我一直尝试使用的教程( http://css-tricks.com/rethinking-dynamic-page-replacing-content / ),以及我DID开始使用的其他方法(甚至更坏了)(基于此方法: http : //code.tutsplus.com/tutorials/how-to-load-in-and-animate-content- with-jquery--net-26 ),看来应该可以使用!
I've tried using $(href)
as a selector, but then it just fades the old content and doesn't load anything. 我试过使用
$(href)
作为选择器,但是它只是淡化了旧内容并且不加载任何内容。 I also tried adding an alert to see what href was, and it returned the correct html page followed by the correct element id (Articles/Cats.html #content). 我还尝试添加警报以查看href是什么,它返回了正确的html页面,然后返回了正确的元素ID(Articles / Cats.html #content)。
Here's the function itself, and if you need more info, I'd be glad to give it! 这是函数本身,如果您需要更多信息,我很乐意提供! Any help would be incredibly, well, helpful!
任何帮助都是难以置信的,很好,很有帮助!
function articleClickLoad () {
if (Modernizr.history) {
var newHash = "",
$Content = $("#content"),
$el;
$("#content").on("click", "a", function() {
var _link = $(this).attr("href");
var toLoad = $(this).attr('href')+' #content';
history.pushState(null, null, _link);
loadContent(toLoad);
return false;
});
function loadContent(href){
$Content.find("#content");
$Content.fadeOut(1000, function() {
$("main").load(href,'', function() {
$Content.fadeIn(1000);
});
});
}
$(window).bind('popstate', function(){
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(toLoad);
});
}
}
articleClickLoad();
Thanks! 谢谢!
I see two potential issues. 我看到两个潜在的问题。
.load
takes a URL
but you're adding
' #content'
in your click handler for some reason;
.load
带有一个URL,
但是由于某种原因您要在点击处理程序中添加
' #content'
;
it should be removed
Update: I overlooked that passing a page fragment is perfectly valid, forget about that.
应该将其删除
更新:我忽略了传递页面片段是完全有效的,忘了这一点。
In your loadContent
method, you're calling load
on a selector $("main")
. 在
loadContent
方法中,要在选择器$("main")
上调用load
。 It is not clear from your source what main
could be but I suppose it should be #content
instead. 从您的来源尚不清楚
main
是什么,但我想应该改为#content
。
Also note that you can remove the second parameter ''
from the .load
call. 另请注意,您可以从
.load
调用中删除第二个参数''
。 See .load documentation . 请参阅.load文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.