I have been looking for a solution to below described issue for a few days but I couldn't find anything helping...
I am using Ace editor on 6 different DIVs on a webpage (so I have 6 editors).
Basically everything works fine, I am able to create them, set them up (language mode, soft tabs, etc.) and manage their content once the user is done.
BUT I keep having the same error message in the console "Uncaught ReferenceError: window is not defined". I get it 6 times, 1 per Ace editor on the page.
Here is the JS I am using. divIdsArray is an array containing the 6 DIVs Ids.
function initAceEditorFields()
{
$(document).ready(function(){
for (var i = 0 ; i < divIdsArray.length ; i++){
var l_arr_splitted = divIdsArray[i].split("_");
var l_str_code = l_arr_splitted[2];//Each div id contains either "js" or "html" which i am retrieving here
var l_ace_editor = ace.edit(divIdsArray[i]);
l_ace_editor.setShowPrintMargin(false);
l_ace_editor.getSession().setUseSoftTabs(false);
l_ace_editor.getSession().setTabSize(4);
l_ace_editor.$blockScrolling = Infinity;
if(l_str_code == "js"){
l_ace_editor.getSession().setMode("ace/mode/javascript");
}else{
l_ace_editor.getSession().setMode("ace/mode/html");
}
}
});
}
I am loading the files: ace.js, mode-javascript.js and mode-html.js from the ace package.
I have tried with ace editor builds: "src-min" and "src-min-noconflict" from the github repo and I tested with Chrome, Mozilla and MS Edge but I always get the same error message.
It is strange as everything seems to be working fine (or at least as I want it too). I just don't want to leave these messages in the console when I go to production.
Any help will be greatly appreciated.
Thank you!
Your ace editor must be using web workers somewhere, then some function called inside a web worker is trying to access "window". The code you've shown us has no references to window. Scrutinize your other interactions with ace to see if you ever pass in a function that references "window" or jquery, or any other dependency in the global scope. If not, then the error in the console is outside your control I suspect.
Related
I've a jsp page with tabs. and sometimes an error occurs (when I press a tab) "Cannot read property 'switchToItem' of undefined"
Uncaught TypeError: Cannot read property 'switchToItem' of undefined
at init.__onHeaderClick (packed.js:6102)
at HTMLTableCellElement.<anonymous> (packed.js:1333)
at HTMLTableCellElement.dispatch (jquery.js:846)
at HTMLTableCellElement.eventHandle (jquery.js:722)
as I understand the error happens in packed.js (this is a js-file packed by richfaces of version 4.3.4). I've looked inside this file and found that RichFaces try to find a list of tabs. these tabs are located in property "rf" (element[richfaces.RICH_CONTAINER]), but in moment when I pressed a tab, there was no property.
This bug reproduce in chrome v.57, in version 56 it doesn't reproduce.
Could you help me with some advice, how it can be fixed?
some technical details:
I use xmlns:rich="http://richfaces.org/rich" <rich:tabPanel> tag in my jsp page
in pom.xml <richfaces.version>4.3.4.Final</richfaces.version>
James G, you have a mistake in richfaces.js
richfaces.$$ = function(componentName, element) {
while (element.parentNode) {
var containerId = element.getAttribute(richfaces.RICH_CONTAINER);
if (containerId && containerId !== "" && !!richfaces.COMPONENT_MAP[containerId] && richfaces.COMPONENT_MAP[containerId].component.name == componentName) {
return e.component;
}
else {
element = element.parentNode;
}
}
};
There is no e. You need change it to
...
return richfaces.COMPONENT_MAP[containerId].component;
...
Sorry I don't have the reputation points to make this a comment.
I don't know if google chrome knows about this problem or would be willing to fix it. Our response to this is to patch RichFaces 4.3.7.Final javascript to not use the adhoc dom element property but a global map instead and then deploy our own richfaces jar to our production environment at the end of the month (after testing). I don't have to ability to deploy this to central repo but if you wanted to see the direct changes I made you can see my commits (https://github.com/JamieGHamilton/core). If chrome fixes the problem then this won't be an issue but I'm not counting on that.
So far the changes I made work perfectly in chrome (and other browsers)
Update: I've included the fix found by dennyDarko - thanks for this. My understanding is that the Chrome 58-beta doesn't produce this behavior so for some affected apps, the admins may choose to wait.
This might he an issue of Chrome 57. Try Chrome 58 Beta.
I had the same issue with Richfaces 4.5.17.Final and Chrome 92.
Additionally there was the following log message:
<jsf.non_displayed_message> <WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.), detail=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.)]>
So changing body to h:body in the main XHTML file has resolved the issue.
And h:head contains <h:outputScript name="jsf.js" library="javax.faces"/>
I am trying to load sounds through the SoundJS sound registration, and getting the following error:
createjs.js:15 Uncaught Error: Type not recognized.
I figure that the soundjs library is having issues either locating my files or having trouble with the file extensions, but I am using .ogg, which is inline with all the examples I've seen.
Here is my code:
createjs.Sound.alternateExtensions = ["mp3", "ogg"];
createjs.Sound.on("fileload", function(event) {
console.log(event);
}, this);
for (var i = 0; i < soundManifest.length; i++) {
soundManifest[i].loaded = false;
console.log("loading " + soundManifest[i].src);
createjs.Sound.registerSound(soundManifest[i].src, soundManifest[i].id)
}
soundManifest is an array of objects with a source item giving the path to the .ogg files, and an id. I've double and triple checked the path names, so pretty sure that's not it. Any ideas? I am developing on Chrome.
Thanks for posting a github link. It was helpful. Fortunately, I have a super simple answer for you.
Rename the "Object" class you made in Main.js, and you should be good to go.
-- The long answer --
I tossed a breakpoint the error that is thrown, and it showed that when SoundJS tries to create a LoadItem, it fails. This is because it should be treating the LoadItem it receives as an Object, but the line below is failing:
} else if (value instanceof Object && value.src) {
// This code should be executed
}
At first I thought there was a bug in SoundJS that we had somehow missed in the last 2 years, but closer inspection showed that object prototypes in your application are messed up. If you open any browser window, and hit the console, this will return true:
({}) instanceof Object
// true
However while running your app, it returns false.
The issue became clear when I removed all your other classes other than CreateJS and main, and then tried this:
new Object();
// Throws an error that includes info about "Victor"
In main.js, you are defining an "Object" class, which extends a CreateJS Shape. It is global because there is no method closure around the code, so it overwrites the global Object class/prototype.
The reason I included this explanation, is because I couldn't figure out what was going on until I had my steps to show that prototypes were broken in the app mostly written out before the reason dawned on me. I thought it might be of some interest :)
I am having some issues with a class project. Every thing was working fine and dandy up until the current part we are on. Basically, we had to add prototypes and cases to move to each location. Now my code will not work, and the teacher is about as helpful as a pet rock. I have two parts to my code, the html (which has part of the code including items and such) and the .js file that includes the locations.
I have created a repository on Github so it is easily accessible to all who want to help. At this point it is too late to submit to my professor, but I am curious on what I did wrong.
https://github.com/EmeraldX/Project-Help/tree/master
The main and directions.js are the files that I am currently working with.
Thanks!
Update: Okay, so it's still not working, and when I use Chrome's console it just tells me that:
function updateDisplay( message ) {
var textArea = document.getElementById("introduction");
textArea.value = message + "\n\n" + textArea.value;
Cannot read property 'value' of null
I tried opening your html page and js using firefox, and used the firebug consol to see if anything was wrong.
It looks like you have an ) missing in your js:
SyntaxError: missing ) after argument list directions.js:7:145
And it was right:
locations[2] = new Location(2,"Lake","A large lake that is formed by a river flowing from the East.",
new Item(1,"Fish","An old rotting fish.");
is missing a ')'
After correcting it, it appear that you miss this ) line 7, 9, 13 and 14.
Then a new error pop up:
ReferenceError: Item is not defined directions.js:7:2
This can be corrected by calling your direction.js AFTER you js script in main.html.
Hope it can help
My app is loading an external javascript file with jQuery.getScript(). When I use the bookmarklet or an extension to start the app everything works fine. When the app is installed through KBX though inside Chrome with the KBX extension the included functions inside the javascript file are not accessible in the callback anymore and I get : Uncaught ReferenceError: myfunc is not defined .
Is there any trick to get access to the included functions?
Bookmarklet : javascript:(function(){var d=document;var s=d.createElement('script');s.text="KOBJ_config={'rids':['a1135x30']};";d.body.appendChild(s);var l=d.createElement('script');l.src='http://init.kobj.net/js/shared/kobj-static.js';d.body.appendChild(l);})()
Chrome extension : crx
url for installation via KBX : app on KBX
Here is the ruleset:
ruleset a1135x30 {
meta {
name "test_external_js_loading"
description <<
debugging external loading in kbx
>>
author "loic devaux"
logging on
}
dispatch {
domain ".*"
}
global {
}
rule first_rule {
select when pageview ".*" setting ()
// pre { }
// notify("Hello World", "This is a sample rule.");
{
emit <|
$K.getScript('http\:\/\/lolo.asia/kynetx_debug/js/myfunc.js',function() {
myfunc();
/*
* myfunc.js content:
myfunc = function(){
console.log('running myfunc');
};
*/
}
);
|>
}
}
}
I'm not completely sure that your issue has to do with the sandboxed environment that the KBX runs your code in but I think it might. Here is a post I wrote about dealing with the sandboxed environment of the KBX http://geek.michaelgrace.org/2011/03/kynetxs-new-sandboxed-browser-extensions/
From blog post
I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed.
Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment.
How I did it…
If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box
$("#new-tweet").trigger("click");
From within the Firefox sandbox I can access the page outside of the sandbox
window['$']("#new-tweet").trigger("click");
If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )
var trigger_click_script = document.createElement("script");
var fallback = "window['$']('#new-tweet').trigger('click');";
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.
// get stuff to retweet
var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
// build tweet
var retweet = "RT #"+name+" "+tweet;
// open new tweet box
$("#new-tweet").trigger("click");
// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {
window['$']("#new-tweet").trigger("click");
}
// put tweet in new tweet box
$K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
$K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
// hack for chrome sandbox
if ($("#tweet-dialog:visible").length === 0) {
var fallback = "window['$']('#new-tweet').trigger('click'); ";
fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
var trigger_click_script = document.createElement("script");
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
}
Another thing that you can do to make your stuff accessible outside of the sandbox is the declare your stuff at the window level (defeats the purpose of the sandbox, and not recommended). For example: if you want to perform a console.log, whilst inside the sandbox, the console.log won't log to the window console. But, if you say window.console.log, it will. So, you could (but shouldn't) declare a var the following way:
window.myvar = "MyValue";
That would make the var a window level var. Even though I am preaching against this, I have done it a time or two, for testing.
So... I just did something that worked for both FF and Chrome. It isn't pretty, but none of this really is. It was nice to have one workaround for both instead of having to work differently for FF than Chrome. I needed to get the value from a global object... but the sandbox was blocking that. With this hack I was able to do that one way for both browsers.
First, from within the sandbox... add an invisible div to the bottom of the document.body
$K('body').append('<div id="randomdiv" style="display:none;"></div>');
Then create a script in the document.head that will set the text of the randomdiv to the value that I needed.
var temp = '$("#randomdiv").text(twttr.currentUserScreenName);';
var somescript = document.createElement("script");
somescript.innerHTML = temp;
document.getElementsByTagName("head")[0].appendChild(somescript);
Then... at this point, from within the sandbox, you can select the value from the DOM, rather than from some global js object. This is how you would do it.
var myvar = $K('#randomdiv').text();
Let me know your thoughts. This is what was the easiest for me.
I use a Joomla! plugin that takes advantage of the DHTMLxGrid library, particularly version 1.5. I have problem when opening the page that uses this DHTMLx Grid functionality, everything works fine with Firefox, however, when I open the page in Chrome (7 and 8) the browser hits an exception on line 60 of the dhtmlxgrid.js file, triggered by the initialization of the grid. I have included a few lines of code, I know this is very limited data, but this is what I was able to to put here as a summary. I hope someone encountered a similar problem. I have limited knowledge of JS, so any help is greatly appreciated.
If you need more specifics, let me know and I will try to include more data.
Thanks!
The php file:
function gridInit(){
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("http://mydomain.com//administrator/components/com_com/images/dhtmlxGrid/");
mygrid.setHeader("ID,Start Period,End Period,Price (USD)");
mygrid.setInitWidths("50,120,120,80");
mygrid.setColAlign("center,center,center,center");
mygrid.setColTypes("dyn,dhxCalendarA,dhxCalendarA,edn");
mygrid.setDateFormat("%d/%m/%Y");
mygrid.setColSorting("int,date,date,int");
mygrid.init(); //...hits exception at this point
//...
}
The js file:
//dhtmlxgrid.js...
this.hdr = document.createElement("TABLE");
this.hdr.style.border="1px solid gray";
this.hdr.cellSpacing = 0;
this.hdr.cellPadding = 0;
if ((!_isOpera)||(_OperaRv>=8.5))
this.hdr.style.tableLayout = "fixed";
this.hdr.className = "c_hdr".substr(2);
this.hdr.width = "100%";
//...
var hdrRow = this.hdr.insertRow(_isKHTML?2:1); //dhtmlxgrid.js:60 Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
//...
The error means an index is negative or too large. The line the error happens on is adding a row to a table, but there is a test for _isKHTML... I assume that is testing for konqueror, which was the progenitor of WebKit which Chrome is based on. Anyhow, try taking out that test and doing this instead:
var hdrRow = this.hdr.insertRow(1);
If that resolves the problem then the browser sniffing being used there is at fault, but if you don't have to support Linux running KDE then you should be fine without it.