?
Solved

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

Posted on 2012-09-04
12
Medium Priority
?
2,643 Views
Last Modified: 2013-12-08
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. -_-
0
Comment
Question by:intellisource
  • 7
  • 3
11 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38366670
The first one is correct syntax.
What are the errors you get?
Does it help to do

if (navig.....) try { this.ondbllclick(); } catch() {}
0
 

Author Comment

by:intellisource
ID: 38368395
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
 

Author Comment

by:intellisource
ID: 38371410
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:intellisource
ID: 38371681
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
 
LVL 13

Accepted Solution

by:
Andrew Derse earned 2000 total points
ID: 38378302
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
 

Author Comment

by:intellisource
ID: 38382431
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38382965
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
 

Author Comment

by:intellisource
ID: 38383094
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
 

Author Closing Comment

by:intellisource
ID: 38383103
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38383158
Excellent!  Glad it worked for you!
0
 

Author Comment

by:intellisource
ID: 38383580
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses
Course of the Month15 days, 13 hours left to enroll

850 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