Develop Reference

display clickable Amazon image links from JAVA to HTML

have a simple calculation that if the selected 2 radio is true it will display the correct link to the div where you can find it. the link is now clickable and opens the right website/URL thanks to User: imvain2 who helped with some of the code. Now when I put an Amazon link in it, it only displays the URL and not the Amazon affiliate clickable Image link.
<div id="DisplayResults"></div>
function create_link(url, target_obj){
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = url;
a.href = url;
target_obj.appendChild(a);
}
function Selectport() {
var aOpticalin = document.getElementById("aOpticalin");
var aOpticalout = document.getElementById("aOpticalout");
var astereoout = document.getElementById("astereoout");
var astereoin = document.getElementById("astereoin");
var DisplayResults = document.getElementById("DisplayResults");
if(astereoout.checked && aOpticalin.checked){
create_link(<iframe style="width:120px;height:240px;" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0" src="//ws-
na.amazon-adsystem.com/widgets/q?
ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=
US&source=ac&ref=
tf_til& ad_type=product_link&tracking_id=whatsmycable-
20&marketplace=amazon&region=US&placement=B01HGHNCMW&asins=
B01HGHNCMW&linkId=
f3759832fc138a941ade9bde6128b083&show_border=
true&link_opens_in_new_window=
false&price_color=333333&title_color=000000&bg_color=d1d1d1">
</iframe>,DisplayResults);
}
}

That function was originally created based on simply creating a link from a URL. If you would like to append actual precreated HTML, you can use innerHTML.
Make sure to wrap your code in single quotes (apostrophes) if your code has double quotes in it.
DisplayResults.innerHTML += 'Your iframe code goes here';

How to create dynamic Uikit modal [Joomla]

I want to have one modal, only with content changing. In modal im showing articles via iframe. The problem is that my solution is a bit laggy, and you can see previous article before changing. Im using JS:
function switchTitleMod1(title,id) {
document.getElementById("titleMod1").innerHTML = title;
document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component";
}
The modal code:
<div id="informacje" class="uk-modal">
<div class="uk-modal-dialog" >
<a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a>
<div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Zapisz si? na kurs</h2></div>
<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0">
</iframe>
<div class="uk-modal-caption">Copyright by MRP-KODER</div>
This is how i call the modal:
<a onclick="switchTitleMod1('Szkolenia HACCP','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary"> <i class="uk-icon-info uk-icon-justify"></i>Informacje</a>
My question is: How to create modal via Jquery and only adding deleting DOM. Link to the page: link
Via clicking "Informacje" You will see what the problem is.

I found solution by myself :) I didint use DOM model, but it works fine, for using diffrent modals only by changing button id.
var $jq = jQuery.noConflict();
$jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal);
function open_info_modal(e)
{
var articleId = $jq(e.target).data('id');
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">');
},
'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
function open_ask_modal(e)
{
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">');
},
enter code here'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}

Modify XML RSS Feed for Windows 8 using JavaScript

