1

I'm developing a website and am in one of those wonderful stages where everything works perfectly in Chrome, Safari, Firefox (both for windows and mac) and then you need to spend an extra 24 hours fixing it for IE.

I've wrestled with it for ages, but the last thing that is happening is a variable is constantly 'undefined' in IE7.

It is coming from an html5 data attribute called data-title.

I've looked around and have also tried the solutions offered in both this and this stackoverflow questions.

Thus, I have tried

$(this).attr('data-title');

and

$(this).data('title');

and regarding the last solution

var newTitle = $(this).getAttribute("data-title");

I get an error:

Uncaught TypeError: Object [object Object] has no method 'getAttribute'

The thing is, I can't load the variable with getElementById because the elements are generated by jQuery Maximage

The element generated looks like this:

<div class="mc-image collection-image" title="" style="background-image: url(http://www.server.com/image.jpg); position: absolute; top: 0px; left: 0px; z-index: 12; opacity: 1; display: block; width: 1292px; height: 670px; " data-title="The&nbsp;Title" data-href="#collection-description-172"></div>

I am using the data-title attribute to set the text in another div on the side when maximage/jQuery cycle changes the image.

I am at a complete loss.

Cœur
  • 37,241
  • 25
  • 195
  • 267
waffl
  • 5,179
  • 10
  • 73
  • 123
  • Just FYI, IE7 is not an HTML5 browser, so the problem with the attribute could be related. I'm not 100% sure how IE7 handles nonstandard attributes. With that said, I stopped supporting IE7. The amount of input required to get things working on it is less than the output, since less than 2.3% of people are still using IE7! Source: http://www.w3schools.com/browsers/browsers_explorer.asp Or to look at it from the other perspective, 97.7% of people *are not* using IE7. – jamesmortensen May 24 '12 at 05:15
  • @jmort253 Thanks for the information. I agree, supporting IE7 actually isn't so important then, so I upgraded the browser to IE8 and unfortunately am still getting the variable as undefined. Any ideas how to go about debugging this? I tried debugbar but it isn't throwing any errors. – waffl May 24 '12 at 13:31
  • What happens if you add a watch for $(this) and inspect it? What's inside it? Just to check if your selector that gets you to the mentioned code is correct... – Jeroen May 24 '12 at 13:55
  • 1
    @Jeroen In my comments below, I've setup Debugbar/companionJS and see that `$(this).html()` is giving an image `` When I toss that into a jsbin and try to read the data attribute it works, so I really cannot comprehend why it isn't working with the same source code on the live site!! – waffl May 24 '12 at 20:07
  • The only thing left I'm afraid is to create a small but working (reproducible) scenario for fellow-SO folks. Trim down the live site bit by bit, until you have a minimal sample, and post it here. Otherwise it will be very hard for us to help you. – Jeroen May 24 '12 at 20:36

2 Answers2

1

Uncaught TypeError: Object [object Object] has no method 'getAttribute'

Because $(this) is a jQuery object and getAttribute() expects a DOM element. Try with just this

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Hi elclanrs, any idea why that would only show up in IE7? Wouldn't that appear in other browsers too? – jamesmortensen May 24 '12 at 05:17
  • @elclanrs hi, when I try it, I get `null` instead of `undefined`. Is there any way to define `this` to `$this` as a DOM element? Unfortunately maximage doesn't create the elements with ID's. (though I could edit the plugin itself I suppose) – waffl May 24 '12 at 13:36
  • OK - I modified the plugin to give each div a unique ID. Then I have this in my jQuery: `var el = document.getElementById($(this).attr('id')); var newTitle = ""+el.getAttribute('data-title')+"";` which works perfectly still in every other browser except for IE. IE now throws the error `'null' is null or not an object`! Argg IE, why do you taunt me... For reference, the page I am having issues with is [here](http://www.sloeberlin.com/collection) – waffl May 24 '12 at 13:58
  • For the life of me... I've downloaded some IE debug tools and now realized that maximage is building the cycle differently for older browsers that don't support background scaling. However, I've edited it to put the data attribute in as well, and using the debug tools, I see that `$(this).html();` is `` yet I am still unable to get access to this data attribute (yes, i changed the name to custom-title) – waffl May 24 '12 at 19:02
0

I was having a similar problem, setting the data property to a button and them retrieving it on JQuery. I kept getting the "Uncaught TypeError: Object [object Object] has no method 'getAttribute'"

I solve this on my side with the following:

http://www.rqna.net/qna/kvtryn-jquery-ie7-variable-is-undefined-works-in-chrome-safari-firefox.html

When having:

<input type="button" class="btn" data-passengerMode="@item.PassengerMode"/>

This works for me:

$('#btn_0').get(0).getAttribute('data-passengerMode')

Or this

$('#btn_0')[0].getAttribute('data-passengerMode')

All because I didn't want to use the html approach:

document.getElementById('btn_0')

Hope it helps if you can try on your dynamic loading.

Pimenta
  • 1,029
  • 2
  • 13
  • 32