Javascript 表单提交后Fancybox中的成功/失败消息
我正在尝试制作一个AJAX表单，以便在用户在表单上提交电子邮件地址后，通过Fancybox显示成功/失败/共享消息。当前，代码将响应抛出到页面顶部 我尝试了与其他答案不同的一些变化，以及堆栈溢出，但没有效果，因为在插入时整个表单停止加载 我当前的init.js如下所示：Javascript 表单提交后Fancybox中的成功/失败消息,javascript,jquery,ajax,fancybox,Javascript,Jquery,Ajax,Fancybox,我正在尝试制作一个AJAX表单，以便在用户在表单上提交电子邮件地址后，通过Fancybox显示成功/失败/共享消息。当前，代码将响应抛出到页面顶部 我尝试了与其他答案不同的一些变化，以及堆栈溢出，但没有效果，因为在插入时整个表单停止加载 我当前的init.js如下所示： $("#form").submit(function(e){ e.preventDefault(); leSubmitLoader(); dataString = $("#form"
$("#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');
}
}
});
});
$（“#表单”）.submit（函数（e）{
e、 预防默认值（）；
leSubmitLoader（）；
dataString=$（“#表单”）.serialize（）；
var templateURL=$（'#templateURL'）.attr（'value'）；
var blogURL=$（'#blogURL'）.attr（'value'）；
$.ajax({
类型：“POST”，
url:templateURL+“/post.php”，
数据：dataString，
数据类型：“json”，
成功：
功能（数据）{
$.fancybox(
“文本框的HTML内容”，
{
填充：15，
真的吗
}
);
函数leSubmit（返回）{
$.fancybox(
);
$（“#表单，#错误，#预签名内容”）.hide（）；
$（'#success'）.fadeIn（函数（）{
var successScroll=$（“#注册体”）.offset（）.top-20；
$（'html，body'）.animate（{scrollTop:successScroll}，300）；
});
if（返回==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输入#returningcode”）.attr（'value'，blogURL+'/？ref='+refCode）；
}否则{
$（“#成功内容，#新用户”）.show（）；
var refCode=data.code；
$（'#newuser input#successcode'）.attr（'value'，blogURL+'/？ref='+refCode）；
if（data.pass\u thru\u error==“blocked”）{
$（“#传递错误”）.fadeIn（）；
$（'pass#thru_error'）.html（'AWeber Sync error:Email Blocked'）；
}else if（data.pass\u thru\u error.AWeberAPIException！=未定义）{
err=data.pass\u thru\u error.AWeberAPIException；
$（“#传递错误”）.fadeIn（）；
$（“#传递错误”）.html（err.type+”：“+err.msg）；
}
}
//推荐URL
var refUrl=blogURL+'/？ref='+refCode；
//Twitter（注意：refUrl可能不会显示在本地主机的共享框中）
var tweetUrl=http://twitter.com/intent?url=“+编码元件（refUrl）；
var tweetMessage=$（'input#twitterMessage'）.attr（'value'）；
$（'#tweetblock'）.html（'！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）；}（文档，“脚本”，“twitter wjs”）；
//Facebook（注意：在localhost上不起作用）
$（“#fblikeblock”）.html（“”）；
//谷歌+
函数renderPlusone（）{
render（'plusoneblock'，{'href'：refUrl，'size'：'tall'，'annotation'：'none'}）；
}
renderPlusone（）；
//Tumblr
var tumblr_button=document.createElement（“a”）；
tumblr_按钮。setAttribute（“href”http://www.tumblr.com/share/link?url=“+encodeURIComponent（refUrl）+”&name=“+encodeURIComponent（tumblr_link_name）+”&description=“+encodeURIComponent（tumblr_link_description））；
setAttribute（“标题”，“tumblr上的共享”）；
tumblr_button.setAttribute（“onclick”，“window.open”（this.href，'tumblr'，'width=460，height=400'）；返回false；”；
tumblr_按钮.setAttribute（“样式”，“显示：内联块；文本缩进：-9999px；溢出：隐藏；宽度：81px；高度：20px；背景：url（'http://platform.tumblr.com/v1/share_1.png“）左上角无重复透明；”；
tumblr_button.innerHTML=“在tumblr上共享”；
document.getElementById（“tumblrblock”）.appendChild（tumblr_按钮）；
//林克丁
$（'#linkinblock'）.html（''）；
}
如果（data.email_check==“无效”）{
leSubmitLoaderStop（）；
$（'#error'）.html（'此电子邮件地址无效'）.fadeIn（）；
}
else if（数据.必需.长度）{
leSubmitLoaderStop（）；
$（'.error'）.hide（）；
$d=字符串（data.required）.split（“，”）；
$。每个（$d，函数（k，v）{
$（“#”+v+”.error”）.fadeIn（）；
});
}
否则{
if（data.reuse==“true”）{
leSubmit（真）；
parse（document.getElementById（'fblikeblock'）；
}否则{
leSubmit（假）；
parse（document.getElementById（'fblikeblock'）；
}
$（'body'）.addClass（'submission-success'）；
}
}
});
});
$.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
});
});