The select box dynamic add option not working in firefox3.6 - javascript

I am having the below code for population the select box dynamically.THis works fine in all browsers except FireFox 3.6
var option25 = document.createElement("option");
option25.text = '25 miles';
option25.value = 25;
if(rad == '25')
{
option25.selected = 'selected';
}
var combo = document.getElementById('ddlProximity_' + controlId);
combo.add(option25); //not working in FF3.6
Any suggestions

The add method on select elements takes two arguments in Gecko versions older than 7 (MDN).
In IE it only takes one argument, or two if it's IE 8 in IE 8 standards mode, or something MSDN.
If we take krg's code and check the arity before calling add it works in Firefox 3.6.28, Firefox 15.0.1, and IE 9:
if (typeof combo.add === 'function') {
if (combo.add.arity === 1) {
combo.add(option25);
} else {
combo.add(option25, null);
}
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
​

Assuming combo is a select menu, see this jsFiddle example.
if (typeof combo.add === 'function') {
combo.add(option25);
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
​

If you would like to ensure that your JS code works across a wide spectrum of browsers, I would use a JavaScript framework such as jQuery to perform the DOM manipulation. JS frameworks have worked out most of the cross-browser problems and abstracted away the handling of them, so that you don't have to worry about writing code to address problems in a specific browser. Here's jQuery's site: http://jquery.com/.
Now to accomplish what your example says in jQuery, you would do the following:
var option25 = $('<option>').val(25).text('25 miles');
if (rad == '25') {
option25.attr('selected', 'selected');
}
var combo = $('#ddlProximity_' + controlId);
combo.append(option25); // Will work in all browsers supported by jQuery
If you really want to do this without any JS frameworks, I would take a look here: http://www.w3schools.com/jsref/met_select_add.asp . The add method should work, but there are some caveats in IE versions prior to 8 and your page must have a proper DOCTYPE declaration. You can also try appendChild, but I would test it in a few browsers to see if that accomplishes what you need.

Related

XPathEvaluator Detection in IE11

I see that XPathEvaluator isn't supported in IE 11 however I wanted to know if there's a proper detection mechanism to check for it's existence if not fall back to the selectSingleNode method in IE.
Something similar to this however whenever I check for XPathEvaluator in this fashion it blows up in IE 11 but works in Firefox/Chrome
if (XPathEvaluator) {
var xpe = new XPathEvaluator();
...... evaluation logic
return results.singleNodeValue;
}
else {
return xmlDoc.selectSingleNode(elPath);
}
Previous logic used to rely on the existance of the window.ActiveXObject to call selectSingleNode however the property has since been removed in IE 11 causing XPathEvaluator logic to be hit instead.
I'd rather detect if this functionality exists and not check for browser versions as features and functionality are constantly changing.
This is my simple test case.
IE 11 will alert the I am not IE popup, and then blow up on the XPath.
FF/Chrome will alert the I am not IE pop and then alert XPathEvaluator is a go.
function selectSingleNode()
{
// previous logic relied on this to call XPathEvaluator
if(window.ActiveXObject)
{
alert('Im IE');
}
else
{
alert('I am Not IE');
}
// I wanted to do something like this.
if(XPathEvaluator)
{
alert('XPathEvaluator is a go');
}
else
{
alert('XPathEvaluator is a no go');
}
}
If you want to use a certain method then check for it, so if you want to use selectSingleNode then do
if (typeof xmlDoc.selectSingleNode != 'undefined') {
// now use selectSingleNode method here
}
I am not sure why you want to check for XPathEvaluator, if you want to check whether there is an evaluate method on the document node to use the W3C DOM Level 3 XPath API then doing
if (typeof xmlDoc.evaluate != 'undefined') {
// now use evaluate method here
}
So together you can check
if (typeof xmlDoc.evaluate != 'undefined') {
// now use evaluate method here
}
else if (typeof xmlDoc.selectSingleNode != 'undefined') {
// now use selectSingleNode method here
}

Substitute for ALLOW_KEYBOARD_INPUT javascript full screen

I have been searching on the internet for a reason why my fullscreen javascript doesn't work in Safari, but yet works in webkit browser Chrome. It seems to that safari doesn't support the element.ALLOW_KEYBOARD_INPUT add-on for webkitRequestFullScreen.
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen(el.ALLOW_KEYBOARD_INPUT) || el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Does anybody know a way to make safari accept fullscreen yet still be able to handle keyboard inputs?
According to Apple's documentation, this is supposed to work in Safari 5.1 and later, but obviously it doesn't. I filed a bug report with Apple (which they don't make public), and the reply was as follows:
Engineering has determined that this issue behaves as intended based on the following:
We intentionally disable keyboard access in full screen for security reasons.
I have replied asking that they at least update the documentation and make the lack of feature support detectable somehow. I will update here if I get a reply.
Unfortunately, there isn't a good way to even do feature detection, since element.ALLOW_KEYBOARD_INPUT is defined in Safari, and the function call with that flag doesn't throw an error. The only remaining option is to parse the user agent string (try this library).
Obviously, Apple doesn't yet document which version supports this, but according to this, it stopped working as of v5.1.2. That would leave a very small number of people using 5.1 un-patched, if it ever even worked at all. So it's probably not even worth detecting the version.
As a fallback, I would expand the desired DOM element to fill the browser window by setting CSS height and width to 100% and position to "fixed" or "absolute".
Update: It looks like the documentation has been corrected and no longer mentions the ALLOW_KEYBOARD_INPUT flag.
This has been fixed in Safari 10.1!
Under the "Safari Browser Behavior" section.

Javascript - Script5002 - Function Expected when declaring a variable

I've looked through quite a few answers and other places online, but I haven't found anyone that is experiencing the error in the same way that I am.
My browser just updated to IE10 and that brought this to our attention. If I run in compatibility mode, the function seems to work just fine. If I'm not in compatibility mode, I get an IE debugger error SCRIPT5002 - Function Expected error.
I've marked the place where I get the error with ==>. If I take that variable out and replace the variable with the document.frames... it then references that line as the problem. Any help would be appreciated.
I inherited this code from a previous employee and have only been working with javascript for about 3 months. Here is the code:
function FncSaveClient(){
//Submit Primary Client form
//Verify Data
==> var CntSumFrm = document.frames('IFrameSummary').document.all.item('DefaultFrm');
if (CntSumFrm.fireEvent('onsubmit') == true){
CntSumFrm.submit();
}
//If Edit Mode Submit Subforms
var IntAcctNum = CntSumFrm.TxtAcctNum.value
if (IntAcctNum != 0){
//Locations Subform
var CntLocFrm = document.frames('IFrameLocations').document.all.item('DefaultFrm');
if (CntLocFrm.fireEvent('onsubmit') == true){
CntLocFrm.submit();
}
//Contacts Subform
var CntContactTbl = document.frames('IFrameContacts').document.all.item('TblContactSummary')
if (CntContactTbl.rows.length-3 == 0){
alert('You must have at least one contact per client.');
document.all.item('BtnSubTblClientContacts').style.color='red';
}
//Classification Subform
var CntClassFrm = document.frames('IFrameMarketing').document.frames('IFrameClassification').document.all.item('DefaultFrm');
if (CntClassFrm.fireEvent('onsubmit') == true){
CntClassFrm.submit();
}
//Save Client Admin
var CntAdminFrm = document.frames('IFrameAdmin').document.all.item('DefaultFrm');
if (CntAdminFrm.fireEvent('onsubmit') == true){
CntAdminFrm.submit();
}
else
{
document.all.item('BtnSubTblSalesRel').style.color='red';
}
}
if(CntSumFrm.TxtDeleted.value == 1)
{
window.parent.location.href = '/Accounts/';
}
}
That code is full of ancient IE-specific code, that is probably not allowed anymore even by IE, unless in compatibility mode. You should look into replacing stuff like:
document.frames
document.all
.items()
I believe the error happens because frames or item (maybe both) is not a function when IE follows the JS standards.
I had a similar issue with a Java Script I wrote back in 2005 today. An external user using IE10, which we are still back in IE8, couldn't get things to work properly. It appears that document.all has been deprecated and is only accessibly in compatibility mode. I removed the check I had for IE and so it now uses document.getElementById which I already had for other browsers, and it appears to work even with compatibility mode turned off.

Why would this code work in IE and fail in Firefox and Chrome?

So loading up our new web application in Firefox and Chrome I had an alert subtly tell me that a tabStrip couldn't be found. Following through the code I found this function:
function initializeTabStrip() {
var tblList = document.getElementsByTagName("table");
var tabStrip = null;
for (var i = 0; i < tblList.length; ++i) {
if (typeof (tblList[i].tabStripRoot) != "undefined") {
tabStrip = tblList[i];
break;
}
}
if (tabStrip) {
window.tabStrip = new TabStrip(tabStrip);
}
else {
alert("couldn't find tabstrip");
}
}
In both Firefox and Chrome, typeof (tblList[i].tabStripRoot) comes up to be undefined, whereas in Internet Explorer the same section of code will find an item, and follow through correctly.
I've tried using Firebug and IE's developer toolbar script debugging tool to follow through and attempt to discover what 'tabStripRoot' is, but I haven't had any luck.
Would any of you JavaScript guru's be able to give me some direction into why one out of three browsers works?
Thanks for your help.
You're relying on IE's non-standard ability to access arbitrary attributes as properties of DOM elements.
In standards-compliant browsers, you cannot write someElement.tabStripRoot to access the tabStripRoot attribute.
Change it to tblList[i].getAttribute('tabStripRoot').

Detecting support for VML, help applying a previous post

I found the following in a previous post but need some help with it:
// For VML detection, here's what google maps does (search for "function Xd"):
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported;
}
I would like to use the code to divert users to an alternative page when VML is not supported. Please could somebody show me how to write and implement the code to divert, say, to a page called alternative.html.
I have some knowledge of javascript but not this level!
Thanks.
You can just make a call to that function provided by Google, and it will return true if VML is supported and false if not. Don't forget, you will still need to add the xmlns for VML somewhere in your HTML.
if (!supportsVml())
window.location = "http://somedomain.com/no-vml.html";
Also, I would recommend using a cross-browser library for drawing vector graphics. There's a few to choose from in this blog post: Canvas/SVG/VML Drawing Roundup.
VML is only supported in Internet Explorer (as of 5.0) and is not supported in any other browser. So checking for IE should be just enough. This can be done in many ways, for example: !!document.namespaces

Categories