0

Does anyone know why this would not work in IE7/8?

drop_area = $('div#drop_area');

It works perfectly in IE9, FF2/3, and Chrome. Internet Explorer 7/8 gives the following error:

SCRIPT438: Object doesn't support this property or method

Edit: This is the HTML that goes with my javascript: http://pastebin.com/nwxx8RzW

Casey Flynn
  • 13,654
  • 23
  • 103
  • 194
  • 1
    May be its some other piece of code...Can u post the rest of the code? – Chandu Jun 29 '11 at 22:41
  • 2
    You don't need the `div` portion of the selector, since the ID is unique. – Gert Grenander Jun 29 '11 at 22:43
  • 1
    Stupid question, but have you tried `var drop_area = $('div#drop_area');`? Also, are there any other errors reported? Have you tried pasting your code into [JS Lint](http://jslint.com/) and checking for errors there? – David Thomas Jun 29 '11 at 22:43
  • @Cybernate, sure I can post it. But I'm thinking this particular line is the only relevent bit since when I set a breakpoint it crashes right here. Complete script: http://pastebin.com/dL8zSiV7 – Casey Flynn Jun 29 '11 at 22:43
  • Assuming you have `
    ...
    ` somewhere it works fine for me in IE 8.     – glortho Jun 29 '11 at 22:43
  • Something might be hijacking the $. Try jQuery('#div#drop_area). If you get an object back, that's the problem. – Craig M Jun 29 '11 at 22:44
  • Please setup a demo at jsfiddle, this would make it easier for us to help you find the error. – Dr.Molle Jun 29 '11 at 22:44
  • I agree with @Gert, and I I'll add that `#id` works faster that `element#id`. – Karolis Jun 29 '11 at 22:44
  • @Karolis, @David Thomas, I actually tried it once with just the ID. Same error. I read about a known issue for IE5 here http://docs.jquery.com/Known_Issues#Selectors and figured what the hell maybe the fix would work here – Casey Flynn Jun 29 '11 at 22:46
  • @Dr.Molle, I actually included the code at pastebin.com/dL8zSiV7 if that helps – Casey Flynn Jun 29 '11 at 22:47
  • @Casey What is the full version number of jQuery? – Karolis Jun 29 '11 at 22:48
  • @Karolis, I'm including jQuery from google's CDN: – Casey Flynn Jun 29 '11 at 22:51
  • @Casey, hm... You can try `$(document.getElementById('drop_area'))` :) – Karolis Jun 29 '11 at 22:56

4 Answers4

2

IE has a weird behaviour to register some properties in global scope. Elements with an given ID may be accessed simply by using the ID.

So you have a element with the ID "drop_area", it's accessible in IE by using this ID, try:

alert(drop_area.tagName)

..to check it.(should give "DIV")

So what happens: You try to assign something else to this element when using drop_area = $('div#drop_area'); , but this is an invalid operation on an DOMElement.

So use the var-keyword to clarify that you want to create a variable

var drop_area = $('div#drop_area');

or in the case that you have to create a global variable inside a function, assign the variable to the global context:

window['drop_area'] = $('div#drop_area');
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • i tried alert(drop_area.tagName) and it worked! Now I'm going to give assigning it with the var keyword a shot – Casey Flynn Jun 29 '11 at 23:11
  • Okay that's interesting, alert works fine but when I attempted to run: function on_element_drop(event, ui){ console.log(drop_area.tagName); console.log(typeof ui); var drop_area = $('div#drop_area'); I got the error:SCRIPT5007: Unable to get value of the property 'tagName': object is null or undefined – Casey Flynn Jun 29 '11 at 23:14
  • This must be a bug in developer-toolbar. You assign the variable after logging, so when logging it should giv DIV and not an error. Furthermore the object wouldn't be null or undefined, it's an jquery-object or an DOMElement. – Dr.Molle Jun 29 '11 at 23:40
1

Usually that error shows, that you use jQuery on a website that also uses Prototype. That's why get an error (which is actually throw by Prototype). The other possibility is, that you try to call the code, before the jQuery lib was included into the HTML.

To make sure it's not my first guess, add this code to your JS code:

$.noConflict();

Therefore it is important that Prototype is included into the HTML, before jQuery is included: http://api.jquery.com/jQuery.noConflict/

If you than replace all occurrences of $() with jQuery() and it works, it was the first issue with using jQuery and Prototype at the same time.

2ndkauboy
  • 9,302
  • 3
  • 31
  • 65
  • 1
    thanks for the response. I'm not sure if this is the problem since 1. I'm not using prototype or any other JS framework and 2. The problem is unique to IE7/8 and works in all other web browsers – Casey Flynn Jun 29 '11 at 22:52
  • When you paste a gull example including HTML we might find the issue with your code. The line itself looks absolutely OK for me. – 2ndkauboy Jun 29 '11 at 22:56
  • As you can read here: http://jqueryui.com/demos/droppable/#event-drop you can use `$(this)` to get the drop_area so that might be a solution that works in IE7/8. – 2ndkauboy Jun 29 '11 at 22:58
  • good idea actually. I tried that, but unfortunately it still returns the same error. function on_element_drop(event, ui){ console.log(typeof ui); //var drop_area = $('div#drop_area'); drop_area = $(this); //drop_area = $(document.getElementById('drop_area')); //element = ui.helper; – Casey Flynn Jun 29 '11 at 23:06
  • BTW this is my HTML that goes with my javascript: pastebin.com/nwxx8RzW – Casey Flynn Jun 29 '11 at 23:07
1

Have you got an element with an id of 'drop_area'? ie 6/7/8 auto assigns a global var to the dom element using the element id. Some more code would be helpful.

redsquare
  • 78,161
  • 20
  • 151
  • 159
  • I do have an element with an ID of drop_area, the code does appear to work perfectly fine in other browsers. I'll attach my html along with this. Thansk! – Casey Flynn Jun 29 '11 at 23:03
  • try using a different name in the js or better still ensure you always var them. – redsquare Jun 29 '11 at 23:05
1

The code you've shown on pastebin has numerous global variable issues. In other words, you are coding assuming that variables you are declaring are local in scope, whereas in reality they turn out to be global. Examples include set, box_handle, elements, i, id, drop_area, element, row, image_id, etc. All of your functions are global in scope as well, when they can easily be encapsulated in an other function.

Now I don't know if there's some subtle interactions going on, whether some code has hammering (global) data set by other code, but it certainly seems as if something is getting overwritten and hence methods and properties are disappearing. I would start by going through the code and adding var to local variables. Next I'd be encapsulating most of this code in an anonymous autoexecuting function.

jmbucknall
  • 2,061
  • 13
  • 14
  • thanks for the suggestion. Can you quickly demo the syntax for a 'anonymous autoexecuting function' that I would encapsulate my code inside? – Casey Flynn Jun 29 '11 at 23:19
  • To be honest, you're already using a suitable function: the document ready function. You can move a lot of your code in there. For instance the second statement of your document ready function calls `load_elements()`. You can easily move that function inside the document ready function with no loss of functionality. And so on. – jmbucknall Jun 29 '11 at 23:24
  • thanks for the suggestion. I tried renaming the variable to something else and it worked. However if I try and use the 'var' keyword infront of 'drop_area' to make it a local variable I still run into this same issue. Do you have any idea why this might be the case? – Casey Flynn Jun 29 '11 at 23:27
  • @Casey: my suggestion is to check every single case where you are assigning something to a variable. Is it a local variable (local to the function, that is)? In which case it should have a var or it should be declared already with a var in the same function. Do this throughout your code, not just at this one spot. – jmbucknall Jun 29 '11 at 23:31