JS acees variable another HTML - javascript

I'm actually trying to access variable of other HTML file using JS.
I mean, I have a file (file1.htm) that open dialog box and I would like to send information of the file selected to another file (file2.htm) and modify a value in this file. I found solution but only for JS files, and not HTML :/
I had already done it with 2 files but file1a was the parent of the other, so I used
parent.framWin = window; in file2a and
framWin.divX=document.getElementById("one").offsetWidth; for example in file1a to modify the variable divX in file2a (I'm pretty sure this is not the best solution, but it works ;) ). Here, in this case, file1 and file2 are not parent, and they are just located in the same folder.
I tried <script type="text/javascript" src="file1.htm"> to access var but it doesn't seem to work.
Do you have any idea how I can accomplish this?
Thanks a lot!
(Here's my code :
file1.htm :
<!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>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function OK(e){
var name = document.getElementById("dialog").value;
//Here I would like to do something like File2.NameSpace1 = name;
//And File2.modifyMyName(); // But here, it's another question, to use JS script in another file ;)
}
//-->
</script>
</head>
<body >
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile' onchange="OK()" id="dialog">
</form>
</body>
</html>
and file2.htm:
<!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>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
<!--
var NameSpace1;
function modifyMyName(){
document.GetElementById("first").src = NameSpace1;
}
//-->
</script>
</head>
<body>
<div>
<img src ="" id="first" />
</div>
</body>
I know this won't work properly because there are some errors here in the syntax. But the problem is visible ;)
Thanks again :)

You can't simply modify the content of file on the server using client side code.
The examples you've cited just change the data that is loaded into the browser at the time the code runs while leaving the data on the server untouched.
There are two approaches you can take to this:
Store the changes in the browser.
In page one, use localstorage to record information about the change you want to make. (You'd probably want to convert the image into a data: scheme URL to achieve this given your example code).
In page two, have some more JS that reads from localstorage and uses that information to make the change to itself after it loads.
Send the changes to the server.
Submit a form (so you don't need to use client side code at all) or use Ajax to send information about the change to the server.
Have server side code read it and then store it in a session (if you want the change to be on a per-user basis) or somewhere more permanent (in a database if you are sensible but you could modify the file directly) (if you want it to be shared between users).
Page two would then be a server side program that would read that data and use it to generate the page.

You can use localStorage to perform this operation.
function OK(e){
var name = document.getElementById("dialog").value;
window.localStorage.setItem('dialogValue', "Name");
}
And In your file2.html
function modifyMyName(){
var NameSpace1 = window.localStorage.getItem('dialogValue');
document.GetElementById("first").src = NameSpace1;
}

Related

How to retrieve item from another localStorage Domain?

I'm working on a JAVA web application which plays the role of a search engine. Its backend is developed with AngularJS. And I have a small PHP code which tries to send a data from an input text to the JAVA web app via an iframe. the data is stocked in a localStorage.
Here is below the PHP Code :
index.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>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
function redirect(){
var toSearch = document.getElementById('wordToSearch').innerHTML;
console.log("toSearch : ", toSearch);
localStorage.setItem('wordToSearch', 'bdd');
window.location.href = "http://localhost:8050/searchEngine/#/search";
}
</script>
<form action="http://localhost:8050/searchEngine/#/search">
<input type="text" name="word" id="wordToSearch">
<input type="submit" value="Search" onclick="redirect()">
</form>
</body>
</html>
Precisely, I'm trying to retrieve the "wordToSearch" item value stored within the localStorage
Here is below the code where i add my iFrame to my application :
<iframe src='http://localhost:8040/test/index.php'></iframe>
This is the result i get in the developer tools :
Developer Tools Result
Can anyone help me please ?
So TL;DR, you're saying you want JavaScript code running on a page whose origin is http://localhost:8050 to access the localStorage for origin http://localhost:8040 (or vice-versa)?
You can't do that. Web storage is specific to the origin, which includes the port.
You can do it using cookie, set value to http://localhost:8050 and get value from http://localhost:8040. Visit https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Developing webpage with Webiopi on a raspberry Pi

I'm a noob and new to web-development and i'm overwhelmed with the multitude of languages. I got the basic understanding on whats going on but I still don't know where I am getting stuck.
I have a DS18B20 connected to my Raspberry Pi and I am able to fetch the temperature in the terminal. I am running the WebIOPi successfully as well and able to see the temperature in its default web page under Devices. So I was hoping to create my own web page that would do the exact same thing with other options for future. I got a hold of some tutorials on WebIOPi and i got 4 files. An HTML file, the JavaScript file, the CSS file and a Python file. In my understanding the HTML file contains the logic and links to other things like clickable buttons and backgrounds etc. The CSS file contains the background and maybe text, the JavaScript file contains animation and buttons? Here I get confused. Last but not least the Python file is what runs the code that contains sensor model and libraries. I configured the Webiopi config file with my sensors serial number as mentioned here: http://webiopi.trouch.com/OneWireTemp.html. I am loosely trying to follow this tutorial where I got most parts of the code: http://webiopi.trouch.com/Tutorial_Devices.html.
Now when I log into the webpage from my browser the background is displayed correctly, but nothing else. There is no box or button showing the temperature. Pictures are attached. I was hoping for a button like attached in the picture.
Any guidance or help would be appreciated!
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
bacon.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
bacon.css
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
script.py
import webiopi
GPIO = webiopi.GPIO
AUTO = True
def loop():
if (AUTO):
tmpwebiopi.deviceInstance("tmp")
celsius = tmp.getCelsius()
print ("Temperature: %f" % celsius)
webiopi.sleep(1)
I do not know about your specific case, but to me it seems quite obvious that there is nothing to see here. You have been mixing up things quite a bit.
To clarify things
The HTML contains the logical structure of your website
the CSS contains the look and feel (design)
the JavaScript and the Python files contain (UI)-Logic
This is quite coarse and might deviate, but it should suffice as a start and should apply here.
The obvious errors in your code
The HTML file is incomplete. It should not stop in the middle of the script-section, there should be markup defining the buttons you want to display. Currently there is none, hence there is nothing to see (but the HTMl-body, which is added automatically - and since the background color is defined for the body it is displayed)
The JavaScript file does not actually contain JavaScript, but HTML, which is most likely not correct
At the moment all your JavaScript is located within the script-section of your HTML file. This is fine as long as your are just trying to work it out, but renders a separate JS-file useless at the moment.
All in all your HTML file should look more like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
</script></head>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
My Current code that is WORKING but with minor style problems.
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#temp_disp").text(data + "°C");
}
</script></head>
<body>
<div align="center">
<button id="temp_disp" />
</div>
</body>
</html>
.CSS
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Current view of the webpage!

How to create a click counter that saves data in txt file even when refreshed

I also want the link to actually work; right now just runs the javascript I want it to run that plus go to the webpage. I would like for the data to be saved to a text file. Please Help!
Here is code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
//Would like the link to redirect to webpage too.
<p>
Click Here
</p>
<p id="p2">0</p>
<script type="text/javascript">
var count = 0;
function countClicks() {
count = count + 1;
document.getElementById("p2").innerHTML = count;
}
</script>
</body>
</html>
Cookies store data locally even when refreshed. If you want to store something simple like a number in the browser, I'd recommend using cookies. Mozilla have got them well documented here: https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Cookies.
You'd want to set the cookie after setting the innerHTML, set the value to count. Then when the browser is refreshed, or onLoad(), read the cookie and set it's value to count and it will start off from there.
Despite what you may have heard, cookies are not dangerous, they are just a small file, only a few bytes, with a name, value and expiration date. They are simple to implement but they are not permanent, the user can delete or edit cookies. Hopefully this is what you are looking for.

JavaScript object properties are "sometimes" undefined

I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!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=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.

How to get scripts to fire that are embedded in content retrieved via the jquery load() method?

I have found several other questions here on S.O. (and the web in general) that ask roughly this same question, but the answers always seem to suggest other ways of structuring code that avoid the need for addressing this underlying issue.
For example, many people suggest (and a good suggestion, I agree) to put your code in the jquery load method's callback, on the calling page and not the called page. However I have unique scripts that may appear in certain resources, so I would not want to do that for every load and nor do I necessarily know what these scripts will be.
Here is a test setup to demonstrate what I'm trying to do. The short summary is that when I load partial.htm from main.htm, its script does not fire.
main.htm:
<!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=iso-8859-1" />
<title>main file</title>
</head>
<body>
<ul id="links">
<li>some page1</li>
<li>some page 2</li>
<li>some other partial page</li>
</ul>
<div id="panel" style="display:none; padding:20px; background-color:#CCC;">
LOADED CONTENT WILL GO HERE
</div>
<script type="text/javascript" src="/path/to/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$('#links a').click(function() {
var $panel = $('#panel');
$panel.show();
$panel.html('Please wait...');
var href = $(this).attr('href');
$('#panel').load(href + ' #content');
return false;
});
});
</script>
</body>
</html>
OK, very simple functionality on this page. Imagine there are many more links, and some of them may require scripting while others do not.
Here is partial.htm:
<!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=iso-8859-1" />
<title>partial file</title>
</head>
<body>
<div id="content">
<p>Hey, I am the partial file!</p>
<script type="text/javascript">
alert('I am some JS in the partial file! But sadly I do not execute...');
</script>
</div>
<div>
I am some other content on the page that won't be included by jquery.load()...
</div>
</body>
</html>
Notice that my script in partial.htm does not fire. So, my question remains: how to get this to fire, excluding any answers that tell me to put this in the .load() method's callback. (This would be because I may not have the fore-knowledge of which scripts these partial pages may contain or require!)
Thank you!
Update #1:
I suppose an acceptable answer is simply "you can't." However, I'd like to know if this is definitively the case. I haven't been able to find anything that officially states this yet.
Also, when I use firebug to inspect the panel region afterwards, there is no script element present at all. It is as if it is being parsed out by load.
Update #2:
I've narrowed this down to be a problem only when using the selector as part of the href. Loading the entire "somepage.html" will execute the script, but loading "somepage.html #someregion" does not.
$panel.load('somepage.html'); // my script fires!
$panel.load('somepage.html #someregion'); // script does not fire
I'm going to try and hunt down why this may be the case in the jquery source...
Well it seems that this is by design. Apparently to make IE happy, the rest of us suffer. Here's the relevant code in the jquery source:
// See if a selector was specified
self.html( selector ?
// Create a dummy div to hold the results
jQuery("<div/>")
// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))
// Locate the specified elements
.find(selector) :
// If not, just inject the full result
res.responseText );
I'm wondering if, instead of just stripping out the scripts, I could modify the jquery source to include them in some other way that makes IE happy? I still have yet to find anything else on the web discussing this matter, I'm sure I'm not the only person stumped by this?
I have run across issues before with IE not running injected <script>s that didn't contain the defer attribute. This discussion thread has some good information about the topic: innerHTML and SCRIPT tag

Categories

Resources