Object Expected error in IE7 - problem with function scope? - javascript

I'm having what I hope is a simple-to-fix issue.
Basically, I've got one block of javascript containing the function, and then I'm trying to call it from another block of javascript (within a jQuery $(document).ready function). Whilst it works fine on Firefox, I get an 'Object Expected' error in IE7. It's probably something to do with scope, but I'm not sure what to fix. Firebug doesn't seem to give any light on the subject.
So, here's my function:
<script type="text/javascript">
//<![CDATA[
function onsite_validate(){
$("#tsp_onsite_form").validate({
errorClass: "form_error",
errorElement: "em",
errorPlacement: function(error, element) {
error.prependTo( element.parent("label") );
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
rules: {
fault_found: "required"
},
messages: {
fault_found: "was a fault found?"
},
submitHandler: function(form) {
$.blockUI();
form.submit();
} //ends submit handler
});
}
//]]>
</script>
and after this, I have the following:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
onsite_validate();
});
//]]>
</script>
The 'Object Expected' error throws on calling onsite_validate();
I'm sure I'm making a fundamental mistake - just can't seem to spot it!
Many thanks

What type of object is error in errorPlacement? Not entirely sure if it's passed as an instance of jQuery, but if not, you might need to work around that.
Edit: just realized you said it works in non-IE. I remember having this error in IE7 only, and having to patch the jQuery source to handle it. What version of jQuery are you using, and are you hosting it yourself or using something like GoogleAPIs? Also, can you provide the exact error (file, line, etc)?

I've had this error when trying to load the same javascript file twice (in nested templates). It was difficult to identify because the problem occurred elsewhere in the flow.
What I'm saying is that the error isn't necessarily with that function or even that code block.

Sounds like you have a null reference in one of those callback functions.
Just for debugging, you might try checking each of the objects against null and throwing an alert as needed to figure out which object isn't getting set.
For example, check these objects:
element.parent
error
$(element)

In IIS
Click on your website[LHS]=>Authentication[**Features View on RHS**]=>Enable only Anonymous authentication other should be disabled and click on edit, set Specific user to **IUSR** instead of [IUSR_Servernname] and No password is required

Related

Globally logging jQuery Errors (Event & DOM errors)

Since systems these days are becoming more and more Javascript (jQuery, AJAX, etc) oriented, we've been trying to get more and more Error logging happening for any of these things.
My concern is that within jQuery itself, when normal DOM manipulation / jQuery events are created or executed, window.onerror is unable to catch these, and this might help make debugging bugs in production faster, by having them logged on a server
In this article from 2008 (.onerror & jQuery bind try/catch{}), they add a try/catch {} to the jQuery.bind() event and even the document.ready event. Now that everything goes through the .on() event this article is a bit dated, but I feel like logic could still work...
Has anyone tried implementing such a jQuery overwrite (try/catch system) into their own Projects?
Basically I want to continue using jQuery from the CDN, and just within one of our JS files - extend/override the .on() / $(document).ready() / etc events with these changes.
jQuery.fn.extend({ // <-- can this be extended / overwritten ?
on: function(etc etc) {
// same code just add the additional
try {
// try to execute the original .on()
}
catch (ex) {
// log any errors / info (where/why/etc)
}
}
});
// or even some sort of try/catch for $(document).ready()?
The other typical error logging formats: (of course logging browser/OS/QueryString/etc too)
window.onerror = function (msg, url, line) {
// Log General Javascript Errors
// this won't log jQuery internal errors
};
$.ajaxSetup({ // Log AJAX Errors
error: function (jqXHR, ajaxSettings, thrownError) { }
});
We report JavaScript errors to the server in window.onerror and jQuery ajax errors, without overriding jQuery and it works well. If you want to override a jQuery function, you can do:
$.fn.oldOn = $.fn.on;
$.fn.on = function(a,b,c,d,e,f) {
try {
$(this).oldOn(a,b,c,d,e,f);
}
catch (ex) { ... }
};

Javascript: Random "Object has no method" error even with jquery.getScript()

I've been working with JavaScript and i need to call a function from another .js file.
The code works most of the time, but sometimes it gives me the error "Object has no method odometer". I've even put the code inside a call to getScript() to make sure it's loaded before it tries to call the odometer() function, but I'm still getting random errors.
Heres the code:
var updateDisplay = function(){
console.log("refreshing Odometers");
$.getScript("/odometer.js", function(){
$.getJSON(
'/getData',
{
product: '',
unit: unitSelection(),
period: salesPeriod(),
reportBegin: $("#datepickerfrom").val(),
reportEnd: $("#datepickerto").val()
},
function(data){
$(".odometer").odometer({
odometerData:data
});
});
});
};
I am getting an error on this line:
$(".odometer").odometer({
odometerData:data
});
It says "object has no method odometer".
I am using the Play framework for development and I've already imported jQuery and my other JavaScript files in the HTML page.
Here's my JS import order:
jquery
odometer.js (even i use getScript, i've put it there just to make sure)
main.js (which the given code resides in..)
What am I doing wrong?
Thanks for helping....
I think
$(".odometer").odometer({...})
is called before odometer extends to jQuery, flow may be like this
$(".odometer").odometer({...}); // first called
$.fn.odometer = function(){...}; // later it was extended to jQuery
seems like its a problem with ajax caching settings.
i've found the answer from this question:
jquery ajax bug
after adding
$.ajaxSetup({ cache: true });
the getScript works fine. thanks for spnding your time guys :)