Currently making a Windows 8 RSS reader app for a specific site. Everything is working except for video [usually YouTube] since the website uses <object></object> to embed videos rather than <iframe>. the result is just a large blank object block where ever the video should be.
My first instinct was to find and replace the <object></object> tags with <iframe> and add the src attribute with the proper URL. I created a dummy app to test if this method would work, and the solution worked, if all you were changing was static HTML.
Dummy App Code:
<body>
<div style="text-align: center;">
<object width="853" height="480" id="test">
<param name="movie" value="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
</object></div>
Wrote and called the below function, which does indeed work. Want to do something similar to the XML document:
function setHTML5video() {
var listOfSrcs = document.getElementsByTagName("embed");
for (var i = 0; i < listOfSrcs.length; i += 1) {
var videoSrc = document.getElementsByTagName("embed")[i].getAttribute("src");
var newSrc = videoSrc.replace("/v/", "/embed/");
//var newNode = '<iframe width="853" height="480" src="' + newSrc + '" frameborder="0" allowfullscreen></iframe>';
var iFrame = document.createElement("iframe");
iFrame.setAttribute("src", newSrc);
document.getElementsByTagName("object")[i].replaceNode(iFrame);
//WinJS.Utilities.setOuterHTMLUnsafe(test, newNode);
}
}
End of Dummy App Code.
However, due to lack of knowledge of the Windows 8 API and despite searching all day for the answer online, I cannot find how to do the same to an XML feed that is being downloaded from an external site. I am probably missing something fundamental.
function itemInvoked(z) {
var currentArticle = articlesList.getAt(z.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
mainTitle.innerHTML = currentArticle.title;
WinJS.UI.Animation.enterPage(articlecontent);
}
When the user clicks on a thumbnail, the XML RSS feed for that corresponding article is pulled up and injected into the with the id = "articlecontent". I want to modify that feed prior to injecting it.
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: mmoNewsPosts.ItemList.dataSource, itemTemplate: MMOItemTemplate }"></div>
<!-- Article Content -->
<div id="articlecontent"></div>
<!-- Article Content -->
</section>
Edit, because there appears to be confusion, I already have the feed loaded in via WinJS.xhr:
function downloadMMOFeed(FeedUrl) {
WinJS.xhr({ url: FeedUrl, responseType: "xml" }).then(function (rss) {
pageTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = pageTitle;
var items = rss.responseXML.querySelectorAll("item");
//more stuff...
for (var n = 0; n < items.length; n +=1) {
article.content = items[n].querySelector("description").textContent;
//more stuff...

Could you not just load the XML feed in by XHR and then parse the result before binding it to the page? For Example:
WinJS.xhr({
url: "http://www.w3schools.com/xml/note.xml", responseType: "xml"
})
.done(
function (request) {
var text = request.responseText;
//TODO : Parse the XML returned by the server which is in var text
});
In Windows 8 there is no cross domain restriction so something like this is entirely possible.

Capture incoming URL Parameters, then pass to iFrame Src with Javascript

So trying to figure out how to do this with window.location in Javascript. I'm sending users to our site with an appended URL with a Google Analytics code that I need to pass to an iframe src on that page. I'd assume Javascript could do this (note - I cannot use PHP)...
This is what I want to do:
I'd send users to the page with all the campaign data in tact. For example a user would click on this link:
http://www.xyz.com/index.html?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click
They would be directed to that page, that then has this iFrame on it. The code on the store side would need to pick up utm_source, utm_campaign, utm_medium and include these parts in the IFRAME SRC So this bit:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis"></iframe>
now becomes:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click"></iframe>
Any javascript suggestions would be greatly appreciated. Note - I cannot use PHP.
UPDATE:
Got this to work!! Yay, but now I need to edit it a bit:
So say the appended url that was clciked was this:
http://abc.com/index.html?apple&orange&peach
and I need the iframe src to be this
http://xyz.com/minis?orange&peach
I moved a few things around in the script, but is now only grabbing orange and not the other & attribute (peach). please advise if there is a better way to work (without have all the params and then depending on what link comes in, some of the & will be undefined:
<body>
<script type="text/javascript">
$(function() {
var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
params6 = loc.split('&')[6],
iframe = document.getElementById('myIframe');
alert(iframe.src);
iframe.src = iframe.src + '?' + params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
alert(iframe.src);
});
</script>
<iframe id="myIframe" src="http://www.xyz.com/minis"></iframe>
</body>

This little snippet should do, here all you have to do is grab the bit after ? as a string and append it to the iframe source.
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById('myIframe');
iframe.src = iframe.src + '?' + params;​​​​​​​​​​​​​​​​

Just use window.location.search.
const iframe = document.getElementById('frame');
iframe.src = iframe.src + window.location.search;​​​​​​​​​​​​​​​​

Passing javascript variable from iframe to URL

Lets say I have a function like this:
<script type="text/javascript">
function ReturnURL()
{
var url = document.URL;
var url2 = url.split("=");
var urlID = url2[url2.length-1];
//window.open('http://localhost/POSkill/skillshow.aspx?user_id =' + urlID);
return urlID;
}
</script>
And I also have iframe in my html file which is something like below:
<iframe id="showSkill" scrolling="yes" src="http://localhost/POSkill/skillshow.aspx?user_id = ReturnURL()" height="350" runat="server" ></iframe>
Now all I want to do is to send the urlID value of javasrcipt as the user_id value in iframe. I have tried by using user_id = ReturnURL() but its not working.
How can I do this?
Thanks in Advance.

I answered something very similar at enter link description here
The answer is that you must set the "src" value on the JS rendering.
This means that somewhere in your javascript you should have the following code
...
document.getElementById("showSkill").src="http://localhost/POSkill/skillshow.aspx?user_id =" + ReturnURL()
...
This should work just fine.