Dynamically load a JavaScript library and call - javascript

Try dynamically load a JavaScript library.
And I got error - alertify is not defined. I have HTML code with libraries (alertify). I can't insert it to iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/alertify.min.js"><\/script>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/alertify.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/semantic.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/bootstrap.min.css"/>' +
'<p>Text 2</p>' +
'<script>alertify.success("Success message");<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
Sample with jQuery.
I got error:
$ is not defined.
I have HTML code with libraries (jQuery). I can't insert it to iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>$("p").remove();<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>

this should work, try loading the jquery dynamically then when the onload is called it can fire your custom code. see my example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>' +
'var el = document.createElement("script"); ' +
'el.src = "https://code.jquery.com/jquery-3.4.1.js"; ' +
'el.onload = function(){ ' +
' $("p").remove(); ' +
'}; ' +
'document.getElementsByTagName("body")[0].append(el);' +
'<\/script>'
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
here is the script itself (uncoded, easier for you to understand):
<script>
var el = document.createElement("script");
el.src = "https://code.jquery.com/jquery-3.4.1.js";
el.onload = function(){
// Put your code here that needs jquery.
$("p").remove();
};
document.getElementsByTagName("body")[0].append(el);
</script>

Related

How can I make a button that shows a hidden image

I am a beginner and have created a piece of code that displays an image picked from a folder of images. I would like some help creating some code that will:
- Hide the image when you first visit the page
- Include a button that, when pressed will show the image
Any help would be greatly appreciated and I will include my code (so far) below.
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<title>random image?</title>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
</body>
</html>
You can initially hide the image with CSS in the style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<style>
img{
display:none;
}
</style>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by typing it directly in the inline style attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by calling a JavaScript function when the page loads (at the risk of the image flashing on screen before it's hidden):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function hideImage(){
document.getElementsByTagName("img")[0].style.display = "none";
}
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body onload="hideImage();">
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
If I were to do this myself, I'd do it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script src="https://randojs.com/1.0.0.js"></script>
<style>
#myImage{
display:none;
}
</style>
<script>
function showImage(){
var image = document.getElementById("myImage");
if(image.style.display != "inline-block"){
image.src = rando(1, 42) + ".jpg";
image.style.display = "inline-block";
}
}
</script>
</head>
<body>
<img src="" alt="Random image" id="myImage"/>
<button onclick="showImage();">show</button>
</body>
</html>
The "rando" function is sourced from a tool called rando.js that I use to simplify randomness in javascript and make it more readable. It's not a native JavaScript function, so I source it in with this line:
<script src="https://randojs.com/1.0.0.js"></script>
Everyone has their own style. Pick the technique that works best for you.

javascript for loop issue