uncaught error NOT_FOUND_ERR DOM Exception 8

So I am deleting all the contents under a particular div and adding a message content. However, javascript throw the following error after the finish:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
Here is the code where it is executed
new Ajax.Request("profileThis.php",
{
method:'post',
parameters:{title:title, review:review, userId:userId, category:category, categoryId:categoryId},
onSuccess:function(ajax)
{
alert(ajax.responseText); // this is just for debugging purposes
var message=ajax.responseText;
var divMessage=document.createElement("div");
divMessage.style.color="rgb:(105,105,105)";
divMessage.innerHTML=message;
while($("reviewSheet").hasChildNodes)
{
$("reviewSheet").removeChild($("reviewSheet").lastChild);
}
$("reviewSheet").adopt(divMessage);
},
onFailure:ajaxFailure,
onException:ajaxFailure
});
People commented that the problem was with how I assigned divMessage to reviewSheet. I tried both adopt and appendChild but none works.
A little help would be appreciated.
divMessage.style.color="rgb:(105,105,105)";
should be
divMessage.style.color="rgb(105,105,105)";
Is the problem that you are calling the method hasChildNodes() on a jQuery object? I'm not sure what $("reviewSheet") is supposed to be, but wrapping a string in $() makes it a jQuery object which I don't believe will work with regular javascript methods. If "reviewSheet" is the id of an element you could do something like
node = document.getElementById('reviewSheet');
then you could go into your while loop.
while (node.hasChildNodes()) {
//the rest of your code here
}
Oh also you need to put the parenthesis after hasChildNodes() to return a boolean value.

Simple jQuery code contains a syntax error that I can't find

I've got this (remarkably) simple JavaScript function that is called when a user clicks a "Cancel" link:
function hideNewUserPanel(){
$('#create_user_panel').slideUp('slow');
$('.right_interior_panel').slideDown('slow');
}
And the code to add the handler:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
)
});
Functionally, everything works as expected. Trouble is, when I click the "Cancel" link, Firebug shows an error in the console:
uncaught exception: Syntax error, unrecognized expression: #
I've stepped through the code several times and the error appears at some point before the call to hideNewUserPanel(). At the risk of sounding like one of "those programmers" (the kind that claim to have found a bug in GCC and assume their own code is perfect), the exception is being thrown from somewhere within jQuery proper, so I assume the issue is in there. I'm using jQuery 1.3.2 (this is a legacy project using many jQuery plugins that will break if we update to 1.4.x).
Is there anything obviously wrong with my code that I'm simply not seeing? This code is, frankly, very simple and I don't really see what the issue could be.
Thanks!
This:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
});
Needs a closing paren after the function, like this:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); });
});
Also, you can write that a bit simpler :), try this:
$(function(){
$('#cancel_create_user_btn').live('click', hideNewUserPanel);
});
You seem to be msising the end of the live call:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
); // <===
});
$(function() {
function hideNewUserPanel() {
$('#create_user_panel').slideUp('slow');
$('.right_interior_panel').slideDown('slow');
}
$('#cancel_create_user_btn').live('click', function() { hideNewUserPanel(); });
});

What does the obscure javascript error b(e.target).zIndex is not a function mean?

To give more information I am using the modular form here:
http://jqueryui.com/demos/dialog/#modal-form
`b(e.target).zIndex` is not a function
[Break on this error] `(function(a){a.widget("ui.mouse",{opti...is._unrotate}return this}})})(jQuery);`
/js/jquery-ui.min.js
I also seem to be getting the error "Too much recursion"
too much recursion
[Break on this error] `3||a.nodeType===8)){if(a.setInterval&&...this.special[o]||{};if(!t){t=e[o]={};`
https://my.dev.peer1.com/js/jquery/jquery-1.4.min.js
I know its not much to go on but I was hoping someone might have experience with similar issues.
This happens when your browser detects a deadlock and kills javascript from an infinite loop, specifically an infinite recursive loop. Something you are doing is causing jQuery to loop and recurse (call the same function hierarchy over and over) in a way it can't escape.
The error here is likely outside of jQuery: the way you're calling jQuery to do something. To give more details and resolve this, you'd need to post the code you're running that throws this error.
As I mentioned in comments (in case it gets more eyes here later) You should use the uncompressed (non-minified) version of jQuery (or any javascript really) for development, and minified for production. This results in much easier to read, debug, and/or google-able errors. You can always get the uncompressed and minified versions here at jQuery's download page.
I would also like to add to this. I've googled for a solution for this but the answer/solution checked wasn't the reason why I got the error. But a coworker helped me out.
I got the same error and it's because of the model: true option.
Here's my snippet of code I ended up commenting out the modal:true:
jQuery( "#dialog-delete-warning" ).dialog({
resizable: false,
height:140,
/*
modal: true,
*/
buttons: {
Cancel: function() {
jQuery( this ).dialog( "close" );
},
"Ok": function() {
jQuery( this ).dialog( "close" );
}
}
});
The problem with 'jQuery errors' like this is that they are normally caused elsewhere, the solution is seldom obvious. I had a similar error which happened when I tried to drag a modal dialog. Using both the latest version of jQuery and jQuery UI has solved it.

Categories

Resources