use of globalstorage is deprecated. please use localstorage instead - javascript

I got this message when doing some javascript programming, and after some google searches, I have no idea what it means, or how i cause this error. I'm including the code below, can someone explain it to me or point me to a resource on how to fix it or what is happening at all? The weird thing is that I have other code just like this part in my program, and it never gives me errors about them, so i'm really confused. Also, I only get this error to display with firebug running, else wise it just doesn't work and no error message is displayed. I also tried it in Chrome, and had the same issues, no error message but the code doesn't work.
foundTextFn = function(){
console.log('fire');
if (foundTextArrayPosition != foundTextArray.length){
writeText(foundTextArray[foundTextArrayPosition],"happy");
foundTextArrayPosition += 1;
}
foundTextFnTimer=setTimeout("foundTextFn()",4000);
}
Here is another of my methods, it is basically the same thing, but it works fine. And if it matters, all of these variables are global variables declared at the start of my file as var foundTextArrayPosition = 0; for example.
awayFn = function(){
if (awayArrayPosition != awayArray.length){
if (changeAwayState){
changeAwayState = false;
writeText(awayArray[awayArrayPosition],"normal");
awayArrayPosition ++;
temp = pickRandomSpot();
randomX = temp[0];
randomY = temp[1];
}
else{
changeAwayState = true;
}
awayTimer=setTimeout("awayFn()",10000);
}
else{
abandoned = true;
whyGoneArrayPosition = 0;
whyGoneFn();
}
}

This is a deprecation error in Firefox 9. globalstorage was a way to store data in Firefox, but HTML5 introduced localstorage, which is now the preferred way (using window.localStorage).
https://developer.mozilla.org/en/DOM/Storage has more information.

