- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我尝试使用 MailChimp 和 Ajax 创建一个简单的时事通讯注册来在后台处理事件。我的问题是它重定向到包含当前代码的页面。我怎样才能修复它,以便在完成后它只显示复选标记而不显示其他内容?我知道动画代码不在正确的位置,它就在那里,所以我可以在重定向之前看到它。
var subscribe_button = document.querySelector(".fi-mail");
subscribe_button.addEventListener('click', function(){
document.getElementById('ava-subscribe-form').submit();
subscribe_button.classList.remove("fi-mail");
subscribe_button.classList.add("fi-check");
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: '//https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post&id=0ae3f9ab0f&c=?',
data: $('#ava-subscribe-form').serialize(),
dataType: 'json',
cache : false,
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
$(document).ready( function () {
var $form = $('ava-subscribe-form');
if ( $form.length > 0 ) {
$('form input[type="submit"]').bind('click', function ( event ) {
if ( event ) event.preventDefault();
register($form);
});
}
});
* {
-webkit-font-smoothing: antialiased;
font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
font-size: 15px;
color: rgba(255,255,255,0.6);
}
html {
background: linear-gradient(134.72deg, #EB4B92 0%, #CA76E3 100%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
text-align: center;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 0px;
-webkit-text-fill-color: rgba(255,255,255,0.6);
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
transition: background-color 5000s ease-in-out 0s;
caret-color: rgba(255,255,255,0.6);
}
form {
background: transparent;
height: 50px;
width: 300px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
top: 50%;
left: 50%;
position: absolute;
margin: -25px 0 0 -150px;
}
input {
background: transparent;
float: left;
padding: 14px 0;
border: 0;
outline: 0;
margin-left: 25px;
width: 220px;
}
form a {
float: right;
background: rgba(255,255,255,0.1);
border: 0;
line-height: 38px;
height: 38px;
width: 38px;
margin: 6px 6px 0 0;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255,255,255,0.3);
font-size: 1.2em;
text-align: center;
cursor: pointer;
text-decoration: none;
}
form a:hover {
background: rgba(0,0,0,0.1);
}
form a.fi-check {
background: rgba(255,255,255,0.1);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
form a.fi-check:hover {
cursor: default;
}
.a-thing {
color: rgba(255,255,255,0.9);
font-weight: bold;
font-size: .9em;
text-shadow: 0 1px rgba(0,0,0,0.2);
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -195px;
}
.a-thing a {
color: rgba(255,255,255,0.2);
text-decoration: none;
}
.a-thing a:hover {
color: rgba(255,255,255,0.2);
}
@font-face {
font-family: "foundation-icons";
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot");
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.svg#GeneralFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
[class*="fi-"]:before {
font-family: "foundation-icons";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
display: inline-block;
}
.fi-check:before {
content: "\f126";
}
.fi-mail:before {
content: "\f16d";
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .2);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(0, 0, 0, .2);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(0, 0, 0, .2);
}
::placeholder { /* Most modern browsers support this now. */
color: rgba(0, 0, 0, .2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post" method="POST" id="ava-subscribe-form">
<input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
<input type="hidden" name="id" value="0ae3f9ab0f">
<input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
<a type="submit" class="fi-mail"></a>
</form>
最佳答案
原因是您将 jquery 事件附加到错误的目标。
您可能会得到如下代码的预期结果。
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="ava-subscribe-form">
<input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
<input type="hidden" name="id" value="0ae3f9ab0f">
<input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
<a href="javascript:void(0)" class="fi-mail"></a>
</form>
js
/* moved these code to jquery click
var subscribe_button = document.querySelector(".fi-mail");
subscribe_button.addEventListener('click', function(){
document.getElementById('ava-subscribe-form').submit();
subscribe_button.classList.remove("fi-mail");
subscribe_button.classList.add("fi-check");
});
*/
function register($form) {
$.ajax({
type: $form.attr('method'),
url: 'https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post-json?&c=?',
data: $('#ava-subscribe-form').serialize(),
dataType: 'json',
cache : false,
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
$(document).ready( function () {
var $form = $('#ava-subscribe-form');
if ( $form.length > 0 ) {
$('a.fi-mail').bind('click', function () {
// not to do page transition, i changed event.preventDefault() to href="javascript:void(0)
$(this).removeClass('fi-mail').addClass('fi-check');
register($form);
});
}
});
关于javascript - Mailchimp Ajax 重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52674803/
法律要求我在所有允许选择退出的电子邮件中都有一个链接。似乎该链接是 |UNSUB|合并标签链接直接指向 MailChimp 托管取消订阅表单。这没有帮助,因为如果有人取消订阅,我希望能够更新我自己的外
使用Mailchimp API,我取消了列表用户的订阅。然后,我立即发送新请求,以使用Mailchimp API重新订阅同一用户。 我收到400错误的错误请求,并显示以下消息: (...) as si
我为邮件黑猩猩选择了“全角”模板,但我一生都无法更改每行的背景颜色。 它允许标题使用全宽颜色条,但不允许随后的 block 使用全宽颜色条。我可以在其中放置内联样式或嵌入式 css,但我不知道如何定位
我正在使用 MailChimp 发送批量电子邮件。我正在使用合并标签来做到这一点。问题是我无法向标签添加超过 255 个字符。任何解决这个问题? 最佳答案 没有解决该限制的方法,不。通常,如果您想在这
一言以蔽之 我已经在我的域上配置了 SPF 政策,但我收到了一份失败的 dmarc 报告。我不明白为什么会出现这种故障。 更多上下文 我为我的域配置了以下 spf 策略 zerowasteparis.
Mailchimp 将每个表单与一个列表联系起来。 我想在 Page1.html 上有一个注册表单,将用户发送到 Page1ty.html,在 Page2.html 上有另一个表单,将用户发送到 Pa
我想通过过滤我已应用于预期子集的标签 ('test_tag') 上的列表来为电子邮件列表的子集创建一个 mailchimp 事件。我不确定正确的语法是什么。我找不到任何关于如何使用标签以编程方式创建任
我有一个带有名称和电子邮件字段的新闻通讯表单,提交后会使用MailChimp API将其发送到/api.mailchimp.com/3.0/lists/####/members。 据我了解,MailC
我一直想使用 MailChimp API,由于 v3 已经发布,我想使用它。我看到有一个类似于 v2 ( https://apidocs.mailchimp.com/api/2.0/helper/se
我的网站允许用户通过 Drupal MailChimp 模块使用 API 订阅 MailChimp 列表。但是,如果用户通过电子邮件中的链接取消订阅,然后决定通过访问我的网站并选中“订阅”框来重新订阅
我刚刚开始使用 mailchimp 作为我正在编写的 asp.net mvc 应用程序的解决方案。 我正在尝试使用 mcapinet.codeplex.com 包装器。 我已经基于其中一个预先创建的模
我想使用 Mailchimp Api 3.0 向自动化工作流程添加订阅者,但我找不到 workflow_id 的位置或 workflow_email_id位于...这是来自文档: POST /auto
我想为给定的事件自动收集取消订阅和清理的电子邮件帐户。 在 API 游乐场中,我看到了 List 实体上可用的所有方法。 退订 我看到它在 LIST API 中GET reports/xxxxxx/u
我正在为我的 MailChimp 事件配置 DKIM。 除了选中“验证此事件”复选框以使我的域识别 MailChimp 之外,我还需要做什么?为此,我需要在我的机器上安装 openDKIM 吗? 最佳
我想按“时事通讯”、“用户”和“成员(member)”对我的用户进行分组,并通过 API 发送电子邮件,如何才能实现这一点:http://apidocs.mailchimp.com/api/1.3/i
目前,我在 PHP 页面上有一个注册表单,它允许用户输入他们的姓名和电子邮件地址。 按下时,它会向服务器发送 AJAX POST,接收 postdata 的 PHP 脚本会获取它并使用 MailChi
是否有机会通过 API 填写可重复的部分?例如,我有产品列表,我只想在模板中包含一次产品部分,然后遍历集合。我已经阅读了之前关于这个主题的讨论并用谷歌搜索,但我仍然不明白是否可以通过 API。
我正在使用“操场”来测试创建一个段,但我不断收到验证错误 我的请求: { "name": "MyTest", "options": { "match": "any",
我正在尝试使用 MailChimp API v3.0 创建一个新的营销事件,但我没有看到任何方法允许我在 API 的资源中进行此操作。有谁知道我该怎么做? 最佳答案 当我最初回答这个问题时,这是不可能
我正在升级 Mailchimp 集成以使用最新版本的 API (V3)。 在 API V2 中,事件对象有一个 Web_Id,它是一个整数,可用于创建可浏览的 URL 链接。 EG:admin.mai
我是一名优秀的程序员,十分优秀!