javascript - display jquery fancybox as ajax success - Stack Overflow

admin管理员组

文章数量:1317915

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?

• javascript
• jquery
• ajax
• fancybox

Share Improve this question Follow edited Jun 26, 2015 at 15:36 Sumurai8 20.8k1111 gold badges6868 silver badges102102 bronze badges asked Jul 19, 2012 at 13:55 HaradzieniecHaradzieniec 9,3383333 gold badges122122 silver badges227227 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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:

<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.

本文标签： javascriptdisplay jquery fancybox as ajax successStack Overflow