I have:
- the
<a href>
link that displays a fancybox and - the
<form>
, that displays a message on the page when subtmit button clicked on ajax success. They both work fine.
The code is below.
<script>
$(document).ready(function ()
{ //this fancybox appears when <a href="..." ...>...</a> 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 <form id="submit" ...>...</form> clicked
$('form#submit').hide(function ()
{
$('div#errors').fadeIn(3000);
});
}
});
return false;
});
});
</script>
I want to move that fancybox to appear on ajax success. How should I do that?
I have:
- the
<a href>
link that displays a fancybox and - the
<form>
, that displays a message on the page when subtmit button clicked on ajax success. They both work fine.
The code is below.
<script>
$(document).ready(function ()
{ //this fancybox appears when <a href="..." ...>...</a> 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 <form id="submit" ...>...</form> clicked
$('form#submit').hide(function ()
{
$('div#errors').fadeIn(3000);
});
}
});
return false;
});
});
</script>
I want to move that fancybox to appear on ajax success. How should I do that?
Share Improve this question edited Jun 26, 2015 at 15:36 Sumurai8 20.8k11 gold badges68 silver badges102 bronze badges asked Jul 19, 2012 at 13:55 HaradzieniecHaradzieniec 9,33833 gold badges122 silver badges227 bronze badges 02 Answers
Reset to default 4You could use a link that is invisible to the end-user and trigger it with jQuery on the ajax success callback. Something like this:
<a id="hiddenlink" href="#fancy" style="display: none;"></a>
<script>
$(document).ready(function ()
{ //this fancybox appears when <a href="..." ...>...</a> 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 <form id="submit" ...>...</form> clicked
$('form#submit').hide(function ()
{
$('div#errors').fadeIn(3000);
});
}
});
return false;
});
});
</script>
You can call a fancybox manually with this simple function
$.fancybox(
'<p>Content of the box in HTML</p>',
{
padding:15,
closeBtn:true
}
);
Just add it to the success function.