I have a single page application created with Durandal.js and I'm having a heck of a time debugging an issue with IE11 and Durandal's app.showMessage(...) and app.showDialog(...) methods. Currently the app runs fine in Chrome, FireFox and IE 9 and 10, but in IE11 I am running into an issue where my app hangs when trying to call up a dialog via app.showDialog(...). If I open the dev tools before going to my app it all runs just fine. If I try to go to the app, run the code that results in app.showDialog firing and THEN open the dev tools and try to run that same code I do get access to the error that is occurring, but it's not very helpful. The actual error reads as SCRIPT5007: Unable to get property 'name' of undefined or null reference and it's at File: system.js, Line: 90, Column: 13. The code from that area of system.js relates to Durandal's logError method which looks like this:
var logError = function(error) {
if(error instanceof Error){
throw error;
}
throw new Error(error);
};
The error stack appears as included in the attached image (located at the bottom of my question). Sorry I had to use an alert to get the full error stack since otherwise the logged version is cutoff.
I have also tried a few things including ensuring my doctype is correctly decalred with <!DOCTYPE html> at the top of my index.html file, I have added <meta http-equiv="X-UA-Compatible" content="IE=edge"> to index.html and I have also tried to add my own console object to catch any debug code that may still be in the app via the following script that I found here: https://stackoverflow.com/a/12307201/4367226
<script type="text/javascript">
// IE9 fix
if(!window.console) {
alert("There isn't a console!");
var console = {
log: function( x ){},
warn: function( x ){},
error: function( err ){
alert( "Error from console object:" );
alert( err );
alert( err.stack );
},
time: function(){},
timeEnd: function(){}
};
}
</script>
I've also ensured that the app has a "cache buster" (related to https://stackoverflow.com/a/25170531/4367226) by adding
$.ajaxSetup({cache:false});
to my app.
I have also tried to remove the fade class from my modals without success (as suggested here: https://stackoverflow.com/a/25717025/4367226).
Further details - the app is running Durandal 2.0.1, Twitter Bootstrap 2.3.2 and jQuery 1.10.2.
Any help would be much appreciated and let me know if I can help clarify anything.
Update
After further investigation and debugging I have been able to find the offending line of code in the bootstrap-modalmanager.js file's init method and it is jQuery related (so I added that tag back to my question):
init: function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
this.stack = [];
this.backdropCount = 0;
if (this.options.resize) {
var resizeTimeout,
that = this;
$(window).on('resize.modal', function(){
resizeTimeout && clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
for (var i = 0; i < that.stack.length; i++){
that.stack[i].isShown && that.stack[i].layout();
}
}, 10);
});
}
},
In the line that reads this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options); from above the this.$element.data() bit seems to be blowing things up. That is where the error is coming from, but I have no idea why it would work with dev tools open, but throws an error otherwise.
Update 2
After continued digging I found that jQuery 1.10.2's jQuery.fn.extend function is broken. The function would try to iterate over an element's attributes and this part of the code: name = attrs[i].name; would allow the code to try and access name of a (sometimes in IE11) null or undefined value - hence the error that I was seeing. That code has been fixed in jQuery 1.11.3 (and it even references the fact that sometimes IE11 the attrs element can be null in the code), but unfortunately the upgraded version breaks other things in my app, so I have replaced the jQuery 1.10.2's jQuery.fn.extend function with version 1.11.3's function of the same name.
So after many, many hours of debugging I have found the cause of my issue. It's related to jQuery 1.10.2's jQuery.data function. In that function there is a for loop that iterates over an element's attributes and tries to access .name of a (sometimes in IE11) null or undefined value.
That bug was fixed in jQuery 1.11.3's version of jQuery.data, but unfortunately I couldn't use the full upgraded version of jQuery without breaking other parts of the app. Instead I simply replaced jQuery 1.10.2's jQuery.data function with the updated version from jQuery 1.11.3.
This is not the best solution (I would rather not have to hack the core of jQuery and have Frankenstein code in my app), but it works.
I'm also still puzzled as to why my old code worked fine in IE11 with the dev tools open, but would fail otherwise. Maybe dev tools adds something to the body element's attributes that prevented the error from happening?
Related
I have a site that uses a Zendesk support chat widget, but the widget doesn't work on mobile devices. In the console, I can see that in one of our JS files there is the error:
TypeError: element.offset is not a function
This then triggers other errors in the web widget code, causing it to not load.
In our JS file, however, it appears that "element" is defined, so I'm not sure what is causing the issue.
This is where I think element is defined:
$.tools.validator.fn('#some_code', "This is the text", function(input, value) {
var element = $('#' + input.attr('data-match-field'));
return element.size() == 0 || element.val() == value;
});
This is where the error is happening further down in the same file:
function scrollTo(element) {
$("html, body").animate({scrollTop:element.offset().top}, 'ease');
}
I'm hoping you all can help me figure out what I'm missing. Thanks in advance.
After prompting from #arieljuod, I searched for instances of scrollTo and didn't find any in use. I ended up commenting out that function and the errors went away.
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'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.
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.
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