提交表單後Fancybox中的成功/失敗消息

Question

我想製作一個AJAX表單，通過Fancybox顯示成功/失敗/共享消息，一旦用戶在表單上提交他們的電子郵件地址。目前，該代碼將響應引發至頁面頂部。

我試圖從其他的答案几個變體，堆棧溢出提供herehere，和here，但沒有效果，因爲在插入時的整個形式停止加載。

我現在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 
    }); 
});