Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question Simple Dialog Box-Not reading all variables into array

    This is a simple dialog box and it works, apart from one option not passing or working correctly with javascript file.
    Could any one help and explain why this particular option is not working?

    Here is the html page javascript all options are passed and work apart from:
    Code:
    buttons: {'Close': this.close}
    The button will not close the box, if I omit this option it works fine.
    This is html page javascript code:
    Code:
    <script type="text/javascript">
    	var Demo = {
    	        alertDialog: null,
    	        alert: function(content) {
    	                if (!this.alertDialog) {
    	                        this.alertDialog = new Dialog({
    		title: 'Hello',
    		width: 400,
    		top: 100,
    		buttons: {'Close': this.close}
    									});
    	                }
    	                this.alertDialog.content.innerHTML = content;
    	        }
    	};
    	Demo.alert('<b>Hello Visitor!</b><br/><br/>Welcome to our website!');
    </script>
    and here is the javascript file:
    Code:
    /* Utility functions */
    function bindEventHandler(element, eventName, handler) {
    	if (element.addEventListener) {
    		// The standard way
    		element.addEventListener(eventName, handler, false);
    	} else if (element.attachEvent) {
    		// The Microsoft way
    		element.attachEvent('on' + eventName, handler);
    	}
    }
    /**
     * The modal dialog class
     * @constructor
     */
    function Dialog(options) {
    	this.options = {
    		width: 500,
    		top: 120,
    		openOnCreate: true,
    		destroyOnClose: true,
    		escHandler: this.close,
    		buttons: {'OK': this.close}
    	};
    	// Overwrite the default options
    	for (var option in options) {
    		this.options[option] = options[option];
    	}
    	// Create dialog dom
    	this._makeNodes();
    	if (this.options.openOnCreate) {
    		this.open();
    	}
    }
    Dialog.prototype = {
    	/* handles to the dom nodes */
    	container: null,
    	header: null,
    	body: null,
    	content: null,
    	actions: null,
    	_overlay: null,
    	_wrapper: null,
    	_zIndex: 0,
    	_escHandler: null,	
    	/**
    	 * Shows the dialog
    	 */
    	open: function() {
    		this._makeTop();
    		var ws = this._wrapper.style;
    		ws.left = (document.body.clientWidth - this.options.width) / 2 + 'px';
    		ws.top = (document.body.scrollTop || document.documentElement.scrollTop) + this.options.top + 'px';
    		this._overlay.style.display = 'block';
    		ws.display = 'block';
    		this._wrapper.focus();
    		if (this.options.focus) {
    			var input = document.getElementById(this.options.focus);
    			if (input) {
    				input.focus();
    			}
    		}
    	},
    	/**
    	 * Closes the dialog
    	 */
    	close: function() {
    		if (this.options.destroyOnClose) {
    			this._destroy();
    		} else {
    			this._overlay.style.display = 'none';
    			this._wrapper.style.display = 'none';
    		}
    	},
    	/**
    	 * Add buttons to the dialog actions panel after creation
    	 * @param {object} buttons Object with property name as button text and value as click handler
    	 * @param {boolean} prepend If true, buttons will be prepended to the panel instead of being appended
    	 */
    	addButtons: function(buttons, prepend) {
    		var actions = this.actions;
    		var buttonArray = this._makeButtons(buttons);
    		var first = null;
    		if (prepend && (first = actions.firstChild) != null) {
    			for (var i in buttonArray) {
    				actions.insertBefore(buttonArray[i], first);
    			}
    		} else {
    			for (var i in buttonArray) {
    				actions.appendChild(buttonArray[i]);
    			}
    		}
    	},
    	/**
    	 * Change (or set) title after creation
    	 * @param {string} title The dialog title
    	 */
    	setTitle: function(title) {
    		if (!this.header) {
    			var header = document.createElement('div');
    			header.className = 'dialog-header';
    			this.container.insertBefore(header, this.body);
    			this.header = header;
    		}
    		this.header.innerHTML = title;
    	},
    	/**
    	 * Makes the dom tree for the dialog
    	 */
    	_makeNodes: function() {
    		if (this._overlay || this._wrapper) {
    			return; // Avoid duplicate invocation
    		}
    		// Make overlay
    		this._overlay = document.createElement('div');
    		this._overlay.className = 'dialog-overlay';
    		document.body.appendChild(this._overlay);
    
    		if (typeof this.options.title == 'string' && this.options.title != '') {
    			var header = document.createElement('div');
    			header.className = 'dialog-header';
    			header.innerHTML = this.options.title;
    			this.header = header;
    		}
    		// {begin dialog body
    		var content = document.createElement('div');
    		content.className = 'dialog-content';
    		content.innerHTML = this.options.content;
    		this.content = content;
    		//   {begin actions panel
    		var actions = document.createElement('div');
    		actions.className = 'dialog-actions';
    		var buttons = this._makeButtons(this.options.buttons);
    		if (buttons.length > 0) {
    			for (var i in buttons) {
    				actions.appendChild(buttons[i]);
    			}
    		}
    		this.actions = actions;
    		//   }end actions panel
    		var body = document.createElement('div');
    		body.className = 'dialog-body';
    		body.appendChild(content);
    		body.appendChild(actions);
    		this.body = body;
    		// }end dialog body
    		var container = document.createElement('div');
    		container.className = 'dialog';
    		if (this.header) {
    			container.appendChild(header);
    		}
    		container.appendChild(body);
    		this.container = container;
    		var wrapper = document.createElement('div');
    		wrapper.className = 'dialog-wrapper';
    		var ws = wrapper.style;
    		ws.position = 'absolute';
    		ws.width = this.options.width + 'px';
    		ws.display = 'none';
    		ws.outline = 'none';
    		wrapper.appendChild(container);
    		// register keydown event
    		if (this.options.escHandler) {
    			wrapper.tabIndex = -1;
    			this._onKeydown = this._makeHandler(function(e) {
    				if (!e) {
    					e = window.event;
    				}
    				if (e.keyCode && e.keyCode == 27) {
    					this.options.escHandler.apply(this);
    				}
    			}, this);
    			bindEventHandler(wrapper, 'keydown', this._onKeydown);
    		}
    		this._wrapper = document.body.appendChild(wrapper);
    		if (Dialog.needIEFix) {
    			this._fixIE();
    		}
    	},
    	/**
    	 * Removes the nodes from document
    	 * @param {object} buttons Object with property name as button text and value as click handler
    	 * @return {Array} Array of buttons as dom nodes
    	 */
    	_makeButtons: function(buttons) {
    		var buttonArray = new Array();
    		for (var buttonText in buttons) {
    			var button = document.createElement('button');
    			button.className = 'dialog-button';
    			button.innerHTML = buttonText;
    			bindEventHandler(button, 'click', this._makeHandler(buttons[buttonText], this));
    			buttonArray.push(button);
    		}
    		return buttonArray;
    	},
    	/** A helper function used by makeButtons */
    	_makeHandler: function(method, obj) {
    		return function(e) {
    			method.call(obj, e);
    		}
    	},
    	/** A helper function used by open */
    	_makeTop: function() {
    		if (this._zIndex < Dialog.Manager.currentZIndex) {
    			this._overlay.style.zIndex = Dialog.Manager.newZIndex();
    			this._zIndex = this._wrapper.style.zIndex = Dialog.Manager.newZIndex();
    		}
    	},
    	_fixIE: function() {
    		var width = document.documentElement["scrollWidth"] + 'px';
    		var height = document.documentElement["scrollHeight"] + 'px';
    		var os = this._overlay.style;
    		os.position = 'absolute';
    		os.width = width;
    		os.height = height;
    		var iframe = document.createElement('iframe');
    		iframe.className = 'iefix';
    		iframe.style.width = width;
    		iframe.style.height = height;
    		this._wrapper.appendChild(iframe);
    	},
    	/**
    	 * Removes the nodes from document
    	 */
    	_destroy: function() {
    		document.body.removeChild(this._wrapper);
    		document.body.removeChild(this._overlay);
    		this.container = null;
    		this.header = null;
    		this.body = null;
    		this.content = null;
    		this.actions = null;
    		this._overlay = null;
    		this._wrapper = null;
    	}
    };
    Dialog.needIEFix = (function () {
    	var userAgent = navigator.userAgent.toLowerCase();
    	return /msie/.test(userAgent) && !/opera/.test(userAgent) && !window.XMLHttpRequest;
    })();
    /** This simple object manages the z indices */
    Dialog.Manager = {
    	currentZIndex: 3000,
    	newZIndex: function() {
    		return ++this.currentZIndex;
    	}
    };
    If I leave out the button option and just change the button text in the javascript file, the button works and closes the dialog box. It is only when I wish to change the button text option in the javascript on the html page the dialog box will not close. All other options are passed OK, my only choice at the moment is to change the button text in the javascript file and omit the button option on the html page.

    Cab any one help please, I am very new to javascript?

    Thank you

    Antoni

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Is the JavaScript console producing an error message?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hi WolfShade
    Sorry but I am not sure what you mean by JavaScript console.

    It doesn't give any errors when I run it in my browser when testing the webpage after the files have been uploaded to my server?

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Depending upon which browser you're using for testing, there's usually a way to see if there is any kind of JS error as a result. In most if not all versions of Internet Explorer, the lower-left corner will display a yellow triangle with an exclamation point if there is an error; double clicking it should bring up a dialog with the error message. FireFox has a JavaScript console in the options from the menu at the top left; error messages appear there, if there are any.

    IF there is an error message, it will tell you what went wrong and on what line of code.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    bluewax (05-13-2013)

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks for that WolfShade.

    I'm using firefox and when I click on the dialog box close button the error console says TypeError: method is undefined

    and shows the line where this occurs:
    Code:
    /** A helper function used by makeButtons */
    	_makeHandler: function(method, obj) {
    		return function(e) {
    			method.call(obj, e);
    		}
    	},
    Specifically this line:
    Code:
    method.call(obj, e);
    I really appreciate your help and advice, but this is way beyond me as to what is causing the problem!
    Thanks for you help.

    Antoni


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •