We Keep Coding

Bind function to Ajax Form Success Event

I need to call a function with a conversion tag when a form is successfully submitted via ajax.
Since the Javascript for handling the form is generated by the CMS of the site I am not able to change it. I don't want to rewrite the whole ajax call and just call my function when the form successfully submits
This is the Javascript Code generated by the CMS (it's just a snippet)
qpzP: function(e, t, n) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var r = n("ZClI"),
i = (window.ElementFormContainer || window.ElementBase).extend({
$form: null,
ajax: !0,
time: null,
wakeup: function() {
return this.time = new Date, this.$form = this.getViewport().jQuery("> form", this.$element[0]), this.$form.on("submit", function(e) {
this.ajax && (e.preventDefault(), this.submit())
}.bind(this)), this
},
submit: function() {
if ("undefined" != typeof cms && cms) return !1;
if (!this.ajax) return this.$form.submit(), this;
var e = $('input[type="file"]:not([disabled])', this.$form);
e.each(function(e, t) {
t.files.length > 0 || $(t).prop("disabled", !0)
});
var t = new FormData(this.$form[0]);
"undefined" != typeof webcard && "culture" in webcard && webcard.culture && t.append("culture", webcard.culture), e.prop("disabled", !1), t.append("id", this.getId()), t.append("tac", Math.floor(((new Date).getTime() - this.time.getTime()) / 1e3));
var n = "" != this.$form.attr("action") ? this.$form.attr("action") : "/form_container/submit";
return $.ajax({
url: n,
data: t,
processData: !1,
contentType: !1,
type: "POST",
success: function(e) {
this.$element.find(".ed-element").each(function() {
this.element.destroy()
}), this.$element.html(e), $(e).is(".wv-success") ? this.getViewport().notify("form.success", [this, this.$form]) : this.getViewport().notify("form.error", [this, this.$form]), this.wakeup();
var t = this.$element.find(".ed-element"),
n = [];
t.each(function(e, t) {
var i = r.a.getTypeClassName($(t).attr("class"));
i in window && n.push(new window[i](t))
}.bind(this)), animations.initSubsequent(n)
}.bind(this)
}), this
},
setAjax: function(e) {
return this.ajax = e, this
}
});
t.default = i
},
This is what I though could work:
/* Conversion Tracking */
$(function () {
$('form').bind('submit', function () {
gtag('event', 'conversion', {'send_to': 'AW-xxx/xxx'});
console.log('gtracking_sent');
});
});
But it doesn't work.
Ideas on how to achieve this?

Create an iframe widget loaded using javascript

