how can i trigger a double click in the onclick event for a dropdown select box in IE?

hi it seems ie 6 through 9 have no ondblclick events for the select dropdown boxes... yet i need to do this onclick as the dropdowns which are populated by ajax do not stay open to select after clicking - if using ie 6 through 9.
microsoft has been a royal pain in the arse about this, i am however not prepared to reload the option's html via ajax... it loads xml instead, which is read and populated. an alternative would be to trigger the reinstantiation of the select element, however i do not see any event of this type in ie.
please help! i only found a reference to "many ways to skin a cat", and i know that triggering a double click on the select box would help. however - i cannot seem to figure the syntax of doing this, which i have tried as follows:
document.forms.canopy.Model.onclick = function () {
	if (navigator.appVersion.indexOf("MSIE") > -1)  this.ondblclick();
	...
}

document.forms.canopy.Model.onclick = function () {
	if (navigator.appVersion.indexOf("MSIE") > -1)  this.ondoubleclick();
	...
}

document.forms.canopy.Model.onclick = function () {
	if (navigator.appVersion.indexOf("MSIE") > -1)  this.onclick(); this.onclick();
	...
}

Open in new window

unfortunately all with errors on clicking the populated dropdowns. thus it "works" only if the error alerts are disabled. -_-
intellisourceAsked:
Who is Participating?
 
Andrew DerseIT ManagerCommented:
Hello,

I have read through your post and I have an interesting suggestion for you...that has worked for me on many different sites.

Instead of pre-populating the select list areas...for example, you have all of your select lists visible as soon as the page loads...

Why don't you have the ajax call bring back the entire select list?  If the item gets changed it will bring back another entire select list.  This way you can dynamically load those in and they will work properly in any browser environment...

The way you have them pre-loaded...doesn't always work...as you found out...dynamically creating these select lists is the way to go :)

You can see examples of this in the attached video.  

Please let me know if you can't see the video and I will send you some code to explain what's going on...
capture-3.flv
0
 
Michel PlungjanIT ExpertCommented:
The first one is correct syntax.
What are the errors you get?
Does it help to do

if (navig.....) try { this.ondbllclick(); } catch() {}
0
 
intellisourceAuthor Commented:
hi, unfortunately it seems not. i get the following errors in IE9, 8, 7 & 6:
MSIE 9:
SCRIPT438: Object doesn't support this property or method 

MSIE 8:
Message: Object doesn't support this property or method
Line: 424
Char: 50
Code: 0

MSIE 7:
Line: 425
Char: 50
Error: Object doesn't support this property or method
Code: 0

MSIE 6:
Line: 425
Char: 50
Error: Object doesn't support this property or method
Code: 0

Open in new window


unfortunately it does not help, cause if i fix the syntax to the followiing.
if (navig.....) try { this.ondblclick(); } catch (e) { }

Open in new window

msie versions, still have the hiding the ajax loaded dropdown options issue again - which i am trying to work around in the first place...

i noticed that they stay visible however, if i double click - but not all users do this - this is why i need to emulate a double click on click of the various select dropdowns.

i also just found this page to simuate mouse events. i'd need to test the script for ie 6 through 9 though...

...unfortunately, the following function and helpers from that url, only work in IE6.
function simulate(element, eventName) {
	var options = extend(defaultOptions, arguments[2] || {});
	var oEvent, eventType = null;
	for (var name in eventMatchers) {
		if (eventMatchers[name].test(eventName)) { eventType = name; break; }
	}
	if (!eventType) throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
	if (document.createEvent) {
		oEvent = document.createEvent(eventType);
		if (eventType == 'HTMLEvents') {
			oEvent.initEvent(eventName, options.bubbles, options.cancelable);
		} else {
			oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
				options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
				options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
		}
		element.dispatchEvent(oEvent);
	} else {
		options.clientX = options.pointerX;
		options.clientY = options.pointerY;
		var evt = document.createEventObject();
		oEvent = extend(evt, options);
		element.fireEvent('on' + eventName, oEvent);
	}
	return element;
}

function extend(destination, source) {
for (var property in source)
	destination[property] = source[property];
return destination;
}

var eventMatchers = {
	'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
	'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
	pointerX: 0,
	pointerY: 0,
	button: 0,
	ctrlKey: false,
	altKey: false,
	shiftKey: false,
	metaKey: false,
	bubbles: true,
	cancelable: true
}

Open in new window

what should be tweaked to make it work in IE7 through IE9 and possibly IE10 too?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
intellisourceAuthor Commented:
it seems ie9+ uses the dispatchEvent and createEvent methods. pre-ie9 would be using the fireEvent and createEventObject methods. i am assuming here that pre-ie7 does not have either of the method pairs, hence the need for the aforementioned simulate function...
would anyone else perhaps like to comment?
the reference used was the dispatchEvent method dottoro reference
0
 
intellisourceAuthor Commented:
but this does not work truly. how can i reinitialise the ajax populated dropdowns after population, for ie6-9 and 10 to keep them open once clicked? (to NOT hide the options!) - i do not want to send the whole innerhtml to and from server.
basically to leave the populated dropdown open after internet explorer hides it. -_-
the url for the form is http://www.canopyxchange.co.za/
0
 
intellisourceAuthor Commented:
hi there NUKIT - firstly, i have seen this suggested before - but because the select lists along with the form are defined/built within xsite pro by my client - i would have to work from a javascript document (to load and build the selects).
now i have only removed all but one of the selects - then added the new ones, but for some reason this is problematic in IE. with jquery u can re-instantiate the element - but i have lost this post due to browser tabs being reset.
there he also suggested loading the whole select element via ajax... the only option the way i see it is to delete the select element after populating and re-instantiate it.
what would you say, nukit?
from what i understood of that article - only ie behaves this way because the engine needs to add the select to the document tree again after updating the options. it gets removed from the DOM once u empty the options.
is there a quick way to re-initialize a select which has just been populated with options, using jQuery?

i have attempted clearing the parent element of all children (deleting the select object too), then creating in memory a new select object - then once populatzing adding to the document tree - as follows:
function addoption(arr) {
	ret = false;
	var par;
	for (var i = 0; i < arr.length; i++) {
		if (arr[i][0] != "Accessories") {
			if (i == 0 || arr[i][0] != arr[i-1][0]) {
				par = document.getElementById("jq" + arr[i][0]);
				while (par.firstChild) {
					par.removeChild(myNode.firstChild);
				}
				var sel = document.createElement('SELECT');		// attribute key
				sel.setAttribute("name", arr[i][0]);
				sel.setAttribute("id", arr[i][0]);
				sel.style.width = "125px";
				sel.disabled = true;
			}
			var opt = document.createElement('OPTION');
			opt.text = arr[i][1];								// attribute text
			opt.value = arr[i][1];								// attribute value
			try {
				sel.add(opt, null);								// standards compliant; doesn't work in IE
			}
			catch(ex) {
				sel.add(opt);									// IE only
			}
			if (i == arr.length - 1) sel.options[0].text = "";	// reset dropdown options text
			if (arr[i][2]) {
				sel.selectedIndex = i+1;
				ret = ajaxRequest(document.forms.canopy.Region);
			}
			if (sel.disabled) {
				sel.disabled = false;
				par.add(sel);
			}
		}
	}
	document.getElementById("ajax0").style.background = "none";
	document.getElementById("ajax1").style.background = "none";
	document.getElementById("ajax2").style.background = "none";
	document.getElementById("ajax3").style.background = "none";
	document.getElementById("ajax4").style.background = "none";
	document.getElementById("ajax5").style.background = "none";
	document.getElementById("ajax6").style.background = "none";
	document.getElementById("ajax7").style.background = "none";
	document.getElementById("ajax8").style.background = "none";
	document.getElementById("ajax9").style.background = "none";
	return ret;
}

Open in new window

there are no errors in any of the browsers tested in, and once again works for all except ie7-9.
i am thinking to get client to suggest to IE users 7+ to double click the selects. surely building a dom select element around the options, then replacing the existing select with the one from memory should have the same end result as with the code you suggested?

it also seems that dynamically creating a select to attach the options to does not work either, after clearing the parent object of children.
0
 
Andrew DerseIT ManagerCommented:
it also seems that dynamically creating a select to attach the options to does not work either, after clearing the parent object of children.

How so?

If you remove the select list (using javascript), you should be able to write a brand new select list in your php file with your <options> in the list...

Just echo out the entire select list in your AJAX call...I've attached a simple example of this...you will need to change the database variables to get it to pull anything from your database, but this is just a simple example of what I was talking about before.
forms.zip
0
 
