CKEditor + IE7+8 'null or not an object' error - javascript

My problem is that I'm using the CKEditor 3.4 plugin for jQuery, and it's giving me an error in IE 7+8 when executing a $(selector).val(html) call on the editor:
The error:
'this.$.innerHTML' is null or not an object
...which when run in the debugger, points to this line of code in the huge CKEditor.js:
getHtml:function(){var i=this.$.innerHTML;return c?i.replace(/<\?[^>]*>/g,''):i;}
...which translates to this in the source:
getHtml : function()
{
var retval = this.$.innerHTML;
// Strip <?xml:namespace> tags in IE. (#3341).
return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
},
My offending code (stripped down, but still giving the error):
var editor_data = $("textarea#body").val();
$("textarea#body").val(editor_data);
... and the textarea code for posterity:
<textarea name="body" rows="15" cols="50" class="wysiwyg" id="body"></textarea>
I've tried reproducing in jsFiddle in IE8, but the strange thing is that it works as intended there. I'd love to also provide a working sample but I unfortunately cannot for reasons outside my control.
I've also tried this fix, and it cleared up the error issue, but after that setData did not work as intended and just overwrote the editor contents with nothing. I'll admit this problem+fix is a bit over my head...: http://dev.ckeditor.com/ticket/4566
(Sorry, long post :S) I've also tried to use the direct JavaScript API into CKEditor (abandoning the jQuery integration) and it threw the same error.
Anyone have anything they'd like me to try to fix this issue, or have any hunches of what it might be? It would be much appreciated!

Personally I'm not a fan of the existing answer that consists of modifying the source code because as soon as you update ckEditor, then you have to remember to modify the source yet again. I was having the same problem as the original poster and found a fix that is considered a hack, but totally usable. Simply, a Try/Catch made it all nice and happy in IE8. Now to test in IE7. The other bonus of this fix is that you're not left with blank data when it fails but that you get actual content you were trying to retrieve.
var editor = $('textarea.editor').ckeditorGet();
var vPageContent = "";
try{
vPageContent = editor.getData();//function call fails here
} catch(err){
vPageContent = editor.getData();//but will work here
}

May not be the best solution but take a look at this:
http://dev.ckeditor.com/ticket/4566
It claims that replacing
getHtml:function(){var i=this.$.innerHTML;return c?i.replace(/<\?[^>]*>/g,''):i;},
with
getHtml:function(){return (this.$) ? this.$.innerHTML : "";},
will solve the problem.
I'm not claiming this is the correct answer but I had the same problem today and (for now) it seems to work.

be careful with extra comma. IE does not like exra commas. You can check your code for extra comma with json lint

Related

Need a quick JavaScript/jQuery Validation

I have a 17000 line page with lots of HTML/JavaScript/jQuery and it's always frustrating when I make a typo and there's no clue when the page loads into the browser what the problem is. It just - doesn't do anything. Consider the patch of code below, for example, where the third line terminates with a ' instead of a ; .
$(document).on('click', 'input#answer_chkbx', function(e) {
if(e.target.checked){
x$ = g.currentElement$.find('.cellContent')'
g.currentElement$.addClass('answerBox')
.css('background-color','tansparent')
.height(25)
.width(150);
}
});
There should be something that runs through the code and finds that immediately.
Is there a way to check for things like this?
Thanks
You might consider a tool such as JSLint or JSHint.
For offline coding you can use Netbeans IDE or Dreamweaver

Javascript problems in IE - object expected?

I'm using a jQuery fork of Wysihat as a Wysiwig editor in a project of mine. It works perfectly in all browsers apart from (surprise, surprise) IE (specifically IE8). I've got the example files uploaded here:
http://pezholio.co.uk/wysihat/examples/custom_buttons.html
When running the file in IE, I get the error Object expected, and it seems to be occurring within this function:
window.getSelection = (function() {
var selection = new Selection(document);
return function() { return selection; };
})();
Any ideas what may be causing the problem, and what I can do to fix it?
Cheers
Ah, OK. I think I've nailed this now. I've removed the existing IE fallback code and am using selection.js instead. You can see the code in the gist below:
https://gist.github.com/2556956

Internet Explorer line 1 char 1 code 0 error

