I am trying to embed a 3rd party chart (Twist) into an HTML page. Also on the HTML page, I am using a text input to allow for a user to dynamically enter new parameters to be sent to Twist.
In javascript, I am attempting to append the text input to the end of the call to the external chart. I cannot, however, figure out how to have the returned JavaScript render in my page.
Let me be more specific... the instructions for embedding the chart are to put a tag into the html. So it would be like below, where 'paramValue' is the value passed to the 3rd party.
<script src='http://twist.flaptor.com/embed?size=large&gram=paramValue&span=168&'></script>
This works fine, but it is hard-coded to search for 'paramValue'. The script returns more javascript that gets embedded into my page and renders a chart. I am trying to make this dynamic by replacing 'paramValue' with the text input from a user. However, I cannot figure out how to send that value and also have the results rendered properly.
Looking at that javascript, it uses document.write(). document.write() writes to the document during loading, but if invoked after the page has been loaded doesn't work well.
In short, you can't do it by just changing paramValue and adding a new script tag.
Try to see if Twist has something for dynamic content.
On behalf of Stu42:
<script type="text/javascript" language="javascript">
var paramValue = GetParamValue();
var url = "<div";
url += '>'
url += "<script src='http://twist.flaptor.com/embed?size=large&span=168&gram=";
url += paramValue;
url += "'";
url += '>';
url += "</script>";
url += "</div";
url += '>';
document.write(url) ;
</script>
Related
Hi,
I am trying to load HTML code and display it on my site based on the URL parameters.
I want it to work like this. My shortcut (Siri Shortcuts) will redirect people to https://example.com/index.html?page=[HTML CODE HERE]. Then the HTML code that is in that URL variable, will display on the site (not the blank text but overwrite the existing code so it will display that HTML page). The problem is I am doing it with this code below.
window.onload = function() {
try {
var url_string = (window.location.href).toLowerCase();
var url = new URL(url_string);
var page = url.searchParams.get("page");
document.write(page);
}
}
It works fine when I want it to output 'test' (https://example.com/index.html?page=test). But when I put the whole HTML code in the url variable, it won't output anything.
NOTE: I am still new to HTML and JS.
document.write wipes the page, script and all. that is Why is document.write considered a "bad practice"?
If you must pass data between pages, pass the data only and update existing code on the new page. So for example have
<p id="test"></p>
on the page and ?pageContent=somecontent in the URL
Then you can do
var pageContent = url.searchParams.get("pageContent");
document.getElementById("test").textContent=pageContent;
instead of ?page=<p id="test">somecontent</p>
Alternative is to call the server for more content using AJAX, and update the page dynamically with that content.
I have multilingual single page html application where I set html of tags by calling function on document.ready. However I am not getting html of any tag in page source when I view page on View Page Source. How can I get the tags in page source? document.ready is in the last script tag of the page.
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
Below function is in js file. This file is added above the last script tag (i.e. document.ready script).
function translateFunction(lang) {
$("[tkey]").each(function (index)
{
var strTr = lang_resource[lang][$(this).attr('tkey')];
$(this).html(strTr);
});
}
<h1 tkey="firstH1"></h1>
Language wise data is in json format in the same js file with translate function.
When I view the page source, I see only
<h1 tkey="firstH1"></h1>
Where it needs to be like below,
<h1 tkey="firstH1">Anything from the translate function.</h1>
On the page, you can see the desired output, but in the page source, I am not getting html set. What I want to do is, I want set html of the tags in javascript on document.ready. How to do it?
EDIT
We want to add meta tags. And set keywords and description language wise. This is the main concern. The keywords and description are set in translate function. Will the crawler take the keywords and description?
We have two links language wise in site map. So when user select say french language, it will redirect to www.mysite.com?lang=fr and all the tags are set in french language. So the meta keywords and description.
Firstly if this is the exact code,
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
there is error in itself...
there should be some value for var lang
The scenario: My company wants to have a "content builder" on our customer portal. Using this content builder, the user can check off their requested content (example: about the company, about our products, etc.)
Once the options are selected, I want to provide the user with a script they can place on their website. When run, the parameters in the script will reach out, call our CMS for the appropriate copy, and return the markup.. which should display within their browser.
My question is.. how do I go about doing this? I know how to get the HTML from the CMS, but how do I write the data back into the DOM? Should I just embed an IFRAME? Can I just write out div tags and such onto the host website? Any advice is appreciated, thanks in advance.
You can create markup to insert into the page.
You could add an id attribute to the script tag that gets embedded into the external site and have them place the script tag exactly where you want the content to appear.
<script id="myscripttag" src="..."></script>
then use some code like below to insert the markup before your script tag.
var insertMarkup = function(){
var scripttag = document.getElementById('myscripttag'),
YOURCONTENT = '<h1>hello</h1>',
//parentNode of script tag
p = scripttag.parentNode,
//new element to hold your content
n = document.createElement("div");
n.id = 'mynewdiv';
n.innerHTML = YOURCONTENT;
p.insertBefore(n,scripttag);
};
While a little bit more about the specific content would be helpful, the basic idea will be to use the innerhtml property of the DOM element into which you will be placing content. For example if you have a div with an id of "contentbox" you could write:
var x = htmlstringfromcms();
document.getElementById("contentbox").innerhtml=x;
if you want to append, rather than overwrite the content of the element try
var x = htmlstringformcms();
document.getElementById("contentbox").innerhtml+=x;
I'm making a Chrome Extension that changes the DOM of a page. But I would like to give the user an option to switch between the page before the changes and the changed page.
It's a little bit like Google translate where you can change between the orginal language and the translated message.
I could not find anything in my own searches.
I know JavaScript but not JQuery yet.
Thanks for the help.
You could save the entire body in a variable, then start overwriting things. If you want to switch back load up the old body.
You could save all the original DOM content to a variable before running the content script. You can do this by using the following code at the top of your content script:
var originalDOM = document.getElementsByTagName("*");
This saves the entire DOM in an array called originalDOM. The * acts a universal tag, requesting every tag in the document. You can read more about the .getElementsByTagName() API here.
You could try:
var html = document.getElementsByTagName("html")[0];
var page = html.innerHTML;
This will give you everything between the <html> tags.
After the content script is injected, run:
var newPage = html.innerHTML;
Now, whenever you want to switch between the pages, simply run:
html.innerHTML = page; //or newPage
You can read more about the .getElementsByTagName() API here
I am running this script within a content page on my ASP.net site.
<script>
$(document).ready(function () {
var satShifts = $('#hidSat').val();
alert("Sat: " + satShifts);
});
</script>
On the page_Load event on the server I have this code:
hidSat.Value = "2";
The variable comes back as undefined in the alert window. I have this same process on the master page with another script and it works flawlessly. Is this an issue because it is a content page?
As far as i know,
if u use asp control in the content page,
the id is prefix with master name by .net compiler b4 render to html page.
So, here is my suggestion:
inspect the output html file with FireBug or Chrome
and see the name of ur hidden field.
if it is different, then u need to assign the id to some variable in JS.
like:
var tmp = '<%=hidSat.CliendID %>';
then,
$(tmp).val();
if it doesn't work, try with .html() method.
it will return all html code within ur hidden field.
Hope it works!
Change the code to below, since hidSat is server control.
var satShifts = $('#<%=hidSat.ClientID#').val();