表单提交后Fancybox中的成功/失败消息

Question

我正在尝试制作一个AJAX表单，以便在用户在表单上提交其电子邮件地址后，通过Fancybox显示成功/失败/共享消息。目前，代码会将响应抛出到页面顶部。

我尝试了在Stack Overflow上提供here here和here的其他答案的一些变体，但无效，因为在插入时整个表单都会停止加载。< / p>

我当前的init.js如下：

        $("#form").submit(function(e){

    e.preventDefault();

    leSubmitLoader();

    dataString = $("#form").serialize();
    var templateURL = $('#templateURL').attr('value');
    var blogURL = $('#blogURL').attr('value');

    $.ajax({
        type: "POST",
        url: templateURL + "/post.php",
        data: dataString,
        dataType: "json",
        success:

        function(data) {
    $.fancybox(
    '<p>Content of the box in HTML</p>',
    {
            padding:15,
            closeBtn:true
    }
);
            function leSubmit(returning){
                                    $.fancybox(

);
                $('#form, #error, #presignup-content').hide();
                $('#success').fadeIn(function(){
                    var successScroll = $('#signup-body').offset().top - 20;
                    $('html,body').animate({scrollTop:successScroll}, 300);
                });

                if (returning == true) {

                    $('#returninguser, #returninguserurl').show();

                    var refCode = data.returncode;

                    $('#returninguser span.user').text(data.email);
                    $('#returninguser span.clicks').text(data.clicks);
                    $('#returninguser span.conversions').text(data.conversions);
                    $('#returninguserurl input#returningcode').attr('value', blogURL + '/?ref=' + refCode);

                } else {

                    $('#success-content, #newuser').show();

                    var refCode = data.code;

                    $('#newuser input#successcode').attr('value', blogURL + '/?ref=' + refCode);

                    if(data.pass_thru_error == "blocked"){
                        $('#pass_thru_error').fadeIn();
                        $('#pass_thru_error').html('AWeber Sync Error: Email Blocked.');
                    } else if (data.pass_thru_error.AWeberAPIException != undefined){
                        err = data.pass_thru_error.AWeberAPIException;
                        $('#pass_thru_error').fadeIn();
                        $('#pass_thru_error').html(err.type+': '+err.msg);
                    }

                }

                // Referral URL
                var refUrl = blogURL + '/?ref=' + refCode;

                // Twitter (note: refUrl might not show up in share box on localhost)
                var tweetUrl = 'http://twitter.com/intent?url=' + encodeURIComponent(refUrl);
                var tweetMessage = $('input#twitterMessage').attr('value');
                $('#tweetblock').html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="'+refUrl+'" data-text="'+tweetMessage+'" data-count="none">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>');

                // Facebook (note: won't work on localhost)
                $("#fblikeblock").html('<div class="fb-like" data-ref="'+refCode+'" data-href="'+refUrl+'" data-send="false" data-width="75" data-show-faces="false" data-font="arial" data-layout="button_count"></div>');

                // Google +
                function renderPlusone() {
                    gapi.plusone.render('plusoneblock', {'href':refUrl, 'size':'tall', 'annotation':'none'});
                    }
                    renderPlusone();

                // Tumblr
                var tumblr_button = document.createElement("a");
                tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(refUrl) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
                tumblr_button.setAttribute("title", "Share on Tumblr");
                tumblr_button.setAttribute("onclick", "window.open(this.href, 'tumblr', 'width=460,height=400'); return false;");
                tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
                tumblr_button.innerHTML = "Share on Tumblr";
                document.getElementById("tumblrblock").appendChild(tumblr_button);

                // RinkedIn
                $('#linkinblock').html('<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-url="'+refUrl+'"></script>');

            }

            if(data.email_check == "invalid") {

                leSubmitLoaderStop();
                $('#error').html('This email address is invalid.').fadeIn();

            }
            else if(data.required.length) {

                leSubmitLoaderStop();
                $('.error').hide();
                $d = String(data.required).split(",");
                $.each($d, function(k, v){
                    $("#" + v + ".error").fadeIn();
                });
            }
            else {

                if(data.reuser == "true") {

                    leSubmit(true);
                    FB.XFBML.parse(document.getElementById('fblikeblock'));

                } else {

                    leSubmit(false);
                    FB.XFBML.parse(document.getElementById('fblikeblock'));

                }
                $('body').addClass('submission-success');

            }

        }

    });

});

Answer 1

我不是要修复你的代码，而是为什么你不使用这个ajax格式来处理成功/失败？

$.ajax({
    type: "POST",
    url: templateURL + "/post.php",
    data: dataString,
    dataType: "json"
}).done(function () {
    //success
    $.fancybox("success", {
        // options
    });
}).fail(function () {
    //error
    $.fancybox("failure", {
        // options
    });
}).always(function () {
    // optional after ajax is completed
    $.fancybox("else", {
        // options
    });
});