I'm using jQuery+drupal and some jQuery plugins. All is ok with
Firefox. But in IE's i'm receiving problem like this.
Line: 1
Char: 1
Error: object expected
URL: http://businessway.am
I have included .js files. How to know where is the problem? In which
file? Line 1? Which file?
If you can please check site which I gave before.
You could get this type of errors in case the url of a <script src="...url..."></script> does not return javascript, but some other content (html)
I checked the page, but all scripts with src actually do seem to return javascript. With a bit more digging, it seems that this eval code triggers the error message:
artNoStyleAdding(document)
It looks like it is coming from this script:
<script type="text/javascript">if (Drupal.jsEnabled) {$(document).ready(function(){ window.setTimeout("artNoStyleAdding(document)", 2000);});}</script>
That's the last but one script in the head of the document.
Apperantly you forgot to declare and code the artNoStyleAdding function, whatever it is supposed to do.
I've seen this error come up in IE7 when you have a javascript object with an extra comma on the end.
Example:
var something = {
"one": ["a"],
"two": ["b"],
};
Should be:
var something = {
"one": ["a"],
"two": ["b"]
};
IE8, Chrome, and Firefox don't seem to mind it though.
I had this exact same error, only in IE, when putting comments in a certain spot:
function initMyUI() {
$("#myId") // Don't put comments here.
.delegate("#btnMyButton", "click", _clickDoSomeThings);
};
Depending on your version of IE you'll want to break out the development tools available. You can use Firebug Lite, built in dev tools in IE8 or go the old standby and use Web Developer Express.
The problem has been fixed in IE7 and IE8, but IE6 give's same error.
Updated: Fixed. Sorry :)

"Stack overflow in line 0" on Internet Explorer

I realise this is not the ideal place to ask about this in terms of searchability, but I've got a page whose JavaScript code throws "Stack overflow in line 0" errors when I look at it in Internet Explorer.
The problem is quite clearly not in line 0, but somewhere in the list of stuff that I'm writing to the document. Everything works fine in Firefox, so I don't have the delights of Firebug and friends to assist in troubleshooting.
Are there any standard causes for this? I'm guessing this is probably an Internet Explorer 7 bug or something quite obscure, and my Google-fu is bringing me little joy currently. I can find lots of people who have run into this before, but I can't seem to find how they solved it.
I ran into this problem recently and wrote up a post about the particular case in our code that was causing this problem.
http://cappuccino.org/discuss/2010/03/01/internet-explorer-global-variables-and-stack-overflows/
The quick summary is: recursion that passes through the host global object is limited to a stack depth of 13. In other words, if the reference your function call is using (not necessarily the function itself) was defined with some form window.foo = function, then recursing through foo is limited to a depth of 13.
Aha!
I had an OnError() event in some code that was setting the image source to a default image path if it wasn't found. Of course, if the default image path wasn't found it would trigger the error handler...
For people who have a similar problem but not the same, I guess the cause of this is most likely to be either an unterminated loop, an event handler that triggers itself or something similar that throws the JavaScript engine into a spin.
You can turn off the "Disable Script Debugging" option inside of Internet Explorer and start debugging with Visual Studio if you happen to have that around.
I've found that it is one of few ways to diagnose some of those IE specific issues.
I had this problem, and I solved it. There was an attribute in the <%# Page tag named MaintainScrollPositionOnPostback and after removing it, the error disapeared.
I added it before to prevent scrolling after each postback.
If you came here because you had the problem inside your selenium tests:
IE doesn't like By.id("xyz"). Use By.name, xpath, or whatever instead.
Also having smartNavigation="true" causes this"
I set up a default project and found out the following:
The problem is the combination of smartNavigation and maintainScrollPositionOnPostBack. The error only occurs when both are set to true.
In my case, the error was produced by:
<pages smartNavigation="true" maintainScrollPositionOnPostBack="true" />
Any other combination works fine.
Can anybody confirm this?
Internet Options
Tools
Internet options
Advanced
Navigation section
Click > Disable script debugging
display a notification about every script error
sign in
You will smile !
My was "at line 1" instead but...
I got this problem when using jQuery's .clone method. I replaced these by using making jQuery objects from the html string: $($(selector).html()).
I have reproduced the same error on IE8. One of the text boxes has some event handlers to replace not valid data.
$('.numbersonly').on("keyup input propertychange", function () {
//code
});
The error message was shown on entering data to this text box. We removed event "propertychange" from the code above and now it works correctly.
P.S. maybe it will help somebody
I don't know what to tell you, but the same problem occured with jQuery table sorting and SEARCH.
When there is nothing left in the table, where you are searching a string for example, you get this error too. Even in Google Analytics this error occurs often.
In my case I had two functions a() and b(). First was calling second and second was calling first one:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
a();
}
}
a();
I resolved this using setTimeout:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
setTimeout( function() {
a();
}, 0);
}
}
a();
This is problem with Java and Flash Player. Install the latest Java and Flash Player, and the problem will be resolved. If not, then install Mozilla Firefox, it will auto install the updates required.

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