Ajax不与jQuery Flip一起工作！插入 [英] Ajax not working with jquery Flip! plugin
问题描述
我正在尝试使用FLIP！插件并让它的内容由ajax加载。但我遇到了一个问题。这只是不工作。
我可以看到postb发生在firebug中，但是当我填充FLIP中的content参数时没有任何变化！插入。
以下是我的代码，可以更好地解释事情。
< script type =text / javascript>
$ b $ function getFlipContent（url，command，target）{
$ .post（url，{data：command}，function（response）{
console.log（response ）;
// return response; //这是行不通的
replaceHtml（target，response）; //解决方法，但有点不是
}）;
函数replaceHtml（object，html）{
$（object）.html（）;
$（object）.html（html）;
$ b $（函数（）{
$（。flipable2）。bind（click，function（）{
var url = $（this）.data（url）;
var command = $（this）.data（command）;
var target = $（this）.data（target ）;
// alert（flip）;
if（target === undefined）{
flip =self;
}
if（target == self）{
$（$（this））。flip（{
direction：'lr'，
color：'#ffffff'，
content：function（） {
getFlipContent（url，command，target）;
}
}）;
return false;
}
else {
$（目标）.flip（{
方向：'lr'，
color：'#ffffff'，
content：function（）{
getFlipContent（url，command，target）;
}
}）;
返回false;
}
}）;
}）;
< / script>
< body>
< div id =header>
< table width =100％cellpadding =0pxborder =0pxcellspacing =0px>
< tr>
< td>< a href =＃class =flipable2 boxdata-target =＃pagedata-url =test.phpdata-command =test> FLIP< / A>< / TD>
< / tr>
< / table>
< / div>
< div id =pageclass =box>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH< / td>
< / div>
现在我正在使用replachtml函数来手动重写目标I的内容只是翻转。这种类型的作品，但打破了动画，所以我真的宁愿使用插件的内容参数......当我这样做，但它只是没有做任何事情。动画完成但没有内容更改。我想也许我错过了一些东西。任何帮助将受到欢迎。
以下是一个jsfiddle： http://jsfiddle.net/mUhuN/9/ ，但我不确定如何伪造ajax请求。
无论如何请帮助:)
< （
方向：'tb'，
onBefore：function（）{
console.log（
$） '）;
}，
onAnimation：function（）{
console.log（'在动画中间'）;
}，
onEnd：function（）{
console.log（'when the animation has been ended'）;
}
}）
I'm trying to use the FLIP! plugin and have it's content loaded by ajax. I'm running into a problem though. It's just not working.
I can see the post event happening in firebug but nothing seems to change when I populate the "content" parameter inside the FLIP! plug in.
Below is my code which may explain things better.
<script type="text/javascript">
function getFlipContent(url,command, target){
$.post(url, {"data": command}, function(response) {
console.log(response);
//return response; // this is not working
replaceHtml(target,response); // workaround but kinda not really
});
}
function replaceHtml(object,html){
$(object).html();
$(object).html(html);
}
$(function(){
$(".flipable2").bind("click", function() {
var url= $(this).data("url");
var command= $(this).data("command");
var target = $(this).data("target");
//alert(flip);
if (target === undefined) {
flip = "self";
}
if (target == "self") {
$($(this)).flip({
direction: 'lr',
color: '#ffffff',
content: function() {
getFlipContent(url, command, target);
}
});
return false;
}
else {
$(target).flip({
direction: 'lr',
color: '#ffffff',
content: function() {
getFlipContent(url, command, target);
}
});
return false;
}
});
});
</script>
<body>
<div id="header">
<table width="100%" cellpadding="0px" border="0px" cellspacing="0px">
<tr>
<td><a href="#" class="flipable2 box" data-target="#page" data-url="test.php" data-command="test">FLIP</a></td>
</tr>
</table>
</div>
<div id="page" class="box">
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH</td>
</div>
SO right now I'm using a replachtml function to manually re-write the contents of the target I just "flipped". This sorta works but breaks the animation so I really would rather use the plugin's content parameter... When I do that though it just doesn't do anything. The animation completes but there is no content change. I think perhaps I am missing something. Any help would be welcome.
Here is a jsfiddle too: http://jsfiddle.net/mUhuN/9/ though I wasn't sure how to fake an ajax request.
Anyway please help :)
Try to use the callbacks to load Ajax before the animation:
$("#flipbox").flip({
direction:'tb',
onBefore: function(){
console.log('before starting the animation');
},
onAnimation: function(){
console.log('in the middle of the animation');
},
onEnd: function(){
console.log('when the animation has already ended');
}
})
这篇关于Ajax不与jQuery Flip一起工作！插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
