selectedIndex undefined in IE - javascript

I saw a few posts similar to my problem and tried the solutions offered, but I'm still having issues with IE8 & IE9 and 'selectedIndex'. This code returns my variable answerSubmitted as 'undefined':
var answerSubmitted = document.getElementById("DropDown-Answers").selectedIndex;
The above works perfectly in all other browsers. Based on another post here, I also tried this:
var answerSubmitted = document.getElementById("DropDown-Answers").value;
Still the same results - works elsewhere, but not in IE8 or IE9. I've verified that IE is recognizing that particular element by its ID.
Any guidance here?
MORE INFO:
I'm creating the drop down menu dynamically by going thru a loop and adding variable text between the option and /option tags, like so (note that 'tempRandom' is a random number updated each time thru the loop):
tempMenuText = tempMenuText + "<option>" + Answers[tempRandom] + "</option>";
The results are surrounded by the form an select tags, then I update the innerHTML of my element. This works and generates a working drop down menu. But... perhaps this is a clue: when I put a test with the innerHTML of the menu element into another element to view it, it shows as empty. It's as though IE is not seeing that there is HTML in the element, thinks it is null, and therefore 'selectedIndex' fails as null.

This is solved. It turns out it was my error in how I was referring to the ID of the selected item. An associate explained that .selectedIndex only works (in IE, at least), when the ID within the 'select' tag is correct. If not, it returns null, which is what was originally happening. All is good now. Thanks for the suggestions.

Related

Span element not updating correctly

Update 3 - 10/09/2013: Just tested this with Version 29.0.1547.66 m and the problem still persists. If anyone else can test this out and let me know the results that would be great. You need an inline element such as a span with some text in, have it relatively positioned and moved by however many pixels you want from left and top. Then set up some jScript to change the current inner html of the element to something else and you should see it remain the same in the viewport but change correctly in the DOM.
Update 2: After a bit more testing the problem seems to occur on elements that are inline such as span, or have CSS that makes them inline, but that are also relatively positioned, it seems to be this combination that is causing the issue. After posting the bug on Chromium it has been flagged as a cr-Blink-Rendering issue which looks to be the engine that renders the DOM in the broswer viewport. I am using Version 29.0.1547.57 (the current version ends .66 but mine has not updated due to an error). So if you're on the latest version this issue may no longer be there.
Update: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I have filed a bug report for this on chromium
I'm having a problem (that I have not been able to recreate with jsfiddle) where I perform an ajax request, obtain some values and place them within span elements that exist within my page.
I have a very odd problem where the ajax request is working and bringing the values back. The values are being inserted into the span elements via jQuerys .html' method and when I check the DOM using Chrome developer tools I can see the new value in the span.
However, what I see on the page doesn't reflect this, it still shows the old value. Yet if I attempt to highlight the value, it instantly changes to the correct value (the value that is showing in the DOM).
I have even tried to update the spans value before the ajax call (as the value I am using is being obtained from jQuery UI's slider widget) but this still yields the same results.
Has anyone else come across this?
EDIT: Here is some of the code
HTML
<div id="NewLoanSliderAmount" class="NewLoanSliderRules"></div>
<span id="NewLoanSliderAmountDisplay" class="NewLoanDisplay">£600</span>
The slider code. This is the version where I attempt to update it directly from the slider value
$("#NewLoanSliderAmount").slider({
value: amount,
min: 300,
max: amount,
step: 100,
change: function (event, ui) {
$("#NewLoanSliderAmountDisplay").html("£" + ui.value);
window.CkSpace.GetLoanValues();
}
});
Here is the ajax code:
(function (CkSpace, $, undefined) {
CkSpace.GetLoanValues = function () {
var url = "/Home/UpdateAPR";
$.get(url, { Amount: $("#NewLoanSliderAmount").slider("value"), Length: $("#NewLoanSliderLength").slider("value") }, function (data) {
$("#NewLoanAmount").html("£"+data.LoanAdvance);
$("#NewLoanLength").html(data.LoanTerm);
$("#NewLoanMonthlyCost").html("£"+data.LoanInstalment);
$("#NewLoanTotal").html(data.LoanGrossRepyable);
$("#NewLoanAPR").html(data.LoanAPR+"%");
$("#NewLoanSliderAmountDisplay").html("£" + data.LoanAdvance);
});
}
} (window.CkSpace = window.CkSpace || {}, jQuery));
EDIT 2:
Another thing to note is that if i set a break point on the span being populated and step through it, it updates perfectly every time in Chrome developer tools
I've figured out what was causing the problem although I don't know WHY it is causing the problem.
First off I tried changing the span to a div and adding display:inline to the css. It still didn't work.
I then removed the inline display and all of a sudden, as a block level element it works.
If anyone knows more about why this is and can elaborate then please do!
EDIT: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I think it's time to file a bug report!

javascript: get contents of textarea, textContent vs. innerHTML vs. innerText

I am having trouble getting the contents of a textarea with js. I feel like I've done this many times before without problems but something is throwing it off or I have a mental block.
html
<textarea id="productdescript">test copy..asdfd</textarea><button value="Enter" onclick="addProduct()">
js
function addProduct() {
var descript = document.getElementById('productdescript').textContent;
alert(descript);
}
Firefox is the only browser I have currently.
When I use textContent, the alert box appears but it is blank.
When I use value, the alert box appears and says "Undefined"
When I use innerHTML, all the HTML appears including the tags.
Also, I understand that textContent only runs in FF and for cross browser compatibility you need to do something like innerText and textContent but textContent is not working in FF. There is no jquery on this app
What is the correct cross browser way to get contents of textarea! Thanks for any suggestions.
For textarea, you could only use .value in your scenario (I tested your given code and it works fine).
.
Also,
1) keep in mind that you call this function addProduct() ONLY after your element is mentioned in the code, otherwise it will be undefined.
2) there must not be another element with id as productdescript
3) there must not be a JS variable called productdescript
This are your code?
you write document.getElementByID.... and the "D" should be written lowercase "d"
document.getElementById('productdescript').textContent;

