Форма Campaign Monitor продолжает перенаправлять

Новая версия кода подписки Campaign Monitor работает иначе. Как видите, код предоставляет файл js (copypastesubscribeformlogic.js), который отвечает за отправку данных.

Что изменилось?

Раньше это был всего один статический запрос к конечной точке CM для подписки пользователя, и было довольно легко сделать подписку, запрашиваемую ajax. Теперь для подписки пользователя требуется два отдельных запроса. Первый запрос выполняется ajax и предоставляется CM (этот запрос обрабатывает js-файл copypastesubscribeformlogic.js).

Моя проблема: я хочу загрузить сообщение об успешном завершении на той же странице, что и форма, без обновления страницы или перенаправления, но оно продолжает перенаправлять на страницу благодарности CM по умолчанию.

Моя форма:

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
    <input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
    <input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
    <label for="fieldeihjlu">How did you hear of us?</label><br />
    <select  id="fieldeihjlu" name="cm-fo-eihjlu">
        <option value="1985454">Word of Mouth</option>
        <option value="1985450">Social Media</option>
        <option value="1985451">Press</option>
        <option value="1985452">Web Search</option>
        <option value="1985453">Sales and Marketing Activities</option>            
    </select>
</p>
<p>         
    <input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

Сообщение об успешном завершении (на той же странице, что и форма):

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>

Затем согласно этой ССЫЛКЕ я добавил следующие js:

var campaign = (function (c, d, $) {

var body,
  form,
  form_id,
  config,
  successMessage;

c.init = function () {

body = $('body');
form = body.find('#' + config.formSelector);
form_id = form.attr('data-id');
successMessage = $('#' + config.successSelector);
successMessage.hide();

// On form submit.
form.submit(function (evt) {

  // Disable default form submit.
  evt.preventDefault();

  // Get e-mail value.
  email = $('input[type=email]', form).val();

  // Build request data for tokenRequest.
  request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

  // Prepare tokenRequest.
  tokenRequest = new XMLHttpRequest();
  tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
  tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  tokenRequest.send(request_data);

  // Ready state.
  tokenRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        // Having token and new submit url we can create new request to subscribe a user.
        subscribeRequest = new XMLHttpRequest();
        subscribeRequest.open('POST', this.responseText, true);
        subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        subscribeRequest.send(form.serialize());
        // On ready state call response function.
        subscribeRequest.onreadystatechange = function() {
          c.response(subscribeRequest);
        }
      } else {
        c.response(tokenRequest);
      }
    }
  }
});
};

// Handle ajax response.
c.response = function(request) {
if (request.readyState === 4) {
  if (request.status === 200) {
    successMessage.show('slow');
  } else {
    form.prepend('<p class="error">' + config.errorMessage + '</p>');
  }
}
};

// Private
config = {
formSelector: 'form',
errorMessage: 'There was a problem submitting this form. Please try later.',
successSelector: 'success',
};

return c;

}(campaign || {}, {}, jQuery));

(function () {
 campaign.init();
})(jQuery);

* При загрузке страницы я не получаю ошибок Console.

* При отправке я получаю сообщение об ошибке: Refused to execute script from https://www.createsend.com/t/subscribeerror?description=..... because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled,

но затем он по-прежнему выполняется на странице благодарности CM по умолчанию.


person Ylama    schedule 24.04.2018    source источник
comment
Я также ищу решение этой проблемы - кто-нибудь знает, как создать пользовательскую форму подписки на монитор кампании?   -  person alib0ng0    schedule 31.08.2018
comment
stackoverflow.com/questions/51528519/   -  person Ylama    schedule 31.08.2018
comment
@ alib0ng0 @ alib0ng0 я вижу, вы уже прокомментировали это ... я опубликую ответ здесь, но после недавних обновлений не уверен, что это сработает. Вы можете попробовать это, но в основном замените скрипт под формой на js сверху.   -  person Ylama    schedule 31.08.2018