Issue I am having is as follows: This for loop should be putting a number in the address and counting up to 152 and then putting it full address as follows
<img src="http://pokeapi.co/media/img/1.png">
<img src="http://pokeapi.co/media/img/2.png">
and so on. What am I missing?
var webaddress = ['<img src="http://pokeapi.co/media/img/">'];
var text = "";
var i;
for (i = 0; i < 152; i++) {
text += webaddress[i] + ".png";
}
document.getElementById("Pokeman").innerHTML = text;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
</body>
</html>
You can create the webaddress as root string and replace it inside loop
var webaddress = '<img src="http://pokeapi.co/media/img/[index].png">';
var text = "";
for (var i = 1; i <= 152; i++) {
text += webaddress.replace("[index]", i);
}
document.write(text);
You are setting your javascript in the head - but the element that is referenced (#Pokeman) is not in the DOM yet - simply move the js block to the end - before the closing body tag. and since you are using jquery - i simplified the js and used it too.
EDIT - I just inserted your img code into the function so that it will render the images as the number increments.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
$(document).ready(function(){
for (var i = 1; i <= 152; i++) {
$("#Pokeman").append('<img src="http://pokeapi.co/media/img/'+ i + '.png"/>');
}
})
</script>
</body>
</html>

From javascript external file cannot get id from HTML file and replace content

HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="index.js"></script>
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
External JavaScript Code:
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
Note:
1. If i use a function call, it works.
2. If i write the script within the HTML file, it works as well.
3. I used jsfiddle, it displays perfectly fine.
Can anyone help me with this issue?
I think HTML was not loaded yet. Use onload attribute on body to ensure DOM is loaded :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var myFunction = function() {
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
</script>
<title>Design All</title>
</head>
<body onload="myFunction()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
One thing you have to be clear is that HTML loaded sequentially.
In your code
...........................
<script src="index.js"></script>
................
....................
<h1 id="test">Should this change?!</h1>
Here the JavaScript loaded first then the remaining html.
As the JavScript will execute when it is loaded for the way you write it, it will not find the later html tags. So it will not get that element (<h1 id="test">Should this change?!</h1>).
But if you load the JS later then it will work as expected.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
<script src="index.js"></script>
That's why experts suggest to load JS at the end.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
<script src="index.js"></script>
</head>
<body onload = "chng()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
index.js
// JavaScript
function chng(){
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}

jquery accordion not initializing with dynamic creation not sure why

I'm trying to initialize jquery accordion plugin dynamically from a rest ajax query. There is no console error just doesn't actually accordion the data.
I'm not quite sure what is wrong because im not that good with jquery. Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>TheWayWardJourney</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollzer.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
</noscript>
<script>
function updateMessages() {
var mess = $.getJSON( "http://10.0.0.6:3000/page_contact?read=neg.no&username=eq.zukeru&order=time.desc", function() {
console.log( "success" );
})
.done(function( data ) {
var html_insert = '<div id="accordion">'
var stats = ''
//console.log(data);
console.log( "second success" );
$.each( data, function( i, item ) {
html_insert = html_insert + '<h3>From: ' + item.name + '" </h3>' + '<div><p>Email: ' + item.email + '</p>' + 'Message: ' + item.message + '</p></div>';
});
document.getElementById("messages").innerHTML = html_insert + '</div>';
})
setTimeout(function(){ updateMessages(); }, 10000);
}
updateMessages();
</script>
</head>
<body>
<section id="mess" class="four">
<div class="messaged">
<header>
<h2>Messages</h2>
</header>
<p id='messages'></p>
</div>
</section>
</body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</html>
One issue: you are calling
$(function() {
$("#accordion" ).accordion();
});
before your ajax request has completed, and therefore no accordi. $("accordion").accordion(); needs to be called after
document.getElementById("messages").innerHTML = html_insert + '</div>';
// call accordion function here
$("#accordion" ).accordion();

innerHTML not recive his cookie title

I got two files, one file called "TitleLinkCookie.html",when I click on some link are creates a cookie named "NewTitle" . with value innerHTML in our case, "Hello world php 1"/2/3.and is working well. The second file called "showCodePhp.html", it is needed to receive the cookie title and display it in h3 tag id="TitleField", innerHTML, from some reason it is not working as I want. Thanks for any help.
TitleLinkCookie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<META NAME="Description" CONTENT="Guide,Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript, jQuery,Html5,Framework,php,photoshop,design" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Link guide</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<STYLE type="text/css">
a { color:red; margin:5px; cursor:pointer; }
a:hover { background:yellow; }?
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
$('a').each(function() {
$(this).click(function() {
var varibaleTitle=$(this).html();
setCookie(varibaleTitle);
});
});
function setCookie(varibaleTitle){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+1);
var NewTitle = varibaleTitle;
document.cookie = "NewTitle=" + NewTitle + ";path=/;expires=" + expireDate.toGMTString();
alert(varibaleTitle)};//end function setCookie
});// document ready
</script>
</head>
<body >
<p><a id="link1" href="showCodePhp.html" >Hello world php 1</a></p>
<p><a id="link2" href="showCodePhp.html" >Hello world php 2</a></p>
<p><a id="link3" href="showCodePhp.html" >Hello world php 3</a></p>
</body >
</html>
showCodePhp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<!--<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>-->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
str2 = "Your Title is : " + str;
}//end reedCookie
});// document ready
</script>
</head>
<body style="background: white; font-family: Helvetica">
<p>Back to Home</p>
<p><h3 id="TitleField"></h3>Title : </p>
<pre class="brush: php;">
<?
// Hello world in PHP
print("Hello World");
?>
</pre>
<body>
</html>
You stated that you need to change the innerHTML of the HTML element "TitleField" but actually you didn't set it!.
I modified you script to set it below :
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
$("#TitleField").html("Title :"+ str );
}//end reedCookie
});// document ready
</script>

Categories