Class and attribute selector issues with IE8 - javascript

I am using a Jquery plugin called datetimepicker and works great in Firefox but not in IE8. I narrowed down the issue to be with the jquery selector. I have a table with a class named sm_whiteboard and in that table there's an input box with the ID Next_x0020_update_x0020_at (this ID dynamically changes which is what I did ID*).
$("table.sm_whiteboard [id*=Next_x0020_update_x0020_at]").datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
This code works great in firefox but not in IE8. It doesn't give me any errors in the console in IE8. If I select only the input like this $("[id*=Next_x0020_update_x0020_at]") it works in IE8.
Any ideas where I could be going wrong?

Thanks to A. Wolff I figured out that the problem was due to a simple character issue in my class name. Seems like IE8 is case sensitive so had to make sure the class name was matching exactly with all the capital letters as well.
Thanks everyone!
$("table.SM_whiteboard [id*=Next_x0020_update_x0020_at]").datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});

Related

jQuery Show Hide is not working on Internet Explorer

Below code is working fine in Firefox & Chrome, but it is not working in IE.
Can someone please let me know the alternate to hiding select Dropdown options?
I tried with CSS style display: none as well but not no luck.
$j("#id option[value='test']").hide();
I spent lot of time to search on google related to same issue but changed my approach i tried the below scenario its worked like a charm for me
$j("#shipping_method optgroup[label='Free Shipping']").clone("optgroup[label='Free Shipping']").insertAfter("#shipping_method_form");
$j("#shipping_method optgroup[label='Free Shipping']").remove();
$j(".box-content .fedex").appendTo("#shipping_method");
#shipping_method_form is my select box id
above is an example from my scenario please take a look
hope this will be better solution for all browsers
$j("#id option[value='test']").hide();
// use proper Id correct.
Replace #id with proper id of the element.
$("option[value='test']").hide(); // here I assuming that you are not using ID
$("#idName option[value='test']").hide(); // here I assuming that you are using ID and replace `idName` with your IDs.

jQuery "focus" works in one instance but not in others

I wrote some code a while ago with the jQuery method focus; it worked then and it still works now. But now I tried writing some virtually identical code with the same method, in the same app, and it didn't do anything. In fact, no newly-written usage of the method works. Even stranger, it doesn't seem to work on jsfiddle either:
https://jsfiddle.net/3jmmL7ya/1/
<div id="click">CLICK ME</div><br>
<input id="focus" name="focus"></input>
<script type="text/javascript">
$("#click").click(function() {
$(':input[name="focus"]').focus();
});
$("#click").click(function() {
$("#focus").focus();
});
</script>
It may be unrelated, but I think it's worth mentioning that I recently had a similar problem with the Rails method respond_to do |format|. It worked in the past, and my old code still works, but new code I write results in an "Unknown Format" error. More details here.
I'm using jQuery 1.10.0 and Rails 4.0.10.
I'm either doing something absurdly stupid, or something pretty bizarre is happening.
UPDATE
Okay I got it to work with
$("#click").click(function() {
$("#focus").focus();
});
But when I type in $("#focus").focus(); in the js console, the input is selected, but nothing happens. Is this expected behavior?
This is because you are using a id selector to connect the events.
Ids are by definition supposed to be unique. When you use an id jQuery will automatically select the first matching element it finds. To solve this just add a class on the elements and use that selector instead.

selectedIndex undefined in IE

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.

Chrome Javascript

i have two spans on my page with class='hidden' and then some javascript to remove the class when a condition is met, its working fine in ie 9/10 and firefox but its not working in chrome when I run the function in the chrome JS console I get the message TypeError: Cannot read property 'attributes' of null
Anybody know whats going on?
<script type='text/javascript' >
function showhidden() {
var att =document.getElementById('hiddentextbox');
att.attributes[0].value='';
att =document.getElementById('hiddentextbox1');
att.attributes[0].value='';
}</script>
Thanks
Try changing the class by using att.className = '' instead of what you're doing, which I have never seen before.
You might also want to check out jQuery, which has good built-in .show() and .hide() functions.
It can't find document.getElementById('hiddentextbox'); therefore it can't find attributes of null, because non-found element is null. I believe that is the 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()

Categories