We Keep Coding

Javascript: onChange gives a "is undefined" error on IE - works for Chrome + FF

I have been trying to find out why I keep getting an "is undefined" error on IE, for a web page I have been working on. I have been researching a possible issue for quite a while including looking at quite a few StackOverflow related questions with out any luck or success a finding a solution. I am hoping that someone may have come across a problem like this in the past and could help me out.
I have included the HTML/JavaScript code below. The error is from the select statement that says: onchange="changeCat(this)".
Thanks for any help you can offer, as this problem should be simple, but yet it defies solution.
HTML Code:
<script type="text/javascript">
...
function changeCat(mySelectName) {
var selectName = mySelectName.name;
var selectBox = document.getElementById(selectName);
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
getCatResults (catUrl, selectedValue);
}
....
</script>
...
<div class="col-md-2 ">
<select onchange="changeCat(this)" id="categoryID" name="categoryID">
<option value="1">Unknown</option>
<option value="2">Accounting</option>
<option value="3">Management</option>
</select>
</div>

Jquery preselect dropdown menu option in a plugin

I asked here a couple of days ago how can i make a dropdown section in a form pre select an option.
I have got an answer and tried it and some other suggestions i have found online, all of which had failed.
I attached two pictures showing what I did, so hopefully you guys will be able to help me.
(bear in mind that i used a plugin which only allows me to add code not edit the given one)
Num1
thats how the plugin made the form, i cannot edit it
Num2
thats what i have tried and it did not work
EDIT
here is the code the pulgin made:
<label class="fitText" style="font-size: 16px;">Product</label>
<select name="Product" data-export-field="">
<option value=""> - Product - </option>
<option value="A" data-price="0">
A
</option>
<option value="B" data-price="14">
B
(+$14.00)
</option>
</select>
What I made:
<script>
$(window).load(function() {
$('#Product option[value=A]').attr('selected','selected');
});
</script>
Hope you guys will help me! :D
Thanks
Yarin

This should achieve what you want-
script -
$(document).ready(function() {
$('select[name=Product] > option[value=A]').attr('selected','selected');
});
The # selector is for ID's, not name. Use the same selector for name as value.
$(document).ready() (or $(function() {} )) should be a little bit quicker as it calls when the DOM is ready for manipulation rather than when everything is ready. I've also heard that $(window).load(function() {}) can be called at unintentional times, project depending.
Otherwise your code is solid.

Or you can try this one :
$(document).ready(function(){
$("#select_id").val('A');
});
On page load, set default value for the select tag. Might help you.

SyncFusion Treeview Event in angularjs

How i can use events with angularjs? i read the documentation but they dont mention anything about this only databinding and i dont want to use javascript or jquery to use this events.
<div id="treeView" ej-treeview e-fields-datasource="vm.list" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-fields-haschild="hasChild" e-fields-expanded="expanded" />
I try the attributes:
e-fields-options
e-field-nodeSelect
e-field-model
and nothing work.
Can anyone help me?
Thanks.
PD: Sorry for my english :(

You mean the clientside events, then you have to provide the as follows.
<div id="treeView" ej-treeview e-fields-datasource="vm.list" e-expanded="expanded" e-nodeselect="selected" />
The Syncfusion angular control properties are same as the javascript controls we have to provide the properties prefixed with 'e-' thats all its simple..:)

Chrome and oninput events

I have a textbox, and I am trying to fire an event oninput (my example below only removes a comma from the input, however I do need it to do more advance things). My code works great on Firefox and Internet Explorer, however when I click into the textbox in Chrome, I have about .5 seconds to start typing, otherwise I loose focus. Testing the exact code below on my website creates the error. Any idea?
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
q.value=q.value.replace(",","");
}
</script>
Thanks for any help

Credit goes to ComFreek and RobH for pointing it out that it works just fine on JS fiddle. I feel quite dumb for not trying it first. Turns out that some of the other Javascript on the page was causing the trigger to break. Thanks for everyone's help!

You can try to set a timer to run the code in the function.
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
window.setTimeout(function(){
q.value=q.value.replace(",","");
}, 0);
}
</script>

Try to use <input onkeyup="clean(this)">, it will only fire the function after something is typed into the input.
http://www.w3schools.com/jsref/event_onkeyup.asp

If you are going to do some complex things I'd recommend you use jQuery, because will fix this crossbrowser errors.
and use something like:
$('#input-desired').bind('keyup', function() {
this.value = this.value.replace(',', '');
});
If you wanna go for a simple application you can try this.
<input type="input" id="desired" onkeyup="desiredInputChanges(this);" />
In your Javascript file use something like:
desiredInputChanges = function (input) {
input.value = input.value.replace(',', '');
}
Just a note, don't forget to make a function to be your class and protect your methods :)

ui.selectmenu throwing 'this.newelement.0' is null or not an object

I am attempting to implement the ui.selectmenu from here http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/, but have it placed inside of a jQuery dialog. Not sure if that is where the conflict lies.
The HTML markup is:
<div id="selModeBox" title="Mode selection Form">
<label for="mode">Select modes:</label>
<select id="mode" name="mode">
<option value="v0" selected="selected">-- Make a Selection --</option>
<option value="v1">Mode 1.</option>
<option value="v2">Mode 2.</option>
</select>
</div>
The Javascript to implement:
jQuery(document).ready(function() {
$('#selModeBox').dialog({
modal: true
});
$('#selModeBox select').selectmenu();
$('#tabs').tabs();
});​
The javascript error appears on load an refers to this line of the ui.selectmenu javascript code (line 108):
this.element.click(function() {
this._refreshValue();
}).focus(function() {
this.newelement[0].focus();
});​
Has anyone experienced something similar or have any ideas on remedying this?

Its possible that jQuery 1.8 is causing problems as its not tested yet, please see https://github.com/fnagel/jquery-ui/issues/261
Please open an new issue if the problem persists in 1.7.x (please see https://github.com/fnagel/jquery-ui/issues/61)