I have an iframe to a third party system and which, when called, updates a database record and then displays a confirmation message. I'd like to change the text of the confirmation using jQuery, but cannot seem to get it working. This is the code I have so far. The call to the third party system works but the replacement text doesn't appear. Any pointers, please? Thank you.
<script type="text/javascript">
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return ''; }
return results[1] || '';
}
var lidval = $.urlParam('lid');
var cidval = $.urlParam('cid');
var cyidval = $.urlParam('cyid');
//construct url
var crmurl ='http://somerandomhost.com/Portal/index.php?task=unsusbscribe&lid='+lidval+'&cid='+cidval+'&cyid='+cyidval;
jQuery(function($){
$('#crm').attr('src', crmurl);
});
</script>
<iframe frameborder="0" id="crm" scrolling="no" width="100%" src=""></iframe>
<script type="text/javascript">
function($){
$('crm').replaceWith('Replacement text goes here');
};
</script>
if you want to show the string into the irframe try this:
PURE JS:
var doc = document.getElementById('crm').contentDocument;
doc.body.innerHTML = 'Replacement text goes here';
jQuery:
var doc = $('#crm')[0].contentDocument;
$(doc.body).html('Replacement text goes here')
To change content of an iframe you can Try below code
var ifr = $('#crm')[0].contentWindow.document,
ifbody = $('body',ifr);
ifbody.html('Replacement text goes here');
Related
I've been trying to show a graph inside a WordPress Template.
It works fine with this format:
<iframe height="500" src="https://datasource.com/fantom/0xf704f5ac5edf152168e07e6f5f108366911250ac?embed=1&theme=dark&trades=0&info=0">
</iframe>
But I can't seem to make it work in a template using dynamic metadata.
<script>
function ShowGraph() {
var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
var Network = RawNetwork.replace(/<[^>]*>/g, '');
var RawAddress=document.getElementById("TokenAddress").innerHTML;
var Address = RawAddress.replace(/<[^>]*>/g, '');
const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
document.getElementById('TokenGraph').src = Graph;
}
</script>
<iframe height="500" id="TokenGraph" src="" onLoad="ShowGraph();"></iframe>
I hope somebody can help me figure out what I'm missing here.
Cheers mates!
There is a loop.
Onload you are changing the src and then onload fires again.
try
<script>
window.onload = function () {
var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
var Network = RawNetwork.replace(/<[^>]*>/g, '');
var RawAddress=document.getElementById("TokenAddress").innerHTML;
var Address = RawAddress.replace(/<[^>]*>/g, '');
const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
document.getElementById('TokenGraph').src = Graph;
}
</script>
<iframe height="500" id="TokenGraph" src=""></iframe>
I am using TypeForm and need to autofill utm fields from javascript, everything works except I cant get the html created from the script to show on the page. I am embedding the below code in a html/js module in a clickfunnels page. Any help is very much appreciated.
<div id="typeform"></div>
<script>
//<div id="typeform"></div> <div id="row--27712"></div>
window.onload = function(){
var source = "utm_source=1";
var medium = "utm_medium=2";
var campaign = "utm_campaign=3";
var content = "utm_content=4";
var keyword = "utm_term=5"
var HTMLA = '<div data-tf-widget="mYH43Dz4" data-tf-iframe-props="title=TFS - ANALYTICSDEV V1.1" data-tf-medium="snippet" data-tf-hidden=';
var HTMLquote = '"';
var HTMLcomma = ',';
var HTMLB = '" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js">';
var HTMLC = '</'
var HTMLD = 'script>'
var form = HTMLA.concat(HTMLquote).concat(source).concat(HTMLcomma).concat(medium).concat(HTMLcomma).concat(campaign).concat(HTMLcomma).concat(content).concat(HTMLcomma).concat(keyword).concat(HTMLB);
var form2 = form.replaceAll("undefined","");
document.getEIementById('typeform').innerHTML = form2;
};
</script>
You can pass custom values to hidden fields like this:
<div id="typeform"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
var source = '1';
var medium = '2';
var campaign = '3';
var content = '4';
var keyword = '5';
window.tf.createWidget('mYH43Dz4', {
container: document.getElementById('typeform'),
hidden: {
utm_source: source,
utm_medium: medium,
utm_campaign: campaign,
utm_content: content,
utm_term: keyword
}
});
</script>
In case you already have those values in your host page URL, you could use transitive search params feature:
<div
data-tf-widget="mYH43Dz4"
data-tf-transitive-search-params="utm_source,utm_medium,utm_campaign,utm_content,utm_term"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>
Your code does not work because you are adding script tag via innerHTML. This script tag will not execute for security purposes:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0
Our website uses Wordpress, and we pull our job openings from the software using an iFrame. The iFrame query requires us to get the job "code" from the URL (e.g. xyz.com/job-details/jobcode=11568).
The vendor has provided javascript that is supposed to do this, but it does not work. When the page loads the src just outputs as src(unknown)". The iframe should read as src="https://evoportalus.tracker-rms.com/COMPANY/jobs?fields=title,location&filters=Reference|<<the jobcode pulled from the URL>>
Can anyone help?
<script type="text/javascript">
loadSite();
</script>
<iframe src="" frameborder="0" scrolling="yes" width="700" height="700" id="trmsjobs"></iframe>
<script type="text/javascript">
var getQueryString = function (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function loadSite() {
var site = "https://evoportalus.tracker-rms.com/LincolnStrategic/jobs";
site += "?fields=title,location&filters=reference|" + getQueryString("jobcode");
document.getElementById('trmsjobs').src = site;
}
</script>
On Edit
Apologies, I don't think my original explanation was clear enough. The getQueryString variable seems to work; it outputs just fine. The issue is that the "site" variable is not being inserted into the SRC value in the iFrame, which is what this script is supposed to do.
Tweak your code to move the function call into the same block and change var functionName = function syntax to function functionName syntax
<iframe src="" frameborder="0" scrolling="yes" width="700" height="700" id="trmsjobs"></iframe>
<script type="text/javascript">
loadSite();
function getQueryString (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function loadSite() {
var site = "https://evoportalus.tracker-rms.com/LincolnStrategic/jobs";
site += "?fields=title,location&filters=reference|" + getQueryString("jobcode");
console.log(site);
document.getElementById('trmsjobs').src = site;
}
</script>
You can split the string with "/", then look for each component for the parameter you want, splitting this time with "=". Not a clean solution, but works:
var getQueryString = function(field, url){
var ret=null;
url.split("/").forEach(function(v){
var s=v.split("=");
if(s.length>1 && s[0]==field){
ret=s[1];
return;
}
});
return ret;
}
OK,so I am trying to pull some data from an api. The problem that I have run into is that I am able to find out the information that I am looking for, but am having trouble getting that information out of the console and onto my main index.html page.
Here is my JS code
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
$.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
console.log(info);
});
});
});
Here is my html code
<div id="search">
<h1>API Test</h1>
<input type="search" id="search-keyword">
<button id="myBtn">Try it</button>
</div>
<div id="results"></div>
By doing this, I am able to get pretty much what I am looking for. However I cannot get the data from the console to the actual page.
I have tried appendChild
var bob = document.getElementById(results);
var content = document.createTextNode(info);
bob.appendChild(info);
I have tried innerHTML
var theDiv = document.getElementById(results);
theDiv.innerHTML += info;
..and I have tried .append()
$('#myBtn').click(function() {
$(results).append(info)
})
I'm out of ideas. I realize that I probably have a small problem somewhere else that I am not seeing that is probably the root of this. Much thanks to anyone who can help me with this issue.
"results" needs to be in quotes with regular javascript and for jquery you have already decalred the results variable.
var theDiv = document.getElementById("results");
theDiv.innerHTML += info;
$('#myBtn').click(function(){
results.append(info)
})
Also since you are declaring results outside of your document ready call you have to make sure you html comes before the javascript.
<script>
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
var resultedData = $.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
return info;
});
var resultDiv = document.getElementById("results");
resultDiv.innerHTML += resultedData;
});
});
</script>
I am passing values within a url to an iframe - on a coldfusion website. However, the iframe isn't appearing on the page. I have a method that I have used on a previous website, non-coldfusion, and this works perfectly - which leads me to believe that the issue is caused by the site being coldfusion. I have no experience with ColdFusion.
Hopefully, if I show you the code I am using to pull in the iFrame and values, somebody may be able to help me out - which would be greatly appreciated....
<script language="javascript">
function gup(name){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return ""; else return unescape(results[1]);
}
function prepare() { document.getElementById('EMAIL_FIELD').innerHTML = gup('email');
var email = gup('email');
document.getElementById('FIRSTNAME_FIELD').innerHTML = gup('firstname');
var firstname = gup('firstname');
document.getElementById('LASTNAME_FIELD').innerHTML = gup('lastname');
var lastname = gup('lastname');
document.getElementById('COUNTRY_FIELD').innerHTML = gup('country');
var country = gup('country');
document.getElementById('frame').innerHTML = "<iframe src='http://webe.emv3.com/tennisexpress/pref_center/Tennis_SP.html?email="+email+"&firstname="+firstname+"&lastname="+lastname+"&country="+country+"' width='750' scrolling='no' height='1000' frameborder='0' ></iframe>";
}
The body tag has the following onLoad function:
<body onLoad="javascript:prepare();">
and the iFrame is called as:
<div id="frame"></div>
if you use the following url, you will see that the iFrame is not shown:
http://www.tennisexpress.com/newsletter_signup.cfm?email=grozanski#emailvision.com&zipcode=11206&source=homepage&firstname=Gary&lastname=Rozanski&country=ny
Am I missing something obvious? Can anyone recommend any changes?
Firebug shows a JavaScript error:
document.getElementById("FIRSTNAME_FIELD") is null
[Переривати на цій помилці] documen...IELD').innerHTML = gup('firstname');
Possibly it's the reason of iframe not being created.