How to force Internet Explorer to refresh the list of options of a HTML select element?

I'm programmatically changing the option children of a select element with jQuery.
The changes are being applied to the DOM, but are not visible on the screen.
This is what I get on the screen:
And this is what I see when I inspect the select element:
Here is the code that I use to update the select element:
select.empty();
$.each(this.entries, function() {
var option = $$("<option/>");
option.attr("value", this.value);
option.text(this.label);
select.append(option);
});
This clearly seems like a bug to me. Can anybody tell me what is wrong with this or indicate a workaround ?
Note: for reasons beyond my control, the page is in quirks mode.
The documentation for the SelectElement is here: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement
You can add options like this:
$("#sel")[0].options.add(new Option("test", "123")); //haven't tested all browsers
The docs say that you call add on the select element itself, passing in an option node:
$("#sel")[0].add($("<option>").val("456").prop("text", "Test2")[0], null);
both tested (and working) in IE8 here: http://jsfiddle.net/82gCq/2/
Note — The docs for HTMLOptionsCollection does not specify an add method, so it is not standardized, and its implementation will be left to the browser (if they implement it at all).
The good news is that $("#sel")[0].add(new Option("test3", "789")); works in IE8, and should work in other browsers as well.
Try changing
var option = $$("<option/>");
to
var option = $("<option></option>");
I removed the double dollar sign (I believe that was a typo), and changed the option element to not use the self-closing syntax. I've run into issues using self-closing tags on certain elements (script,textarea,iframe), this could be another example of where a self-closing tag could be a problem.

Does anyone know of issues with jQuery selector in IE with html select boxes?

I've got the following jQuery code for getting the first character of the string value of the selected option of an html select box.
var mode = $("#mode :selected").text()[0];
"mode" is the id of the html select element I want. This is not working in IE at the moment - does anyone know why that might be?
EDIT: Sorry everyone, it was nothing to do with jQuery. IE just wanted
var mode = $("#mode :selected").text().charAt(0);
I'm not sure why I thought the [0] would work in the first place. Thanks anyway.
maybe the problem is with not specifying the 'option'
we use this code in several of our projects and this does work in IE
$("#ComboBox option:selected").text()

Onclick JavaScript not working properly in IE

Please excuse my ignorance I am not very familiar with JavaScript and have been tasked with repairing a bug by a developer no longer at the company.
The onclick works perfectly in FireFox, however in IE 7&8 (the only ones we test for), it appears to run through the onclick functions properly, then instead of the data being submitted to the form URL in goStep3(), it runs through every onclick on the page, with href="#" then finally submits with incorrect information as the variable has been overwritten 50 times.
view
EDIT:
When I run trackSponsor(62, 64265); goStep3(1896, 64265, 0); return false; in the Developer Tools in IE8 I get an error of returning false outside of a function....removing that it works just fine.
Is the line that I believe is causing the problems?
trackSponsor() is working properly and returns false
goStep3() is quite a large function however it works by retrieving values from 4 other functions within, assigning the values to a URL within theAction
It completes the function by EDIT:
var yr = $("#find-yr").attr('value');
var me = $("#find-me").attr('value');
var mo = $("#find-mo").attr('value');
var keywords = $("#find-keywords").attr('value');
var theAction = PATH_BASE+'find/step3/'+p_term+'/'+p_id+'/'+p_l_id+'/';
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
return true;
I have tried returning false from this function, as well as changing the document.FindForm.submit() to the 'correct' syntax of document.forms['FindForm'].submit() and it still does not submit until running through all of the other onclick s on the page.
Thanks in advance!
Notes:
jQuery is being used as well.
Javascript is not throwing any errors.
This works fine in FireFox
I can see it going through all of the other functions in the other onclicks using Developer Tools and stepping through the page it does not submit the results of goStep3 until it has gone through all of the other onclick functions on the page.
"posting my earlier comment as an answer"
I see a lot of jQuery being used with attribute selectors, so plz check the code against those.
EDIT:
I noticed ur unfamiliar with JavaScript... so in-case u didnt know, a jQuery selector, will select all tags matching a certain "selector-filter" and perform a certain action on them... so if there is a selector that selects all A tags with a href attribute (or maybe another common attribute between them...) then that would be the cause of your problem.
EDIT: -after you posted your answer -
glad you found an answer...
though it is alittle werid,
cause according to your question it goes through "every element with href="#" ...
However According to msdn, Event bubbling simply passes these unhandled events to the parent element for handling. not through "similar" tags :)
oh well..nothing is logical when it comes to IE
I would start by removing "return false;" from the onClick event since it really isn't doing anything.
try changing
href="#"
with
href='javascript:void(0)' .
I can't say for sure where things are going wrong, but I discourage using a form's name attribute to reference it like you have done here:
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
Why not try the following jQuery:
$("form:FindForm").action = theAction;
$("form:FindForm").trigger("submit");
You should also check that $("form:FindForm") is indeed referencing the desired form element.
The problem was called because of how IE uses the bubble! Thanks all for your help, I have included the code solution to be placed in goStep3().
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
window.event.cancelBubble = true;
}

Categories