Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Internet Explorer 8 "SCRIPT438: Object doesn't support this property or method" #2

Closed
simonberube opened this issue Jul 25, 2012 · 7 comments
Closed

Internet Explorer 8 "SCRIPT438: Object doesn't support this property or method" #2

simonberube opened this issue Jul 25, 2012 · 7 comments
Assignees
@johnnyfreeman

Comments

@simonberube
Copy link

Internet Explorer 8 raises a JavaScript error with this plugin. It says SCRIPT438: Object doesn't support this property or method. I don't think this was previously spotted since we'd been using the jQuery version of the plugin.

<!DOCTYPE html>
<html>
<head>
<title>Testing Internet Explorer / Mootools Placeholder plugin</title>
</head>
<body>
    <label for="first">First</label>
    <input type="text" name="first">
    <label for="first">Second</label>
    <input type="text" name="second">
    <label for="first">Third</label>
    <input type="text" name="third">
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>
<script>
/**
 * Mootools Placeholder Plugin 1.0
 *
 * http://johnnyfreeman.github.com/placeholder/
 * Copyright 2011, Johnny Freeman
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

;(function(){var c=new Class({Implements:[Options,Events],options:{className:"placeholder",onRestore:function(){},onClear:function(){}},freezeEvents:!1,field:null,nativeSupport:"placeholder"in document.createElement("input"),initialize:function(a,b){this.field=a;this.setOptions(b);this.field.addEvents({blur:this.restore.bind(this),focus:this.clear.bind(this)});this.options.freezeEvents=!0;this.restore();this.options.freezeEvents=!1;return this},restore:function(){this.field.getProperty("value").length|| (this.field.addClass(this.options.className),this.nativeSupport||this.field.setProperty("value",this.field.getProperty("placeholder")),this.options.freezeEvents||this.fireEvent("restore"));return this},clear:function(){this.field.removeClass(this.options.className);this.field.getProperty("placeholder")==this.field.getProperty("value")&&(this.nativeSupport||this.field.setProperty("value",""),this.options.freezeEvents||this.fireEvent("clear"));return this}});Elements.implement({placeHolder:function(a){return this.each(function(b){return new c(b, a)})}});Element.implement({placeHolder:function(a){return new c(this,a)}})})(document.id);

var textfields = $$('input[type="text"], textarea');
textfields.getPrevious('label').each(function(el){
    labeltext = $(el).get('text');
    $(el).getNext('input, textarea').setProperty('placeholder', labeltext).placeHolder();
});
</script>
</body>
</html>
@simonberube
Copy link
Author

Technically, Internet Explorer 9 in Internet Explorer 8 mode.

@ghost ghost assigned johnnyfreeman Jul 25, 2012
@johnnyfreeman
Copy link
Owner

Looking at it now...

@johnnyfreeman
Copy link
Owner

Mini-update: The problem is on this line...

 $(el).getNext('input, textarea').setProperty('placeholder', labeltext).placeHolder();

I have a feeling it's because IE8 doesn't support the placeholder attribute, and setProperty is failing...

Still looking into this...

@johnnyfreeman
Copy link
Owner

Ok, that's not it...

setProperty is not the issue here. It looks like it doesn't recognize .placeHolder as a method. I'll let you know what I find.

Btw, these two lines:

labeltext = $(el).get('text');
$(el).getNext('input, textarea').setProperty('placeholder', labeltext).placeHolder();

can be simplified to just:

labeltext = el.get('text');
el.getNext('input, textarea').setProperty('placeholder', labeltext).placeHolder();

Notice I'm not wrapping el with the $() function? That's not needed when using Mootools unless you are trying to find an element. Not if you already have access to it. :)

@johnnyfreeman
Copy link
Owner

This is sooo frustrating! If IE Dev tools would give me anything more than vague error messages this thing would be solved by now. Think someone should make an IE frame for chrome! :)

@simonberube
Copy link
Author

Heh. Very frustrating indeed. I'm dealing with other JavaScript issues which have not given any clear indicators. I feel your pain! Thank you for looking into this. I had wondered if this could be an isolated case with the particular website, but then I tested and found it's Internet Explorer 8.

@johnnyfreeman
Copy link
Owner

No problem! As much as I hate Internet Explorer, it has played a huge role in helping me (and albeit countless others) develop my troubleshooting skills! :)

I have narrowed this down to the Element.placeHolder and Elements.placeHolder methods. Both seem to be broken in IE8. It may be the Mootools' .implement method that is the culprit here; I'm not sure yet. But for the time being, here is a working version:

<!DOCTYPE html>
<html>
<head>
<title>Testing Internet Explorer / Mootools Placeholder plugin</title>
</head>
<body>
    <label for="first">First</label>
    <input type="text" name="first">
    <label for="first">Second</label>
    <input type="text" name="second">
    <label for="first">Third</label>
    <input type="text" name="third">
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>
<script>
/* Mootools Placeholder Plugin 1.1 - https://github.com/johnnyfreeman/placeholder */
;(function(){var c=new Class({Implements:[Options,Events],options:{className:"placeholder",onRestore:function(){},onClear:function(){}},freezeEvents:!1,field:null,nativeSupport:"placeholder"in document.createElement("input"),initialize:function(a,b){this.field=a;this.setOptions(b);this.field.addEvents({blur:this.restore.bind(this),focus:this.clear.bind(this)});this.options.freezeEvents=!0;this.restore();this.options.freezeEvents=!1;return this},restore:function(){this.field.getProperty("value").length|| (this.field.addClass(this.options.className),this.nativeSupport||this.field.setProperty("value",this.field.getProperty("placeholder")),this.options.freezeEvents||this.fireEvent("restore"));return this},clear:function(){this.field.removeClass(this.options.className);this.field.getProperty("placeholder")==this.field.getProperty("value")&&(this.nativeSupport||this.field.setProperty("value",""),this.options.freezeEvents||this.fireEvent("clear"));return this}});window.placeHolder=c;Elements.implement({placeHolder:function(a){return this.each(function(b){return new c(b, a)})}});Element.implement({placeHolder:function(a){return new c(this,a)}})})(document.id);


var textfields = $$('input[type="text"], textarea');
textfields.each(function(textfield) {
    var label, labelText;
    label = textfield.getPrevious('label');
    labelText = label.get('text');
    textfield.setProperty('placeholder', labelText);
    // using the constructor instead of the 
    // Element.placeHolder to fix IE8 issues
    new placeHolder(textfield);
});
</script>
</body>
</html>

Let me know if it works for ya!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnnyfreeman johnnyfreeman

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@johnnyfreeman @simonberube