Cross Tab form persistence with javascript - javascript

var name = document.getElementById('name');
name.value = localStorage.name || '';
name.addEventListener('blur', function() {
if ( this.value ) localStorage.setItem('name', this.value);
});
window.addEventListener('storage', function() {
console.log('updated');
}, false);
The code above is copied directly from a Tuts+ Premium course called HTML5 Fundamentals. My problem is that the Javascript is detecting the localStorage update but is not updating the other tab. In the tutorial, it works flawlessly. I do have a suspicion that this is happening because I'm using .value and firefox has issues with that. I'm running on a Ubuntu 13.04 virtualbox using Firefox version 21.0. Thank you
It turns out that I just needed to add "name.value = localStorage.name;" within the "window.addEventListener('storage', function(e) {" and it worked. Thank you

I test this code in Firefox 22 and it works well:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="input"/>
<script>
function onLoad(){
var name=document.getElementById("input");
name.value = localStorage.name || '';
name.addEventListener('blur',function(e){
if (this.value) {
localStorage.setItem('name',this.value)
};
});
window.addEventListener('storage',function(){
console.log('updated');
name.value = localStorage.name;
},false);
}
window.onload = onLoad();
</script>
</body>
</html>
And result is....
First tab:
Second one:
If you have any further question welcome to discuss.

if you want to change input value on another tab edit your storage handler:
name.value = localStorage.name;
instead of
console.log('updated');
works in Chrome 27.0 and FF 21.0 under Ubuntu 12.04
DEMO
(of course you have to open it in 2 tabs to check)

Related

Javascript not reloading page when I switched to Chrome from IE

I have been using this code with IE for sometime to reload a page after 5 seconds of no activity. I cant figure out why it stopped working in chrome.
<script language="JavaScript" type="text/javascript">
<!--
if (document.layers) {
window.captureEvent(onmousemove);
}
document.onmousemove = oreset
var tID = '';
function oreset(){
clearTimeout(tID)
count=0
reloadPage()
}
function reloadPage(){
count++
if(count==5){ // 5 seconds
window.location="/sd/clockin/testclockin.php";
}
tID = setTimeout("reloadPage()",1000);
}
//-->
</script>
I can't tell you why that doesn't work in Chrome, but here's a script that is kind've better overall:
var expirer=setTimeout(expireFunc,5000);
function expireFunc(){
window.location.replace('/sd/clockin/testclockin.php');//or use .href instead if you don't like replace
}
//work around the random chrome bug here
var lastX=0,lastY=0;
window.addEventListener('mousemove',function(e){
//more workaround stuff
if(e.clientX===lastX&&e.clientY===lastY)
return;
lastX=e.clientX;
lastY=e.clientY;
console.log('moved');
clearTimeout(expirer);
expirer=setTimeout(expireFunc,5000);
},false);
I also had to workaround the bug I explained in the comments. http://jsfiddle.net/7cT9U/ is a working example.

Copy a text when a link or button is clicked

I am new to website development and try to figure out how can I make my user automatically copy a code in to his/her mouse(clip board) when clicked on a link (using html, php or javascript). For example, I am trying to create this personal website, when a user click on a link or a button in my website, it should automatically copy that text code to the clip board. I have seen sites like retailmenot.com do this: Example:-
Please show me with an example if you can
Updated:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("#link").click(function(){
var holdtext = $("#clipboard").innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
});
</script>
</head>
<body>
<hr>
Click here to copy the Code <button onclick="copyToClipboard()">Copy Text</button>
<hr>
</body>
</html>
Here is the function which might can help you or future referer.
function copyToClipboard(id) {
var text = $("#td_id_" + id).text(); //getting the text from that particular Row
//window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
Unit test in all Browser not done.
try this.
$("#link").click(function(){
var holdtext = $("#clipboard").innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
});

window.location.replace wtih Phonegap

I try setup a JS function to auto load a index page in a different language, regardig the setting device o my reader.
I try with this...but don't work :
<script src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
function checkLanguage() {
if (navigator.globalization.getPreferredLanguage()='en_EN')
{
window.location.replace("index_en.html");
}
else if (navigator.globalization.getPreferredLanguage()='fr_FR')
{
window.location.replace("index_fr.html");
}
else
{
window.location.replace("index_other.html");
}
}
</script>
Is this method can be use, or do I have to consider other option to deal with my multilanguage app ?
Thanks in advance for any help.
You need to use the callback of getPreferredLanguage:
var handleDeviceReady = function (event)
{
navigator.globalization.getPreferredLanguage(
function (language)
{
console.log("language: " + language.value + '\n');
redirectToLocaleSpecificLogin(language.value);
},
function ()
{
console.log("Error getting language\n");
redirectToLocaleSpecificLogin("en");
}
);
};
document.addEventListener("deviceready", handleDeviceReady, false);
Then inside of your callback (redirectToLocaleSpecificLogin in this case), you can do your redirects.
most of the browsers use language property, IE uses userLanguage
var lang = window.navigator.userLanguage || window.navigator.language;
this should work in IE, SAFARI, CHROME and FF
Edit:
JavaScript for detecting browser language preference this link has more detailed discussion on this topic

check connection javascript

I'm trying to check connect with javascript, but I have trying a lot of tutorials but any works for me.
For example I've this code but not works
<!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
<script>
function updateIndicator()
{
document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> <p>The network is: <span
id="indicator">(state unknown)</span>
</body>
</html>
Some help? thanks.
EDIT: Seems like it was a setup problem, will leave this anyway as it could be useful in cases where ononline and onoffline are not supported.
I am not sure ononline and onoffline are going to be well supported, but you can just set an interval to check for the status and update it accordingly. This little fiddle works (just stop your network connection and the status will switch to offline)
http://jsfiddle.net/vpG5b/1/
You can adjust the interval as needed but 500 ms should be good enough and not be too demanding and I added check to only update the status if it has changed (less DOM manipulations), that way you can even have offline/online handlers.
var handler = {
online: function() {
alert('online');
},
offline: function() {
alert('offline');
}
};
function isOnline() {
var status = navigator.onLine ? 'online' : 'offline',
indicator = document.getElementById('indicator'),
current = indicator.textContent;
// only update if it has change
if (current != status) {
// update DOM
indicator.textContent = status;
// trigger handler
handler[status]();
};
};
setInterval(isOnline, 500);
isOnline();​

the value is not inserting into the textbox, it was working two days ago?

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.val(kv[1]);
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
console.log("clicked");
insertParamIntoField(this, "replyto", $("textarea"));
e.preventDefault();
return false; // prevent default action
});
});
</script>
</head>
<body>
<textarea></textarea>
<a class="reply" href="?replyto=you">TEST</a>
</body>
</html>
what im trying to is when i click the link, the replyto parameter is inserted into the textarea, in this example "you"it was working 2 days ago! i dnt know whats wrong
Edit: I falsely assumed you were using firebug, from comments I see you weren't and that installing it resolved your issue. This line:
console.log("clicked");
Will blow up if firebug isn't installed and always in IE, when testing in an environment without a console, be sure to remove any calls to it...it'll throw a JavaScript error otherwise.
Is your internet connection working ok? You're using jQuery from google API, so what happens if you reference a local version?
Also, what happens when you click: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?

Categories