I want to create an iframe widget loaded using javascript like drift.com
I Want to include a code like the one bellow:
This one loads an iframe and places it on the bottom of the page. How Can I do something similar? I want to add an Iframe but I want to give a javascript snippet.
! function() {
var t;
if (t = window.driftt = window.drift = window.driftt || [], !t.init) return t.invoked ? void(window.console && console.error && console.error("Drift snippet included twice.")) : (t.invoked = !0,
t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function(e) {
return function() {
var n;
return n = Array.prototype.slice.call(arguments), n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e, n, o, i;
e = 3e5, i = Math.ceil(new Date() / e) * e, o = document.createElement("script"),
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + i + "/" + t + ".js",
n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n);
});
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('aczfy2anahyv');

Add hyperlink to lightbox image

I need to have a lightbox image link to another page, in this case it's on tumblr as the permalink page. I tried wrapping the markup of mfp-img div in a href with "{Permalink}" (as per tumblr's api) and then "%url%", but both render exactly the same as inside the quotes, rather than the actual link to the page.
I'm quite familiar with css, but unfortunately my js is lacking. Here's the portion of the code that controls the lightbox image. Where and how should I add the href to the code?
a.magnificPopup.registerModule("image", {
options: {
markup: '<div class="mfp-figure"><div class="mfp-close"></div><div class="mfp-img"></div><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>',
cursor: "mfp-zoom-out-cur",
titleSrc: "title",
verticalFit: !0,
tError: 'The image could not be loaded.'
},
proto: {
initImage: function() {
var a = n.st.image,
c = ".image";
n.types.push("image"), x(g + c, function() {
n.currItem.type === "image" && a.cursor && s.addClass(a.cursor)
}), x(b + c, function() {
a.cursor && s.removeClass(a.cursor), r.off("resize" + j)
}), x("Resize" + c, n.resizeImage), n.isLowIE && x("AfterChange", n.resizeImage)
},
resizeImage: function() {
var a = n.currItem;
if (!a || !a.img) return;
if (n.st.image.verticalFit) {
var b = 0;
n.isLowIE && (b = parseInt(a.img.css("padding-top"), 10) + parseInt(a.img.css("padding-bottom"), 10)), a.img.css("max-height", n.wH - b)
}
},
_onImageHasSize: function(a) {
a.img && (a.hasSize = !0, N && clearInterval(N), a.isCheckingImgSize = !1, z("ImageHasSize", a), a.imgHidden && (n.content && n.content.removeClass("mfp-loading"), a.imgHidden = !1))
},
findImageSize: function(a) {
var b = 0,
c = a.img[0],
d = function(e) {
N && clearInterval(N), N = setInterval(function() {
if (c.naturalWidth > 0) {
n._onImageHasSize(a);
return
}
b > 200 && clearInterval(N), b++, b === 3 ? d(10) : b === 40 ? d(50) : b === 100 && d(500)
}, e)
};
d(1)
},
getImage: function(b, c) {
var d = 0,
e = function() {
b && (b.img[0].complete ? (b.img.off(".mfploader"), b === n.currItem && (n._onImageHasSize(b), n.updateStatus("ready")), b.hasSize = !0, b.loaded = !0, z("ImageLoadComplete")) : (d++, d < 200 ? setTimeout(e, 100) : f()))
},
f = function() {
b && (b.img.off(".mfploader"), b === n.currItem && (n._onImageHasSize(b), n.updateStatus("error", g.tError.replace("%url%", b.src))), b.hasSize = !0, b.loaded = !0, b.loadError = !0)
},
g = n.st.image,
h = c.find(".mfp-img");
if (h.length) {
var i = document.createElement("img");
i.className = "mfp-img", b.img = a(i).on("load.mfploader", e).on("error.mfploader", f), i.src = b.src, h.is("img") && (b.img = b.img.clone()), b.img[0].naturalWidth > 0 && (b.hasSize = !0)
}
return n._parseMarkup(c, {
title: O(b),
img_replaceWith: b.img
}, b), n.resizeImage(), b.hasSize ? (N && clearInterval(N), b.loadError ? (c.addClass("mfp-loading"), n.updateStatus("error", g.tError.replace("%url%", b.src))) : (c.removeClass("mfp-loading"), n.updateStatus("ready")), c) : (n.updateStatus("loading"), b.loading = !0, b.hasSize || (b.imgHidden = !0, c.addClass("mfp-loading"), n.findImageSize(b)), c)
}
}
});
var P, Q = function() {
return P === undefined && (P = document.createElement("p").style.MozTransform !== undefined), P
};
a.magnificPopup.registerModule("zoom", {
options: {
enabled: !1,
easing: "ease-in-out",
duration: 300,
opener: function(a) {
return a.is("img") ? a : a.find("img")
}
},
proto: {
initZoom: function() {
var a = n.st.zoom,
d = ".zoom";
if (!a.enabled || !n.supportsTransition) return;
var e = a.duration,
f = function(b) {
var c = b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),
d = "all " + a.duration / 1e3 + "s " + a.easing,
e = {
position: "fixed",
zIndex: 9999,
left: 0,
top: 0,
"-webkit-backface-visibility": "hidden"
},
f = "transition";
return e["-webkit-" + f] = e["-moz-" + f] = e["-o-" + f] = e[f] = d, c.css(e), c
},
g = function() {
n.content.css("visibility", "visible")
},
h, i;
x("BuildControls" + d, function() {
if (n._allowZoom()) {
clearTimeout(h), n.content.css("visibility", "hidden"), image = n._getItemToZoom();
if (!image) {
g();
return
}
i = f(image), i.css(n._getOffset()), n.wrap.append(i), h = setTimeout(function() {
i.css(n._getOffset(!0)), h = setTimeout(function() {
g(), setTimeout(function() {
i.remove(), image = i = null, z("ZoomAnimationEnded")
}, 16)
}, e)
}, 16)
}
}), x(c + d, function() {
if (n._allowZoom()) {
clearTimeout(h), n.st.removalDelay = e;
if (!image) {
image = n._getItemToZoom();
if (!image) return;
i = f(image)
}
i.css(n._getOffset(!0)), n.wrap.append(i), n.content.css("visibility", "hidden"), setTimeout(function() {
i.css(n._getOffset())
}, 16)
}
}), x(b + d, function() {
n._allowZoom() && (g(), i && i.remove())
})
},
_allowZoom: function() {
return n.currItem.type === "image"
},
_getItemToZoom: function() {
return n.currItem.hasSize ? n.currItem.img : !1
},
_getOffset: function(b) {
var c;
b ? c = n.currItem.img : c = n.st.zoom.opener(n.currItem.el || n.currItem);
var d = c.offset(),
e = parseInt(c.css("padding-top"), 10),
f = parseInt(c.css("padding-bottom"), 10);
d.top -= a(window).scrollTop() - e;
var g = {
width: c.width(),
height: (p ? c.innerHeight() : c[0].offsetHeight) - f - e
};
return Q() ? g["-moz-transform"] = g.transform = "translate(" + d.left + "px," + d.top + "px)" : (g.left = d.left, g.top = d.top), g
}
}
});
Here is the portion I tried to edit, both with permalink and %url%, with and without quotations.
a.magnificPopup.registerModule("image", {
options: {
markup: '<div class="mfp-figure"><div class="mfp-close"></div><div class="mfp-img"></div><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>',
cursor: "mfp-zoom-out-cur",
titleSrc: "title",
verticalFit: !0,
tError: 'The image could not be loaded.'
},

Jwplayer 7 lightsout and iframe

I just included lightsout olugin in jwplayer, so its work fine when I add jwplayer code in my page but when I call jwplayer with an iframe lightsout plugin works inside the iframe and does no effect to the page any more.
Below I have the javascript
(function(e) {
function t(t, n, i) {
function a() {
for (var e in g) n[e] === void 0 && (n[e] = g[e]);
if (y = document.createElement("div"), y.className += " BSlightsout_shade", y.style.display = "none", y.style.backgroundColor = "#" + n.backgroundcolor, y.style.zIndex = 0, y.style.opacity = 0, y.style.filter = "alpha(opacity=0)", y.style.top = 0, y.style.left = 0, y.style.bottom = 0, y.style.right = 0, n.parentid ? (y.style.position = "absolute", document.getElementById(n.parentid).style.position = "relative", document.getElementById(n.parentid).appendChild(y)) : (y.style.position = "fixed", document.body.appendChild(y)), y.onclick = r, p = new o(y, n.time, n.opacity, s), u.on = p.on, u.off = p.off, u.toggle = p.toggle, n.dockicon === !0 && typeof t.addButton == "function") {
var i = l + "BSlightsout.png";
t.addButton(i, "Cinema Mode", p.toggle, "BSlightsout")
}
t.onIdle(d), t.onPlay(d), t.onPause(d), t.onComplete(f)
}
function s() {
var o, n = 0;
while ((o = e(n++)) && o.hasOwnProperty("id") && 100 > n) c(o, "auto");
c(t, 301)
}
function c(e, t) {
e.getRenderingMode() === "html5" ? e.getContainer().style.zIndex = t : e.getContainer().parentNode.style.zIndex = t
}
function r() {
t.pause(!0), p.on()
}
function f() {
n.oncomplete == "off" ? p.off() : p.on()
}
function d() {
switch (t.getState()) {
case "IDLE":
n.onidle == "off" ? p.off() : p.on();
break;
case "PLAYING":
n.onplay == "off" ? p.off() : p.on();
break;
case "PAUSED":
n.onpause == "off" ? p.off() : p.on()
}
}
var y, p, u = this,
g = {
backgroundcolor: "000000",
dockicon: !0,
opacity: 1,
time: 800,
onidle: "on",
onplay: "off",
onpause: "on",
oncomplete: "on",
parentid: null
};
t.onReady(a), this.getDisplayElement = function() {
return i
}, this.resize = function() {}
}
function o(e, t, o, n) {
function i(e) {
l.element.style.opacity = "" + e, l.element.style.filter = "alpha(opacity=" + Math.round(e * 100) + ")", l.opacity = e
}
this.element = e, this.time = t || 1e3, this.dark = o || .8, this.opacity = 0;
var a, l = this,
s = "opacity" in this.element.style;
s || (this.element.style.zoom = 1), this.off = function() {
typeof n == "function" && n(), l.element.style.display = "block", clearInterval(a);
var e = (new Date).getTime(),
t = l.opacity;
a = setInterval(function() {
var o = ((new Date).getTime() - e) / l.time;
1 > o || (o = 1, clearInterval(a)), i(l.dark * o + t * (1 - o))
}, 1e3 / 60)
}, this.on = function() {
clearInterval(a);
var e = (new Date).getTime(),
t = l.opacity;
a = setInterval(function() {
var o = ((new Date).getTime() - e) / l.time;
1 > o || (o = 1, clearInterval(a), l.element.style.display = "none"), i(0 * o + t * (1 - o))
}, 1e3 / 60)
}, this.toggle = function() {
.5 > l.opacity ? l.off() : l.on()
}
}
for (var n = document.getElementsByTagName("head")[0].getElementsByTagName("script"), i = 0; n.length > i; i++) {
var a = n[i].src.match(/(.*?)BSlightsout-?\d?\.js/);
if (a) {
var l = a[1];
break
}
}
e().registerPlugin("BSlightsout", "6.0", t)
})(jwplayer)
as I told you before when I load jwplayer code in page its working and turning lights off but when in the same page I call jwplayer with an iframe code its turning lights off inside the iframe and does no any effect in my page.
Is there anyway to turn off lights using external jwplayer via iframe code?
plugins: { 'jwplayer/plugins/BSlightsout.js': {}, },

You don't need to use that bloated plugin. This pen has all the code you need to achieve the desired effect.
function turnOutLights() {
$('.lights-overlay').css('background', 'rgba(1, 1, 1, 1)');
$('.lights-overlay').css({ opacity: 0.9 });
$('.lights-overlay').css('visibility', 'visible');
$('#previewPlayer').addClass('zout');
}
function hideOverlay() {
$('.lights-overlay').css({ opacity: 0.6 });
$('.lights-overlay').css('visibility', 'hidden');
$('#previewPlayer').removeClass('zout');
}
jwplayer("previewPlayer").setup({
playlist: [{
file: "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"
}],
width: 720,
aspectratio: '16:9',
autostart: true
});
http://codepen.io/simsketch/pen/eBwqmV

jQuery fieldselection replaceSelection doesn't works for me

hi this is the simple jquery fieldselection plugin.
/*
* jQuery plugin: fieldSelection - v0.1.1 - last change: 2006-12-16
* (c) 2006 Alex Brem <alex#0xab.cd> - http://blog.0xab.cd
*/
(function() {
var fieldSelection = {
getSelection: function() {
var e = (this.jquery) ? this[0] : this;
return (
/* mozilla / dom 3.0 */
('selectionStart' in e && function() {
var l = e.selectionEnd - e.selectionStart;
return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
}) ||
/* exploder */
(document.selection && function() {
e.focus();
var r = document.selection.createRange();
if (r === null) {
return { start: 0, end: e.value.length, length: 0 }
}
var re = e.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
}) ||
/* browser not supported */
function() { return null; }
)();
},
replaceSelection: function() {
var e = (typeof this.id == 'function') ? this.get(0) : this;
var text = arguments[0] || '';
return (
/* mozilla / dom 3.0 */
('selectionStart' in e && function() {
e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
return this;
}) ||
/* exploder */
(document.selection && function() {
e.focus();
document.selection.createRange().text = text;
return this;
}) ||
/* browser not supported */
function() {
e.value += text;
return jQuery(e);
}
)();
}
};
jQuery.each(fieldSelection, function(i) { jQuery.fn[i] = this; });
})();
i can't understand why doing this the selected text in textarea element is not replaced.
$('.wysiwyg-editor-italic').live('click',function(){
var _selection = $('.wysiwyg textarea').getSelection().text;
var wcode = "";
if(_selection){
$('.wysiwyg textarea').replaceSelection("{italic}"+_selection+"{/italic}");
console.log(_selection);
}
else{
wcode = "{italic} italic {/italic}";
}
var wysiwyg_val = $('.wysiwyg textarea').val();
$('.wysiwyg textarea').val("").val(wysiwyg_val+wcode);
$('.wysiwyg-preview').html(wysiwyg_val);
$('.wysiwyg textarea').focus();
refresh_preview()
});
in console i can see _selection which is ok but after that is not replaced ... maybe i'm missing up somenthing?

Unfortunately, it seems to be a bug on the library.
I was also affected by this bug. Everything detects and works very well, except the replaceSelection() part. I've ended up using Rangyinputs. Someday when I have free time I will try to fix this bug on Fieldselection and pull request.

Please can you make a fiddle to show the problem? try the new version of library: https://github.com/nikolasmagno/jquery-fieldselection/
I'm sure it'll work