Change iframe content with Bootstrap button click and jquery - javascript

I would like to change iframe src url from bootstrap button click.
The javascript code works with traditional button, but something goes wrong when I use the same code to change the iframe with jquery:
(I also would like the iframe to get random at page load)
bootstrap element (html page)
...
<div class="col-md-6">
<a class="btn btn-primary" id="randomize">sekvanta ekzerco</a>
</div>
<div>
<iframe id="question" src="url0" width="275"
height="650" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>
...
<script src="application.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
application.js
var sources = new Array()
sources[0] = 'url0'
sources[1] = 'url1'
sources[2] = 'url2'
sources[3] = 'url3'
var p = sources.length;
$(document).ready(function(){
var randomSource = Math.round(Math.random()*(p-1));
$('#question').attr('src', 'sources[randomSource]');
}
$('#randomize').click(function() {
var randomSource = Math.round(Math.random()*(p-1));
$('#question').attr('src', 'sources[randomSource]');
}

You can remove the single quotes from sources[randomSource] as the browser will interpret it as a literal rather than evaluate the expression.
$('#question').attr('src', sources[randomSource]);
Full snippet:
var sources = new Array()
sources[0] = 'url0'
sources[1] = 'url1'
sources[2] = 'url2'
sources[3] = 'url3'
var p = sources.length;
$('#randomize').click(function() {
var randomSource = Math.round(Math.random()*(p-1));
console.log(sources[randomSource]);
$('#question').attr('src', sources[randomSource]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="randomize">
Click me
</button>
<div id="question">
</div>
JSFiddle demonstrating the Bootstrap version.
https://jsfiddle.net/fz6yythy/

Related

how to print QR Code with jquery/javascript

I wanna print only QR code div instead of full page. can anyone help me.
here is my code:
<div id="qrcodeCanvas"></div> //Generating QR in this div
<a id="Html2Image" href="#qrcodeCanvas">Download</a>
<a id="mydiv" href="javascript:void(0);" onClick="PrintDiv();" >Print</a>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<script>
function PrintDiv()
{
}
</script>
<script>
var id = 'Content';
$('#qrcodeCanvas').qrcode(id);
var canvas = $('#qrcodeCanvas canvas');
var img = $(canvas)[0].toDataURL("image/png");
$("#Html2Image").attr("download", "QR_Code.png").attr("href", img); //Downloading QR image
</script>
thanks in advance.
I had the same problem and came accros this sollution
<!DOCTYPE html>
<html>
<body>
<div id="printableArea">
<div id="qrcodeCanvas"></div>
</div>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<input type="button" onclick="printDiv('printableArea')" value="print a qr!" />
</body>
</html>
Credits: asprin
#ImmanuelNL's answer should work, but it will nuke everything. Event handlers, any references to elements in code, everything will be broken.
Instead, consider this nondestructive approach:
var tmp = document.createDocumentFragment(),
printme = document.getElementById('printableArea').cloneNode(true);
while(document.body.firstChild) {
// move elements into the temporary space
tmp.appendChild(document.body.firstChild);
}
// put the cloned printable thing back, and print
document.body.appendChild(printme);
window.print();
while(document.body.firstChild) {
// empty the body again (remove the clone)
document.body.removeChild(document.body.firstChild);
}
// re-add the temporary fragment back into the page, restoring initial state
document.body.appendChild(tmp);

How to preload image using javascript in razor syntax?

I have tried in the following way for image preloading using JavaScript
<script type="text/javascript">
function preloader() {
heavyImage = new Image();
heavyImage.src = "../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg";
}
</script>
<body onload="javascript:preloader()" >
<a href="#" onmouseover="javascript:document.img01.src='../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg">
<img src="../../Images/index.jpg" name="img01" />
</a>
But not getting any idea.How can i call JavaScript function in HTML .And how can i use preloaded images for further processing.I am trying it in asp.net mvc 3 Razor
<script>
var preloadImages = [
'#Url.Content("~/Content/img/firstImage.jpg")',
'#Url.Content("~/Content/img/secondImage.jpg")',
'#Url.Content("~/Content/img/thirdImage.jpg")',
],
images = [];
for (var i = 0; i < preloadImages.length; i++){
var img = new Image();
img.src = preloadImages[i];
images.push(img);
}
</script>
Which you could place in the <body> of your document (anywhere).

Use JavaScript variable as iframe src?

I'm trying to use a JavaScript variable as the src in a <iframe>, the user will then be able to load other content by choosing scr in a menu, which changes the variable. the default src URL is apps/start.php.
Here some code from my index.php:
<script>
var appurl = "start.php";
document.getElementById("app").src = "apps/" + appurl();
</script>
<iframe id="app" src="">
</iframe>
The problem is that i can't get this first small part working... The <script> tag is in the <head>. And when the src is changing will the new document automatically load?
Wait for the page to load (note that this is only going to work when the iframe is on your domain)
window.onload = function(){
var appurl = "start.php";
document.getElementById("app").src = "apps/" + appurl;
};
The problem is that the Javascript is run before the iframe is there. Put your javascript below your iFrame or inside the document ready and it will work.
Example document onload:
<script>
window.onload = function ()
{
var appurl = "start.php";
document.getElementById("app").src = "apps/" + appurl();
}
</script>
<iframe id="app" src="">
</iframe>
<script>
window.onload = function ()
{
var appurl = "start.php";
document.getElementById("app").src = "apps/" + appurl;
}
</script>
<iframe id="app" src="">
</iframe>
Try
<script>
window.onload = function(){
var appurl = 'start.php';
document.getElementById("app").src = "apps/" + appurl;
};
</script>

Jquery solution for loading a map from another .aspx?

Trying to achieve a Jquery print template (C# ASP.net) which gets my map from my Default.aspx and appends it to a print page (Print.htm) whereby I can edit the HTML. so far...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>
<script type="text/javascript">
$(document).ready(function() {
$("#Printbtn").click(function() {
var mapObj = $("MapCell_Map1");
var mapHtmlStr = mapObj.html();
mapHtmlStr = mapHtmlStr.replace(/CURSOR: crosshair; /g, "");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].keyFocus=true;", "");
$.ajax({url:"print.htm", context: document.body,
success: function(response){
var printDoc = $(response);
printDoc.find("#mapPanel").html(mapHtmlStr);
var pwin = window.open("Print.htm");
var pdoc = window.document.open();
pdoc.write(printDoc.html());
pdoc.close();
});
return false;
});
});
</script>
Doesn't fire, just posts back after the button click...
<asp:Button runat="server" id="Printbtn" Text="Print" Forecolor="white"/>
Print.htm page...
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="MapPanel">
</div>
</body>
</html>
If the Html you want to add is static you could load a separate Html file into memory and then add the dynamic Html to the hidden div before writing contents to the new window
jQuery Example (Untested):
function printmap() {
var mapObj = $("#Map1");
var mapHtmlStr = mapObj.html();
// snip - do string replacements as shown in question
$.ajax({url:"print.html", context: document.body,
success: function(response){
var printDoc = $(response);
printDoc.find("#mapPanel").html(mapHtmlStr);
var pwin = window.open("#");
var pdoc = window.document.open();
pdoc.write(printDoc.html());
pdoc.close();
});
}
Further non-jQuery examples of loading Html File in Javascript are shown in this post:

Javascript variable access in HTML

Say I have the following JavaScript in a HTML page
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
</script>
<body>
<a href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
How do I get the value of the variable "splitText" outside the script tags.
Thanks!
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("myLink").innerHTML=splitText;
}
</script>
<body>
<a id="myLink" href = test.html></a>
</body>
</html>
Try this :
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
$("#target").text(splitText);
});
</script>
<body>
<a id="target" href = test.html></a>
</body>
</html>
<html>
<head>
<script>
function putText() {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
document.getElementById("destination").innerHTML = "I need the value of " + splitText + " variable here";
}
</script>
</head>
<body onLoad = putText()>
<a id="destination" href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
In raw javascript, you'll want to put an id on your anchor tag and do this:
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
function insertText(){
document.getElementById('someId').InnerHTML = splitText;}
</script>
<body onload="insertText()">
I need the value of "splitText" variable here
</body>
</html>
Here you go: http://codepen.io/anon/pen/cKflA
Although, I must say that what you are asking to do is not a good way to do it. A good way is this: http://codepen.io/anon/pen/jlkvJ
The info inside the <script> tag is then processed inside it to access other parts. If you want to change the text inside another paragraph, then first give the paragraph an id, then set a variable to it using getElementById([id]) to access it ([id] means the id you gave the paragraph).
Next, use the innerHTML built-in variable with whatever your variable was called and a '.' (dot) to show that it is based on the paragraph. You can set it to whatever you want, but be aware that to set a paragraph to a tag (<...>), then you have to still put it in speech marks.
Example:
<!DOCTYPE html>
<html>
<body>
<!--\|/id here-->
<p id="myText"></p>
<p id="myTextTag"></p>
<script>
<!--Here we retrieve the text and show what we want to write...
var text = document.getElementById("myText");
var tag = document.getElementById("myTextTag");
var toWrite = "Hello"
var toWriteTag = "<a href='https://stackoverflow.com'>Stack Overflow</a>"
<!--...and here we are actually affecting the text.-->
text.innerHTML = toWrite
tag.innerHTML = toWriteTag
</script>
<body>
<html>

Categories