Solved

JavaScript error in ie

Posted on 2010-09-23
11
418 Views
Last Modified: 2013-11-08
Hello all I'm receiving an error in IE for a JavaScript function that calls a modal. Any help would be great I will attach the error and code below. Thanks

IE Webpage error details

Message: 'this._curView' is null or not an object

// JavaScript Document
FRA.ModalHandler = {
    views:[],
	_currentArgs:{},
    _isvisible: false,
    _curView:null,
	init:function() {
        var self = this;
        for (var skin in FRA.Skins.Modal) {
            this.views[skin] = new FRA.ModalView(FRA.Skins.Modal[skin],skin);
            this.views[skin].onClose = function() {
                self.hide();
            };
        }        
        this.bind();
	},
    show:function(args) {
	
        this._isvisible = true;
        this._curView = typeof args.skin === 'undefined'?this.views['default']:this.views[args.skin];
        this._curView.show(args);
	},
    hide:function(e) {
         this._isvisible = false;
         this._curView.hide();  
	},
    _click: function(base) {
		var args = FRA.Parser.parse(base.className,'modal',{
            width:200,
            height:200,
            skin:'default',
            base:base,
            content:'<p>Tooltip content undefined</p>'
        });
        args.content = '#'+args.content;
		FRA.ModalHandler.show(args);
    },

    bind:function() {
        var self = this;
        var launchers = document.getElementsByTagName('a');
        for (var i=0,len=launchers.length;i<len;i++) {
            if (launchers[i].className.match('modal::')) {
                launchers[i].onclick = function() {
                    self._click(this);
                };
            }
        }
	}
};

Open in new window

0
Comment
Question by:yando18
11 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33746263
Huh?  You defined it as 'null' in line 6.  It probably needs to be something else.
0
 

Author Comment

by:yando18
ID: 33746331
Any thoughts on what it should be? Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33746358
You confirm it run fine in FF or an other browser ?
Could you post more code or give a link on the page ?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 82

Expert Comment

by:leakim971
ID: 33746438
Line 20 : if args.skin in not defined we set the _curview with the default view : this.views['default']

but currently, line 3, you don't define a 'default' view :
views:[]
0
 

Author Comment

by:yando18
ID: 33746705
default view is defined in another part of the doc
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 33746709
to me it is not line 6 which is causing error. that is just the definition.
It should be line 20 and 21
somehow in line 20 _currView is not getting initialized and the second line must be throwing error
below is not getting initialized
this._curView = typeof args.skin === 'undefined'?this.views['default']:this.views[args.skin];

below is causing error due to above
this._curView.show(args);
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33746921
>default view is defined in another part of the doc

Yes, of the doc not in your code. Could you give us a link for this doc ?
You need to create somewhere or initialy populate, line 3, the views array
0
 

Author Comment

by:yando18
ID: 33747081
See attached.
// JavaScript Document
FRA.Skins = {
    Modal: {
        'default':'<div class="modal hidden"><div class="pad"><a class="close" href="javascript:void(0);"><img alt="" src="../i/modal/close.jpg" /></a><div class="modal_content"></div></div></div>',
        'empty':'<div class="modal hidden"><div class="modal_content" id="mc"></div></div>',
		'video':'<div class="video_overlay" id="video_overlay"><div class="video_wrapper" id="video_wrapper"><div class="video_player" id="video_player"><div style="background-color: #fff; padding: 20px"><center>In order to watch the video, you will need the latest flash player.<br><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /><br> <a href="javascript:FRA.ModalHandler.hide();" class="close">Close this screen</a></center></div></div></div></div>'
    },
    Tooltip: {
         'DEFAULT':'<div class="tooltip hidden"><div class="tooltip_border"><div class="tooltip_content"></div></div><div class="tooltip_carat"></div></div>'
    },
    Video : {
        'DEFAULT':'<div class="video_overlay" id="video_overlay"><div class="video_wrapper" id="video_wrapper"><div class="video_player" id="video_player"><div style="height:508px;background-color:#fff;padding:120px;text-align:center;"><h1 style="margin-bottom:50px;">In order to watch this video, you must update your version of<br />Adobe Flash Player.</h1><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" class="centered" alt="Get Adobe Flash player" /></a><div class="fixer" style="height:50px;"></div><a href="javascript:FRA.ModalHandler.hide();">Close this screen</a></div></div></div></div>'
    }
};

FRA.ModalView = function(el,type) {
    var self = this;
    this._el = el;
    this._type = type;
    this._contentDiv = FRA.$$(this._el,'div','modal_content')[0];
};

