fancybox ajax post,display jquery fancybox as ajax success
问题
I have:
the
and
the
, that displays a message on the page when subtmit button clicked on ajax success.They both work fine.
The code is below.
$(document).ready(function ()
{ //this fancybox appears when clicked
$(".fancybox-effects-d").fancybox({
padding:15,
closeBtn:true,
});
$("form#submit").submit(function ()
{
var name = $(#name).attr(value);
var password = $(#password).attr(value);
$.ajax({
type:"POST",
url:"index/success",
data:{ name:name, password:password},
success:function ()
{
//this form disappears and div appears when submit button of the
... clicked$(form#submit).hide(function ()
{
$(div#errors).fadeIn(3000);
});
}
});
return false;
});
});
I want to move that fancybox to appear on ajax success. How should I do that?
回答1:
You can call a fancybox manually with this simple function
$.fancybox(
Content of the box in HTML
,{
padding:15,
closeBtn:true
}
);
Just add it to the success function.
回答2:
You could use a link that is invisible to the end-user and trigger it with jQuery on the ajax success callback. Something like this:
$(document).ready(function ()
{ //this fancybox appears when clicked
$(".fancybox-effects-d").fancybox({
padding:15,
closeBtn:true,
}
});
$("form#submit").submit(function ()
{
var name = $(#name).attr(value);
var password = $(#password).attr(value);
$.ajax({
type:"POST",
url:"index/success",
data:{ name:name, password:password},
success:function ()
{
$("a#hiddenlink").trigger("click");
//this form disappears and div appears when submit button of the
... clicked$(form#submit).hide(function ()
{
$(div#errors).fadeIn(3000);
});
}
});
return false;
});
});
问题 I have: the and the, that displays a message on the page when subtmit button clicked on ajax success. They both work fine. The code is below. $(document).ready(function () { //this fancybox appears when clicked $(".fancybox-effects-d").fancybox({ padding:15, closeBtn:true, }); $("form#submit").submit(function () { var name = $(#name).attr(value); var password = $(#password).attr(value); $.ajax({ type:"POST", url:"index/success", data:{ name:name, password:password}, success:function () { //this form disappears and div appears when submit button of the... clicked $(form#submit).hide(function () { $(div#errors).fadeIn(3000); }); } }); return false; }); }); I want to move that fancybox to appear on ajax success. How should I do that? 回答1: You can call a fancybox manually with this simple function $.fancybox( Content of the box in HTML, { padding:15, closeBtn:true } ); Just add it to the success function. 回答2: You could use a link that is invisible to the end-user and trigger it with jQuery on the ajax success callback. Something like this: $(document).ready(function () { //this fancybox appears when clicked $(".fancybox-effects-d").fancybox({ padding:15, closeBtn:true, } }); $("form#submit").submit(function () { var name = $(#name).attr(value); var password = $(#password).attr(value); $.ajax({ type:"POST", url:"index/success", data:{ name:name, password:password}, success:function () { $("a#hiddenlink").trigger("click"); //this form disappears and div appears when submit button of the... clicked $(form#submit).hide(function () { $(div#errors).fadeIn(3000); }); } }); return false; }); });