intellisourceAuthor Commented:
no scratch that - it works perfectly - don't even have to change the xml being received on the client ;)
function addoption(arr) {
	ret = false;
	var par;
	var sel;
	for (var i = 0; i < arr.length; i++) {
		if (arr[i][0] != "Accessories") {
			if (i == 0 || arr[i][0] != arr[i-1][0]) {
				//alert("jq" + arr[i][0]);
				if (eval(document.getElementById("jq" + arr[i][0]))) {
					par = document.getElementById("jq" + arr[i][0]);
					while (par.childNodes.length) {
						par.removeChild(par.lastChild);
					}
					var sel = document.createElement('SELECT');		// attribute key
				} else {
					var sel = document.getElementById(arr[i][0]);
				}
				sel.setAttribute("name", arr[i][0]);
				sel.setAttribute("id", arr[i][0]);
				sel.style.width = "125px";
				sel.disabled = true;
			}
			var opt = document.createElement('OPTION');
			opt.text = arr[i][1];								// attribute text
			opt.value = arr[i][1];								// attribute value
			try {
				sel.add(opt, null);								// standards compliant; doesn't work in IE
			}
			catch(ex) {
				sel.add(opt);									// IE only
			}
			if (i == arr.length - 1) sel.options[0].text = "";	// reset dropdown options text
			if (arr[i][2]) {
				sel.selectedIndex = i+1;
				ret = ajaxRequest(document.forms.canopy.Region);
			}
			if (sel.disabled) {
				sel.disabled = false;
				if (eval(document.getElementById("jq" + arr[i][0]))) {
					par.appendChild(sel);
				}
			}
		}
	}
	document.getElementById("ajax0").style.background = "none";
	document.getElementById("ajax1").style.background = "none";
	document.getElementById("ajax2").style.background = "none";
	document.getElementById("ajax3").style.background = "none";
	document.getElementById("ajax4").style.background = "none";
	document.getElementById("ajax5").style.background = "none";
	document.getElementById("ajax6").style.background = "none";
	document.getElementById("ajax7").style.background = "none";
	document.getElementById("ajax8").style.background = "none";
	document.getElementById("ajax9").style.background = "none";
	return ret;
}

Open in new window

i had forgotten to upload the latest form with the jqName parent id's.
0
 
intellisourceAuthor Commented:
thanks this is kindof the approach i took and it did work... :)
1). i let the script on new element name, clear dropdown parent and create new dropdown to add options to.
2) i append this new select to the parent element.
3). done o/ :D
0
 
Andrew DerseIT ManagerCommented:
Excellent!  Glad it worked for you!
0
 
intellisourceAuthor Commented:
now all of a sudden it won't any more with the following code which was "finetuned" so as not to skip options...
function addoption(arr) {
	ret = false;
	var par;
	var sel;
	arr[-1] = new Array();
	arr[-1][0] = "";
	for (var i = 0; i < arr.length; i++) {
		if (arr[i][0] != "Accessories") {
			if (i == 0 || arr[i][0] != arr[i-1][0]) {
				// destroy old and create new/select existing element if change in name detected
				if (par = document.getElementById("jq" + arr[i][0])) {
					while (par.childNodes.length) {
						par.removeChild(par.lastChild);
					}
					var sel = document.createElement('select');		// attribute key
				} else {
					var sel = document.getElementById(arr[i][0]);
				}
				// set up new / existing element
				sel.setAttribute("name", arr[i][0]);
				sel.setAttribute("id", arr[i][0]);
				sel.disabled = true;
				sel.options.length = 1;
				sel.style.width = "125px";
				sel.style.fontSize = "11px";
			}
			var opt = document.createElement('option');
			opt.text = arr[i][1];								// attribute text
			opt.value = arr[i][1];								// attribute value
			try {
				sel.add(opt, null);								// standards compliant; doesn't work in IE
			}
			catch(ex) {
				sel.add(opt);									// IE only
			}
			if (i == arr.length - 1) sel.options[0].text = "";	// reset dropdown options text
			if (arr[i][2]) {
				sel.selectedIndex = i+1;
				ret = ajaxRequest(document.forms.canopy.Region);
			}
			if (sel.disabled) {
				sel.disabled = false;
				if (eval(document.getElementById("jq" + arr[i][0]))) {
					par.appendChild(sel);
					addevents(sel);
				}
			}
		}
	}
	document.getElementById("ajax0").style.background = "none";
	document.getElementById("ajax1").style.background = "none";
	document.getElementById("ajax2").style.background = "none";
	document.getElementById("ajax3").style.background = "none";
	document.getElementById("ajax4").style.background = "none";
	document.getElementById("ajax5").style.background = "none";
	document.getElementById("ajax6").style.background = "none";
	document.getElementById("ajax7").style.background = "none";
	document.getElementById("ajax8").style.background = "none";
	document.getElementById("ajax9").style.background = "none";
	return ret;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.