innerHTML not recive his cookie title - javascript

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>

Related

Programmatically add javascript in html page

I'm trying to build an HTML page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setup(){
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
var myscript = 'function BtnClick(){alert("DoTest()");}';
eval(myscript);
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</head>
<body id = "myBody" onload="setup()">
</body>
</html>
But onclick cannot find function BtnClick().
Any ideas?
The eval() function evaluates or executes an argument
create BtnClick() function separate as below
function BtnClick(){
alert("DoTest()");
}
function setup() {
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
document.getElementById("myBody").innerHTML = mydesign;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body id="myBody" onload="setup()">
</body>
</html>
It is possible to write js functions directly into the onclick attribute
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body id = "myBody" onload="setup()">
<script type="text/javascript">
function setup(){
var mydesign = "<button onclick="+'alert("hello")'+">Click me</button>";
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</body>
</html>

Refresh part of parent when child window closes

Page 1: tabeloverzicht.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabel overzicht</title>
<link href="../css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../css/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$.get(
'tabel.php',
function(response){
$('#tabelplaats').html(response);
}
);
});
$(window).click(function(event){
$.get(
'tabel1.php',
function(response){
$('#tabelplaats').html(response);
}
);
});
});
</script>
</head>
<body>
<div id="tabelplaats">
</div>
</body>
</html>
Page 2: tabel.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/templatemo_style.css" rel="stylesheet" type="text/css" />
<title>Tabel Processor</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,h eight=500,left = 200,top = 200');");
}
// End -->
</script>
</head>
<body>
<table>
<tr>
<th>Hallo</th>
<th>dit</th>
<th>is</th>
</tr>
<tr>
<td>een</td>
<td>test</td>
<td><div id="modify" class="buttonsmall"><button id="BedrijfAanpassen" class="button" name="modify"><i class="icon-pencil icon-small"></i></button></div></td>
</tr>
</table>
</body>
</html>
Page 3: Tabel1.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/templatemo_style.css" rel="stylesheet" type="text/css" />
<title>Tabel Processor</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=500,left = 200,top = 200');");
}
// End -->
</script>
</head>
<body>
<table>
<tr>
<th>Test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>
Page4: popup.php
Doesn't matter whats on this page.
Tabeloverzicht is the main page. Here is a table displayed. This table containes a button which opens a popup window (in my application you can change some values of the table in the popup window) When the popup is closed he needs to update the table in the parent window. window.opener.reload(true) doesn't work for me as there are many other options on the main page which will be reset then aswell. I only need to update the top table.
Further in my application there will be a second table and depending on which popup window is opened he needs te refresh either the first or the second table.
Hope anyone can help, as I'm stuck with this problem for days now...
Thanks in advance!
In my opinion you will need to have an callback function in the main page and inside that you can do whatever ...
for example :
index.html
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=500,left = 200,top = 200');");
}
// End -->
function callback_top(){
console.log("callback_top()");
}
</script>
</head>
<body>
<button onclick="popUp('pop.html');">Press me</button>
</body>
</html>
pop.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
// solution 1
function calltop(){
window.opener.callback_top();
}
// solution 2
window.onbeforeunload = function(){
window.opener.callback_top();
}
</script>
</head>
<body>
<button onclick="calltop();">Press me 2</button>
</body>
</html>

Javascript position of onchange assignment

I have a checkbox and a text input. I want that the text input is only enabled if the checkbox is checked. I found an answer to this problem here, but the following code did not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
However, I noticed that the code works if I move the < script > environment below the < input > boxes like that
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</body>
</html>
Why does the position of the < script > environment play a role for the onchange attribute?
That's because the page is parsed from the top, and each element is added as soon as it is parsed.
When the script tag has been parsed the code will run right away. At that time the input tags hasn't been parsed, so the input elements doesn't exist yet.
By placing the script tag below the input tags, the script runs after the input elements has been created.
Instead of rearranging the code, you can use the onload event to make sure that the code runs after the page is completely parsed:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>

Changing JWPlayer video onClick

This is what I have so far below. If I hard code the file: media/video2.mp4 in the function it works but when I make it a variable its not passing it through correctly because I keep get this error:
Error loading player: No playable sources found
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JWPlayer</title>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").setup({
file: " + filename + ",
height: 360,
width: 640,
});
jwplayer('video').load();
}
</script>
</head>
<body>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
file: "media/video1.mp4",
height: 360,
width: 640
});
</script>
<p>Play Video 2</p>
</body>
</html>
It is because you are placing variable filename in the script as a string literal.
just change this line
file: " + filename + ",
to
file: filename,
and it will work fine!

Shadowbox (js) as a popup

I'm playing with shadowbox and I want to launch it when user's landing on the index page of my web site.
I can use the shadowbox like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
My Image
</body>
</html>
I tried to make a onload function but it doesn't work (I can't set the link to the picture on it?):
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {onPageLoad()});
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clemz</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup
skipSetup: true
});
window.onload = function() {
// open ASA the window loads
Shadowbox.open({
content: '<img src="image.png" alt="alt" />',
player: "html",
title: "Welcome dude",
height: 502,
width: 350
});
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Works proprely ;-)

Categories