I got the same error message and found a solution and perhaps the underlying cause of conflict, I was using the jQuery validate function in the jzaefferer.github.com/jquery-validation/jquery.validate.js library along with jQuery 1.7.1
The problem:
I used $(document).ready with two different contexts. One with the noConflict wrapper and one without. By keeping both the same, the error message went away. Hooray!
The wrapper:
jQuery.noConflict();
jQuery(function($) {
$(function() {
$(document).ready(function() { ...}
});
});
See also this post on my blog.

Probably not related to the issue above but I will put it here for the search engines.
I got the same error message while doing some simple jQuery:
Use of globalStorage is deprecated. Please use localStorage instead.
[Break On This Error]
$(document).ready(function() {
It was however due to forgetting to actually include the link href to the jQuery.js file...!

Related

RequireJS and IE9

I've tried to find the solution in previous questions but i couldn't.
I have a web project developed in jquery using requireJS. Everything seems to work fine (in all modern browsers) until i tested in IE9 where there isn't a script working. I tried to find the cause but all i can get is the feedback from dev tool console:
SCRIPT1002: Syntax error libCommon.js, line 10 character 3
SCRIPT445: Object doesn't support this action libEvents.js, line 5
character 2
This is the beginning code of libCommon.js:
//generic JS for all views
define(['jquery'], function ($) {
var LibCommon = function () {};
LibCommon.prototype.hideSubmenu = function() {
$submenu.removeClass('show');
}
LibCommon.prototype.toggleSubmenu = function(tipo) {
const $tipoSubmenu = $('#'+tipo);
this.hideSubmenu();
if (!$tipoSubmenu.hasClass('show')) {
$tipoSubmenu.addClass('show');
} else {
$tipoSubmenu.removeClass('show');
}
};
//and other functions...
And this is the beginning code of libEvents.js:
//generic JS for all views
define(['jquery', 'bootstrap', './libCommon', 'modernizr'], function ($, Bootstrap, LibCommon, Modernizr) {
var common = new LibCommon();
/**
* =================
* TO EXECUTE WHEN INIT
* =================
*/
$( document ).ready(function() {
console.log('initialized all common events');
var common = new LibCommon();
// Fixed header
var stickyNavTop = $('.topmenu').offset().top;
common.fixedNav(stickyNavTop);
$(window).scroll(function() {
common.fixedNav(stickyNavTop);
});
// and other functions or events...
In both errors it's first character of creating a variable/instance of an object after defining all objects/dependencies in requireJS, so it shouldn't be an error. I tried by changing for var common = 0; but error continues appearing in console. It seems that IE9 doesn't like any script. Otherwise, require's instances are working because bootstrap is working properly. Any idea?
Shilly already pointed out in a comment that you should not pass ES6 constructs to IE9. Either write ES5 or use a tool to transpile it.
Now, the error you are getting in libEvents is bizarre because libCommon should not have loaded at all, and consequently the factory of libEvents should not run because one of the dependencies did not load. It is possible to have a module load and later give errors. But I don't recall ever seeing a syntax error in the immediately-interpreted code of a module that did not just cause the load to fail. (The code you are showing is interpreted immediately, even if it is executed later. If you had an eval(string_of_code) in there or a Function(string_of_code) then string_of_code would be interpreted later but this is not something that happens in your code.) I suspect the reason RequireJS goes ahead with executing the factory for libEvents has to do with a problem catching load failures in IE9 and lower. The documentation suggests turning on enforceDefine. I would do this for your code. This won't solve everything but it may help RequireJS detect problems better.
console.log will also probably give you troubles, as explained by this question and answer.

Javascript variable undefined in IE until console displayed

I have a small piece of code for a template project I'm working on. There are three separate buttons, that point to three separate locations. In order to make it easier for content providers, I have these buttons calling minimal routines to load the next page.
The code is as follows:
/* navigation functions here for clarity and ease of editing if needed */
prevURL = 'ch0-2.html';
nextURL = 'ch2-1.html';
manURL = 'ch1-2.html';
function prevPage() {
window.location = prevURL;
}
function nextPage() {
window.location = nextURL;
}
function goManager() {
window.location = manURL;
}
This works perfectly in Firefox and Chrome, but seems to fail in Internet Explorer.
I open up the developer tools in IE (F12) and am presented with the message:
SCRIPT5009: 'manURL' is undefined
The location information (line 43, character 13) points to the "window.location = manURL" part of the code.
However, once the developer tools are open, if I hit F5 to reload the page, the button works without error until I close IE and reopen it, where it once again fails to respond and gives the same "undefined" error.
I'm baffled. Anyone have any ideas?
UPDATE
I know the variable declaration is poor, and that I can use window.location.href instead. What is relevant here is that the other two pieces of code, which are identical in all of these significant ways, work perfectly either way.
epascarello has put me on the right track. by removing all console.log commands, everything starts working. I'm just wondering why this happens, and would like to be able to give epascarello credit for helping me.
IE does not have console commands when the developer window is not open. So if you have them in there the code will not run. It will error out.
You can either comment out the lines or add in some code that adds what is missing.
if (typeof console === "undefined") {
console = {
log : function(){},
info : function(){},
error : function(){}
//add any others you are using
}
}
Try setting
window.location.href
instead of just window.location.
Source:
http://www.webdeveloper.com/forum/showthread.php?105181-Difference-between-window.location-and-window.location.href
Always define variables before using them ,being explicit (expressing the intention) is a good practice,
so define your variables like this,
var prevURL = 'http://google.com';
var nextURL = 'http://msn.com';
var manURL = 'http://stackoverflow.com';
You can try using
window.location.href
refer to this post for difference
Suggestion:
Make a jsfiddle.net for us so we could guide you easily

Retrieving jQuery.data() values from within setInterval

I've been stuck on this problem for a while now. I'm using jQuery's .data() method to store state in a plugin I'm writing. Everything works fine, except for when I try to retrieve these data values from within a setInterval block. I am able to see the jQuery object inside the setInterval block, but I'm not able to see values stored by the data() method.
tminusStart: function() {
return this.each(function() {
var $tminus = $(this).data("tminus.state", "running");
var intervalId = setInterval(function(tm) {
if ($tminus.tminusIsRunning()) {
$tminus.tminusDecrementCounter();
$tminus.data("tminus.settings").tick_event();
if ($tminus.tminusTimeRemaining() <= 0) {
$tminus.data("tminus.settings").expiration_event();
}
$tminus.text(tminus.tminusTimeRemaining);
}
else {
clearInterval(intervalId);
}
}, 1000, $tminus);
});
}
In the above code, the $tminus does return the jQuery object alright, but the calls to the functions - which are calling the .data() method - return undefined; so does the .data("tminus.settings") call.
Any help in understanding why .data() isn't working here would be greatly appreciated.
Rewrite of function removing cruft:
tminusStart: function() {
var tminus = this;
tminus.data("tminus.state", "running");
return this.each(function() {
console.log(tminus.data("tminus.state")); // "running"
var intervalId = setInterval(function() {
console.log(tminus.data("tminus.state")); // undefined
}, 1000);
});
}
I need to know why it's undefined in the setInterval block
What are tminusIsRunning and tminusDecrementCounter? Did you mean to call that under $tminus? Unless you're extending jQuery, those calls are going to error out. If you're using Chrome, check the Javascript Console, you should see something like: "Uncaught TypeError: Object [object Object] has no method 'tminusIsRunning'"
.data() doesn't work with xhtml + IE (see note in docs).
Alternatively, This looks like a jQ extension, so watch out for that. jQuery has a (IMO) bad habit of aliasing this all over the place. Make sure you don't have a dependency on this being something different than what it is. I suggest installing firebug and using console.log to log this in both the place where you set the value, and where you access it. If it's not the IE issue, I suspect this would locate it.
Finally figured it out. I'm using jasmine to test drive this and the jasmine-jquery library has a fixtures piece which I'm apparently not using correctly. I tested the code in a webpage and everything is now working according to plan. Now I just have to make sure all my tests are passing.
I won't accept my own answer since I didn't provide the necessary information to begin with. I appreciate everyone's time on this. I really wish I could have accepted someone's answer.

How to check if 'debugger;' keyword exists?

Sometimes some developers forgot to remove debugger; in javascript code, and it produce javascript error on IE.
How can you check (like for the console: if(window.console){console.log('foo');}) if a debugger exists?
BTW: I don't want to detect if the browser is IE, I want a generic method if possible
Thanks,
You cannot.
The best solution would be adding a hook to your version control system to prevent code containing debugger; statements from being committed/pushed.
Asking your devs to search for debugger; or at least have a careful look at the diff before committing is also a solution - but not as effective as hard-rejecting in the VCS.
You could attempt to compile a function that declares debugger as a local variable. If debugger is reserved as a keyword, the JS engine will throw an error which you can catch.
var debuggerIsKeyword = false;
try {
new Function("var debugger;");
} catch(e) {
debuggerIsKeyword = true;
}
However I'm not sure that knowing whether a keyword exists or not is actually helpful.
Maybe the safest approach is to have a global include file for all your projects that stubs out the debugger if it doesn't exist:
if (typeof debugger == 'undefined') {
window.debugger = null;
}
That way calls to debugger just become a reference to null. which is harmless. Seems like a better approach than expecting forgetful developers to wrap each debugger call in an if statement.
The same approach works for console.log, etc.
EDIT: As AndrewF points out, debugger is actually a keyword, not a global, so this won't work. The same effect can be achieved using the following without throwing an error:
window['debugger'] = null;
Haven't tried it for lack of an IE, but this should work:
if (typeof console !== 'undefined') {
console.log("logging enabled");
}

Javascript error

I'm getting a JS error on displaying a page: Nothing concrete is specified but the line where it seems to be thrown. When looking into the source code of the page, I see the error is thrown inside the following script, but I can't understand why! It's only about loading images!
<SCRIPT language=JavaScript>
<!--
function newImage(arg) {
var rslt = new Image();
rslt.src = arg;
return rslt;
}
function changeImages(a, b) {
a.src = b;
}
newImage("\/_layouts\/images\/icon1.gif");
newImage("\/_layouts\/images\/icon2.gif");
// -->
</SCRIPT>
The error I am getting is when clicking on a drop down context menu on a page, for this line:
newImage("\/_layouts\/images\/icon1.gif");
The object doesn't accept this property or method
Code: 0
I really don't see what could happen... Any tips on what may be happening here?
Have you tried loading your scripts into a JS debugger such as Aptana or Firefox plugin like Firebug?
Why are you escaping the forward slashes. That's not necessary. The two lines should be:
newImage("/_layouts/images/icon1.gif");
newImage("/_layouts/images/icon2.gif");
It is hard to answer your question with the limited information provided:
You are not showing the complete script
You never said what the exact error message is, or even what browser is giving the error.
Which line number is the error supposedly coming from?
I'd recommend using Firebug in firefox for debugging javascript if you aren't already. IE tends to give bogus line numbers.
And as others have already said, the language attribute for script tags is deprecated.
Write proper xml with the " around attributes.
<script type="text/javascript">
function newImage(arg) {
var rslt = new Image();
rslt.src = arg;
return rslt;
}
function changeImages(a, b) {
a.src = b;
}
newImage("/_layouts/images/icon1.gif");
newImage("/_layouts/images/icon2.gif");
</script>
should your script block not be:
<script type="text/javascript">
?
For starters, start your script block with
<script type="text/javascript">
Not
<script language=JavaScript>
That's probably not the root of your problem, but since we can't see your script, that's about all we can offer.
You probably need to enlist the help of a Javascript debugger. I've never figured out how to make the various debuggers for IE work, so I can't help you if you're using IE.
If you're using Firefox or you CAN use Firefox, make sure you have a Tools / Javascript Debugger command. (If you don't, reinstall it and be sure to enable that option.) Next, open up the debugger, rerun the problem page, and see what comes up.
How are you calling changeImages? It looks as though you are not saving a reference to the images returned by newImage. You probably want to save the results of newImage and pass that to the changeImages routine. Then changeImages should look like this:
function changeImages(a, b) {
a.src = b.src;
}
You also may want to ensure that the images have finished loading before calling changeImages.
You've posted the routine that throws the error, without posting the error or showing us how you are calling it. If none of the answers posted fix your problem then please post some detail about how you are calling the method, which specific line the error is on, and what the error message is.
You firebug to debug.
http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US
https://addons.mozilla.org/en-US/firefox/addon/1843
JSLint is also a nice resource.
http://www.jslint.com/
Using CDATA instead of the <!-- // -->
http://www.w3schools.com/XML/xml_cdata.asp
<script type="text/javascript">
<![CDATA[
]]>
</script>

Categories