FRA.ModalView.prototype = {
     _el: null,
     _contentDiv:null,
     _nodes:[],
     _curContent:null,
     _useIHTML:false,
     _type:'default',
    show:function(args) {
	
        var self = this;
        if (args.type === 'iframe') {
            this._curContent = document.createElement('IFRAME');
            var w = args.width,
                h = args.height;
            if (this._type === 'default') {
                w = w-45;
                h = h-95;
            }
            this._curContent.style.width = w + 'px';
            this._curContent.style.height = h + 'px';
            this._curContent.style.border = 'none';
            this._useIHTML = true;
        } else if (this._type=== 'video') {
			 this._curContent = "<div id='video_content'></div>";
		}else {
            this._curContent = /^#/.test(args.content) ? 
                document.getElementById(args.content.replace('#','')) : 
                (function() {
                    self._useIHTML = true;
                    return args.content;
                })();      
        }
        
        FRA.OVERLAY.showOverlay();
        var st = document.body.scrollTop;
		if(st == 0) {
			var st = document.documentElement.scrollTop;
		}
        
        if (!this._useIHTML) {
            var cn = this._curContent.childNodes;
            for (var i=0,len=cn.length;i<len;i++) {
                if (cn[i].nodeType === 1) {
                    this._nodes.push(cn[i]);    
                }
            }
            for (var i=0,len=this._nodes.length;i<len;i++) {
                this._contentDiv.appendChild(this._nodes[i]);
            }
        } else if (args.type === 'iframe') {
            this._contentDiv.appendChild(this._curContent);
            this._curContent.setAttribute('src',args.content);
        } else {
            this._contentDiv.innerHTML = this._curContent;
        }
        
        this._contentDiv.style.opacity = 1;
        this._contentDiv.style.filter = 'alpha(opacity=100)';
        
        
        var x = 0, y = 0;
    	if (window.innerHeight) {
    		x = window.innerWidth;
    		y = window.innerHeight;
    	} else if (document.documentElement && document.documentElement.clientHeight) {
    		x = document.documentElement.clientWidth;
    		y = document.documentElement.clientHeight;
    	} else if (document.body) {
    		x = document.body.clientWidth;
    		y = document.body.clientHeight;
    	}        
        var wsize = {
            x: x,
            y: y
        };
        
        
        var top = st + (( wsize.y - args.height) / 2);
        var left = (wsize.x - args.width ) / 2;
        
        this._el.style.width = args.width+'px';
        this._el.style.height = args.height+'px';
        this._el.style.top = top+'px';
        this._el.style.left = left+'px';
        this._el.className = this._el.className.replace('hidden','');
        this._el.style.opacity = 1;
        this._el.style.filter = 'alpha(opacity=100)';
        
        this._bindclose();

    },
    _bindclose: function(){
        var close_buttons = FRA.$$(this._el,'*','close');
        var self = this;
        for(i=0; i<close_buttons.length;i++) {
            (function(index) {
                close_buttons[index].onclick = function() {
                  self.onClose();
                  return false;  
                };    
            })(i);            
        }
    },
    onClose:function() {},
    hide: function(){
        var height = this._el.style.height;
        var width = this._el.style.width;
        this._el.className = this._el.className+' hidden';
        this._el.style.top = '';
        this._el.style.left = '';
        this._el.style.width = '';
        this._el.style.height = '';
        this._el.style.opacity = 0;
        this._el.style.filter = 'alpha(opacity=0)';
        FRA.OVERLAY.hideOverlay();
        if (!this._useIHTML) {
            for (var i=0,len=this._nodes.length;i<len;i++) {
                this._curContent.appendChild(this._nodes[i]);
            }    
        }
        this._contentDiv.innerHTML = '';
        this._curContent = null;
        this._nodes = [];
        this._useIHTML = false;       
    },
    get:function() {
        return this._el;
    }
};

FRA.ModalHandler = {
    views:[],
	_currentArgs:{},
    _isvisible: false,
    _curView:null,
	init:function() {
        var self = this;
        for (var skin in FRA.Skins.Modal) {
            this.views[skin] = new FRA.ModalView(FRA.Skins.Modal[skin],skin);
            this.views[skin].onClose = function() {
                self.hide();
            };
        }        
        this.bind();
	},
    show:function(args) {
	
        this._isvisible = true;
        this._curView = typeof args.skin === 'undefined'?this.views['default']:this.views[args.skin];
        this._curView.show(args);
	},
    hide:function(e) {
         this._isvisible = false;
         this._curView.hide();  
	},
    _click: function(base) {
		var args = FRA.Parser.parse(base.className,'modal',{
            width:200,
            height:200,
            skin:'default',
            base:base,
            content:'<p>Tooltip content undefined</p>'
        });
        args.content = '#'+args.content;
		FRA.ModalHandler.show(args);
    },

    bind:function() {
        var self = this;
        var launchers = document.getElementsByTagName('a');
        for (var i=0,len=launchers.length;i<len;i++) {
            if (launchers[i].className.match('modal::')) {
                launchers[i].onclick = function() {
                    self._click(this);
                };
            }
        }
	}
};

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33748071
Do you show it by passing an argument ?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33748238
Replace the line 171 by the following :

can you confirm the alert you get ?
if(typeof args.skin === 'undefined') {
    this._curView = this.views['default'];
    alert("using default : " +  this._curView);
}
else {
    this._curView = this.views[args.skin];
    alert("using skin : " +  this._curView);
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33791886
Thanks for the points!
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert(innerHTML); 8 33
html input 8 44
Binding a Grid in Javascript 5 46
HTML Anchor Link Problem 3 39
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question