Hello all,
I am making a reusable component for my cms that will allow content authors the ability to add a link to a page that will spawn a modal that contains a marketo form. I have added code to inject the form on clicking of the link and once the form is submitted or cancelled we remove the form tag, the div( mktoStyleLoaded ) and the iframe (iframe#MktoForms2XDIframe).
The first time we submit any form on the page it goes through and we get a success response. Now when you click a second link (can be the same modal or a different) the data is collected in the form2 code it look likes we even get to doAjaxSubmit(); but we never hear back.
Here is a modal html
<div class="modal-form">
<a type="button"
class="cta-button primary-button" id="123" data-form-id="1619" data-toggle="modal" data-target="#mktoForm_123-modal">
Form with msg
</a>
<div class="modal fade modal-form" id="mktoForm_123-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="logo"></div>
<h4>Test Form Title</h4>
<button type="button" class="close x-button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> </span>
</button>
</div>
<div class="modal-body">
<div class="modal-form-content" id="modal-mktoForm_123-intro">
<h2>Test Form Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus feugiat, ullamcorper libero ut, dignissim quam. In hac habitasse platea dictumst. In ac rhoncus enim, vehicula gravida odio. Pellentesque diam justo, fermentum sed massa vitae, volutpat vulputate felis. Nulla volutpat, lectus et sollicitudin vulputate, tortor justo bibendum ante, sit amet volutpat purus neque quis eros. Pellentesque enim elit, tempus id ipsum nec, rutrum ullamcorper diam. Morbi a eros venenatis, molestie dolor sodales, tempus risus. Mauris volutpat urna ac neque pharetra, eget feugiat lectus lobortis. Vivamus eu sem eu purus imperdiet feugiat vitae eu nibh.</p>
</div>
<div class="modal-form-holder"></div>
<div class="modal-form-content" id="modal-mktoForm_123-chaser">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus feugiat, ullamcorper libero ut, dignissim quam. In hac habitasse platea dictumst. In ac rhoncus enim, vehicula gravida odio. Pellentesque diam justo, fermentum sed massa vitae, volutpat vulputate felis. Nulla volutpat, lectus et sollicitudin vulputate, tortor justo bibendum ante, sit amet volutpat purus neque quis eros. Pellentesque enim elit, tempus id ipsum nec, rutrum ullamcorper diam. Morbi a eros venenatis, molestie dolor sodales, tempus risus. Mauris volutpat urna ac neque pharetra, eget feugiat lectus lobortis. Vivamus eu sem eu purus imperdiet feugiat vitae eu nibh.</p>
</div>
</div>
</div><!-- /.modal-content -->
<div class="modal-sucess-msg">Thank you you have completed the form and we will get back to you.</div>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
here is my js
window.Foo = window.Foo || {};
window.Foo.ModalForm = (function ($, window, document) {
"use strict";
var pluginName = "ModalForm",
overlayOpenStatus = false;
/*
* Modal Form constructor
* */
function ModalForm(){
this.init();
}
ModalForm.prototype.init = function(){
if (typeof MktoForms2 == "undefined"){
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '//app-ab13.marketo.com/js/forms2/js/forms2.js';
head.appendChild(script);
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
$(".cta-button").click(function( e ){
ModalForm.prototype.initForm($( this ));
});
}
}, 10);
}
};
ModalForm.prototype.initForm = function(item) {
var formModal = $(item).parent(),
formLink = $(item),
formTarget = $(formLink).attr('data-target'),
formID = $(formLink).attr('data-form-id') || "",
formResult = $(formLink).attr('data-form-result') || "blank",
formSucessUrl = $(formLink).attr('data-success-url') || '',
formCloseBtn = $(formTarget).find(".close.x-button"),
formRedir = false,
formHolder = $(formTarget).find('.modal-form-holder'),
formHtml = "<form id='mktoForm_" + formID + "'></form>",
currentModal = $(formTarget).find(".modal");
if (formSucessUrl.length > 0){
formRedir = true;
}
$(formHolder).append(formHtml);
$(formTarget).on('hidden.bs.modal', function () {
$(".modal-form-holder").empty();
$('form.mktoForm').remove();
$('#mktoStyleLoaded').remove();
$('iframe#MktoForms2XDIframe').remove();
})
MktoForms2.loadForm("//app-ab13.marketo.com", "754-FXO-315", formID, function (form){
form.onSuccess(function(values, followUpUrl){
$(formTarget).find(".modal-content").fadeOut('fast');
if (formRedir) {
if (formResult == "blank") {
window.open(formSucessUrl, '_blank');
$(formTarget).modal('hide');
} else {
location.href = formSucessUrl;
}
} else {
$(formTarget).find(".modal-sucess-msg").fadeIn(100).delay(5000).fadeOut('slow').delay(600, function(){
$(formTarget).modal('hide');
$(formTarget).on('hidden.bs.modal', function () {
$(formTarget).find(".modal-content").show();
$(formTarget).find(".modal-sucess-msg").hide();
});
});
}
return false;
});
});
}
ModalForm.prototype.enableListeners = function(){
};
$.fn[pluginName] = function () {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new ModalForm(this));
}
});
};
return ModalForm;
})( jQuery, window, document );
$(document).ready(function(){
$(".modal-form.modal.fade").each(function () {
var modalPrime = $(this);
$('body').append(modalPrime);
}),
$('body').ModalForm();
});
Any help would be much appreciated
.png)