Ответы (1)


Так что в основном он делает вызов, а затем отображает сообщение. Просто не забудьте обновить id в скрипте (в нижней половине) var successMessage = $('#success'); var form = $('#subForm').

Не тестировалось с новым обновлением CM, но это сработало для меня.

CSS

#success {display: none;}

HTML/JS:

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>


<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
    <input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
    <input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
    <label for="fieldeihjlu">How did you hear of us?</label><br />
    <select  id="fieldeihjlu" name="cm-fo-eihjlu">
        <option value="1985454">Word of Mouth</option>
        <option value="1985450">Social Media</option>
        <option value="1985451">Press</option>
        <option value="1985452">Web Search</option>
        <option value="1985453">Sales and Marketing Activities</option>            
    </select>
</p>
<p>         
    <input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>




    <script type="text/javascript" >
    ! function(e) {
    var t = {};

    function n(o) {
        if (t[o]) return t[o].exports;
        var r = t[o] = {
            i: o,
            l: !1,
            exports: {}
        };
        return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
    }
    n.m = e, n.c = t, n.d = function(e, t, o) {
        n.o(e, t) || Object.defineProperty(e, t, {
            configurable: !1,
            enumerable: !0,
            get: o
        })
    }, n.r = function(e) {
        Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, n.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 1)
}([function(e, t) {
    var n;
    "function" != typeof(n = window.Element ? window.Element.prototype : window.HTMLElement.prototype).matches && (n.matches = n.msMatchesSelector || n.mozMatchesSelector || n.webkitMatchesSelector || function(e) {
            for (var t = (this.document || this.ownerDocument).querySelectorAll(e), n = 0; t[n] && t[n] !== this;) ++n;
            return Boolean(t[n])
        }), "function" != typeof n.closest && (n.closest = function(e) {
            for (var t = this; t && 1 === t.nodeType;) {
                if (t.matches(e)) return t;
                t = t.parentNode
            }
            return null
        }),
        function() {
            var e, t, n, o = document.documentElement || document.body;
            o.getAttribute("data-cm-hook") || (t = "submit", n = function(e) {
                var t = e.target.closest(".js-cm-form");
                t && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, function(e, t, n) {
                    var o = n.querySelector(".js-cm-email-input"),
                        r = "email=" + encodeURIComponent(o.value) + "&data=" + encodeURIComponent(n.getAttribute("data-id")),
                        c = new XMLHttpRequest;
                    c.onreadystatechange=function(){
if (this.readyState === 4) {
if (this.status === 200) {

// Having token and new submit url we can create new request to subscribe a user.
var successMessage = $('#success');
var form = $('#subForm')

subscribeRequest = new XMLHttpRequest();
subscribeRequest.open('POST', this.responseText, true);
subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
subscribeRequest.send($("#subForm").serialize());
// On ready state call response function.
subscribeRequest.onreadystatechange = function() {

form.hide('fast');
successMessage.show('fast');
}
} else {
alert("error");
}
}
}, c.open(e, t, !0), c.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), c.send(r)
                }("POST", "https://createsend.com//t/getsecuresubscribelink", t))
            }, (e = o).addEventListener ? e.addEventListener(t, n) : e.attachEvent("on" + t, n), o.setAttribute("data-cm-hook", "1"))
        }()
}, function(e, t, n) {
    e.exports = n(0)
}]);


    </script>
person Ylama    schedule 31.08.2018
comment
Хорошо, спасибо, что ответили мне... это ошибка, которую я получаю. Не удалось загрузить createsend.com/t/.: В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, доступ к источнику 'fuzzyduck.co.uk' запрещен. (индекс): 297 - person alib0ng0; 31.08.2018
comment
Я пришел сюда, потому что у меня также есть сообщение об ошибке «было заблокировано политикой CORS». Все еще ищу обходной путь. - person Liam; 31.03.2020