I have the following code:
// Creates a timer to check for elements popping into the dom
timer = setInterval(function ()
{
for (p in pixelTypes)
{
checkElems(pixelTypes[p]);
}
}, 10);
// Add Document finished callback.
$(document).ready(function ()
{
// Document is loaded, so stop trying to find new pixels
clearInterval(timer);
});
In Firefox, it works great, but in IE6, I get a "Object Expected" error on the $(document).ready line.
I can't figure out what would cause IE6 to not recognize it, jquery is fully loaded by this point.
Is this a known issue?
Just a few pointers for anyone that's interested:
$(document).ready(function() {...}); and $(function() {...}); means exactly the same thing. The latter is a shorthand for the former.
If you develop for a large site, using multiple Javascript libraries, or you develop plugins meant to be compatible with other peoples work, you can not trust the dollar sign ($) to be associated with the jQuery object. Use the following notation to be on the safe side:
(function($) { [your code here] })(jQuery);
This passes jQuery into a self-executing function, and associates $ with the jQuery object inside this function. Then it does not matter what the $ represents outside of your function.
To get back to your question, have you checked whether the timer variable is assigned when you get the error? I believe the browser will see the $(document).ready(function() {...}); all as one line, so if you have some kind of debugger that tells you that's the offending line, it might be the timer variable...
Last thing: In Javascript, it is not correct to place open curly braces on a new line. This can cause really bad errors due to Javascripts semicolon-insertion. For further info, read Douglas Crockford's Javascript: The good parts:
http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&s=books&qid=1267108736&sr=1-1
Anyway, really hope I didn't upset anyone. Hope you solve the problem!
EDIT: I'm not sure if this is what robertz meant by fully qualified, but as far as I know, when a URL is fully qualified it means no parts are missing, ie. it's an absolute URL starting with http:// or https:// (or some other protocol).
Please correct me if I'm wrong!
I've had this same issue in the past too. It was a sporadic issue and was horrible to and reproduce.
The solution that I found was to replace $(document).ready(function() {...}); with jQuery(function() {...}) and it worked like a charm!
Moving $(document).ready(function() {...}); to the bottom didn't work for my use case.
The comments in this post are incredibly helpful (Where I first read about doing it this way)
If anyone have the same problem you should see if when you call your javascripts you have type="application/javascript", I eliminate it and it was corrected, I think it's some problem with IE and the type Thing
Are you sure that jQuery is loaded? Try debugging with alerts like:
alert(typeof $);
You could also try a different syntax:
$(function() {
clearInterval(timer);
});
Ok, so from your comment, the above doesn't help. The "object expected" error seems to occur with a syntax error in my experience. Is that the exact code you've got? If not, could you post it?
Make sure your script type is text/javascript
<script type='text/javascript'
The DateTime picker worked just fine on my local XP test, but it failed "Object Expected" once deployed on the server. After 2 days of being persistent, this is how I solved my problem, adding the Url.Content around the path of the Javascript!
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/ui/minified/jquery.ui.core.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/ui/minified/jquery.ui.datepicker.min.js") %>" type="text/javascript"></script>
I don't think that you should really be polling for elements the way you are.
The document ready event calls as soon as the browser has loaded enough for you to be able to manipulate the page, so you should just do your DOM processing in the $(document).ready() block.
You could try the old skool way of checking whether the document is "ready"... Place the script just before the closing </body> tag - I believe it has the same effect as jQuery's 'ready' event - actually, it's probably quicker doing it this way.
In my experience the "Object expected" error in IE6 shows up because of a syntax error - it's worth putting the script though JSlint, if you haven't already...
I ran into this problem on my machine, as was able to find a quick fix. Here's what I did:
1.Debugged my javascript with nickf's suggestion "alert(typeof $)" and got the "undefined" alert message
2.I then fully qualified my jQuery script resources.
3.Reload my page and received the "function" alert message
BTW, I am using IIS 5.1 on XP. My website is configured to use "Wildcard mapping" to take advatage of the asp.net mvc framework. I think that this configuration caused the broken links.
For more information on how to setup MVC on old versions of IIS, check out Phil Haack's post:
http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx
$(document).ready() tells you when the dom is ready, but not all assets are necessarily done coming in.
If you want to make sure all the assets are actually done loading, use $(window).load() instead. The most common use for this is to make sure that images are done loading, but it may work for your script problem as well.
If it is in a script element which is within your body element, (i.e.) ..
The cause can be the attributes you pass with the script-tag. If it is:
<script type="text/javascript">...</script>
IE6 can give an error. You should use
<script language="javascript">...</script>
Then the error goes away.
I had the same issue, script error informing me that the object was undefined. I tried all the suggestions listed here with no avail. Only thing I did not consider was security, I had forgotten all about my forms authentication and turns out I forgotten about the authorisation on the scripts folder which was denying access to the jQuery libraries!!!
Hope this helps.
Related
I am working on a widget that is embedded on a customers website, it loads a jquery file. however we need to detect if jquery is already loaded on a customers page to avoid conflicts and then not load our own jquery.
As a sidenote the widget works on all versions of jquery. The code being used is...
if (typeof jQuery == 'undefined') {
console.log("NOT LOADED");
scripts.push("https://d33f10u0pfpplc.cloudfront.net/perun/v1/js/widget/betaV2/jquery-1.8.2-min.js");
}
This works when tested locally, however when it was rolled out on some sites we got a ...
type error $tabs(...) is not a function
it seems that the jquery on the host sites must not have been fully loaded is my initial theory (could be wrong)
is there a way to improve the jquery detection used above? or if you know why it is not working i am happy to learn. thanks
First of all, $tabs is not a standard jQuery function. If it's part of a plugin, you need to make sure that's included as well.
Also make sure that jQuery isn't being run in noConflicts mode. In that case, jQuery may be defined, but not $.
Do you check the loading state of the browser? Javascript is typically executed at the time, when the browser is parsing it. Jquery is a bigger file and sometimes it will execute upcoming code first.
To solve it, verify that your own code is executed after dom is loaded:
$(function() {
// your code here
});
Alternative 2 is to check what
scripts.push()
exactly does. It needs to be asynchronous, just only add the file request does not ensure the file is loaded and parsed. Maybe this is your problem.
Using jQuery in widgets isn't optimal. Is it possible to write it in native js?
It's probably not help, but in example at http://www.initializr.com/
jQuery checked like
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
Please check your jquery version and your version not have a $tabs jquery function.
Then only you got this type error
$tabs(...) is not a function.
Otherwise try new version of jquery_ui file.
Rails 3.2.11
I followed the instructions for this gem: https://github.com/crowdint/rails3-jquery-autocomplete. When I load the page that I want to have the autocompleted field, Jquery, jquery-ui, autocomplete-rails.js, etc are all being loaded. However, upon loading the page, I get this in the error console:
TypeError: 'undefined' is not a function (evaluating 'this.live')
The I uncompress the js file, and this is the function being referred to:
(function(jQuery)
{
var self = null;
jQuery.fn.railsAutocomplete = function() {
return this.live('focus',function() {
if (!this.railsAutoCompleter) {
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
}
});
};
Anyone have any idea what's going on? Since I'm not using '$' anywhere, the noConflict option doesn't seem to matter, and either way doesn't fix the issue. I didn't make any changes to autocomplete-rails.js
What's weird is that I swear this was working at some point, but I can't for the life of me figure out what changed to break it.
Yup, turns out I had an errant javascript_include_tag that loaded another copy of jquery. That was the issue
I believe the original poster's own answer was part of the solution for me as well. Using rails 3.2.13, jquery 1.9.0 and jquery-ui 1.9.2. More completely I also:
upgraded rails3-jquery-autocomplete to latest (from 1.0.9 to 1.0.11, when I saw: "When possible, use jQuery .on() rather than .live()" in the Changelog in rails3-jquery-autocomplete at github
removed possibly redundant or conflicting jquery includes
reordered includes, specifically placing underscore.js after autocomplete-rails
full stop and clearing of caches and compiled assets
After the first 3 steps, the broken behavior was still there (after each step I restarted server only). The last step was out of laziness, but thankfully showed that the combination of the above worked.
This is how I'm currently creating a popup for a few links on my site.
function popitup(url) {
newwindow=window.open(url,'name','height=615,width=475');
if (window.focus) {newwindow.focus()}
}
Is there a cleaner way to write this? Also, how do I make the scrollbar appear?
Be sure to change newwindow= to var newwindow=; otherwise you are declaring a global variable every time you run this function.
Otherwise, I agree with fsong's answer that it's a pretty basic function and doesn't need much cleaning. Here's what I would do, but it's minor stuff:
function popItUp(url) {
var newWindow = window.open(url, 'name', 'height=615,width=475,scrollbars=yes');
if (newWindow.focus) {
newWindow.focus();
}
}
I'm not exactly sure what you mean by a cleaner way, the code seems fairly straight forward to me. But you could get rid of the return in the onclick of the anchor tag since it's useless there and perhaps you could use underscore/camel case to name your function (pop_it_up or popItUp) for better readability.
For scrollbars add ,scrollbars=yes to the last parameter (strWindowFeatures) in window.open.
JSLint
I would check your code through JSLint.
JSLint is a JavaScript program that looks for problems in JavaScript
programs. It is a code quality tool.
Like author says JSLint will hurt your feelings, but I think the error you should certainly fix is:
Problem at line 2 character 3: 'newwindow' was used before it was defined.
This is issue exactly like Domenic said.
When you check your code with JSLint your code will also have better success when using tools like Javascript Minifier.
Make Javascript external
I also think you should make Javascript and CSS external.
Using external files in the real world generally produces faster pages
because the JavaScript and CSS files are cached by the browser.
JavaScript and CSS that are inlined in HTML documents get downloaded
every time the HTML document is requested. This reduces the number of
HTTP requests that are needed, but increases the size of the HTML
document. On the other hand, if the JavaScript and CSS are in external
files cached by the browser, the size of the HTML document is reduced
without increasing the number of HTTP requests.
I think you should read Yahoo!'s best practices, because it has a lot of very good tips to optimize your website(javascript).
Why popups?
But Why should you use popups? Some users block these, which renders your site unusable. I would advice you to use JQuery and just load content into the DOM.
First of all, I've been researching this "Operation Aborted" error / bug for what seems like weeks, so here are a couple related questions and good articles if you are not familiar with it:
Why does ASP.NET cause the “Operation Aborted” Error in IE7? (so question)
Detecting cause of IE’s Operation Aborted Issue (so question)
Official Microsoft Knowledge base
Official IE Blog
Now here's my problem:
First I tried moving all my <script> elements to the end of my body tag. Didn't work. Then I refactored all my js functions to an external file that is linked in the <head>, all of my js functions are called from onclick or onkeypress anyway. Still getting the error. The last line of one of my .js files is
document.onload = setTimeout("foo()",500);
so I moved that to <body onload="setTimeout('foo()',500);">. I'm still getting this error. I don't know what to do. The only place I'm editing DOM elements is in foo(). Please help!
About my setup:
Java, Hibernate, Struts, JSPs ... I think that's all that is relevant.
What am I missing here?
Thanks in advance.
There are several causes for this. Two of the most common are:
1) scripts attempting to modify the DOM before the document has completely loaded
2) Trailing commas in object or array declarations
Number two is usually relatively easy to find, while number one is much tougher. Generally the best way to track down IE Javascript problems is to install Microsoft Script Debugger, so at least you can see what lines are causing the problem. With Script Debugger, IE will halt execution inside the browser and kick the script to a Script Debugger console, which will show the problem line. Much more informative than regular IE error messages.
Please see my answer to this question in another thread. I love this little trick and it has never failed me (when the cause is DOM manipulation before IE is ready, I mean). And as written, it doesn't affect the DOM-compliant browsers.
That problem can be a bear on a large page. Beyond the advice in the articles you already have, the only thing I can suggest from here is to remove wide swaths of the page in a dev environment until the problem goes away. Keep refining what is/is not on the page until you know which piece of content is causing the problem.
I've actually seen a confluence between two unrelated page elements cause this problem. I don't remember excisely why but the above approach, although painstaking, still worked.
I just spent half an one our to find out what caused the Error-Message "Ci is not defined" in my JavaScript code. I finally found the reason:
It should be (jQuery):
$("asd").bla();
It was:
("asd").bla();
(Dollar sign gone missing)
Now after having fixed the problem I'd like to understand the message itself: What does Firefox mean when it tells me that "Ci" is not defined. What's "Ci"?
Update:
I'm using the current version of Firefox (3.0.3).
To reproduce, just use this HTML code:
<html><head><title>test</title>
<script>
("asd").bla();
</script>
</head><body></body></html>
To make it clear: I know what caused the error message. I'd just like to know what Firefox tries to tell me with "Ci"...
I don't know which version of FF you are using, but regardless, the message is probably referring to the fact that bla() is not a function available on the String object. Since you were missing the $, which means you were missing a function, ("asd") would evaluate to a string, and then the JavaScript interpreter would try to call bla() on that object. So, if you had the following code in your project:
String.prototype.bla = function() {};
// now this next line will execute without any problems:
("asd").bla();
So, it is possible that Ci is some internal Firefox symbol that simply refers to the idea of a function. That is my guess, I imagine you are going to need someone that knows something about Firefox's internals to get a better answer to this question...
UPDATE: I am running your example code in the exact same version of FF as you are, but it reports the error as:
Error: "asd".bla is not a function
Source File: file:///C:/test.html
Line: 3
Perhaps you have an extension/plug-in running that does something with this? Maybe some Greasemonkey script or something?
Jason seems to be right. Many plugins (e.g. Firebug, Geode) use Ci as a shortcut:
const Ci = Components.interfaces;
So the plugins seem to cause that strange error message.
Assuming it's CodeIngiter, it can't find the js file.