Why can't I trigger select change event using C# WebBrowser control? - javascript

In the javascript I see the following defined:
$('#dropDownId').change(function(){
... do stuff...
});
<select id="dropDownId">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
</select>
I've tried using the following code:
webBrowser.Document.GetElementById("dropDownId").SetAttribute("value", "1");
webBrowser.Document.GetElementById("dropDownId").Children[1].SetAttribute("selected", "selected");
webBrowser.Document.GetElementById("dropDownId").InvokeMember("onchange");
I can see the drop down get changed to the right value, but the following never gets executed:
$('#dropDownId').change(function(){
... do stuff...
});
Also, when I look at the properties for "dropDownId" in Chrome, the "onchange" event is null, so how can I invoke the above "change" script for the dropdown?

jquery attaches events to allow for multiple event handlers, that's why onchange property of your select is null.
You can do:
function myChange(){
... do stuff...
}
<select id="dropDownId" onchange="myChange">
...
</select>
or
webBrowser.Document.InvokeScript("myChange");
or
function myChange_Jquery(){
$("#dropDownId").change();
}
webBrowser.Document.InvokeScript("myChange_Jquery");

Related

how can i call select box on change while changing select value using jquery?

I am having a select box like this
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If am changing dropdown values carName function is calling and working as expected. If suppose I change the value using jQuery like this
$('.cars').val('Audi');
I want that carName() function to be called.How can I do this?
You need to .trigger() event programmatically
Execute all handlers and behaviors attached to the matched elements for the given event type.
Also, value is case sensitive, so use correct value. use audi instead of Audi
Code,
$('.cars').val('audi').trigger('change');
Also since you are using jquery bind event using it like
$('.cars').on('change', carName); //Or, $('.cars').change(carName);
function carName() {
alert('In carName function');
}
$(document).ready(function() {
$('.cars').val('audi').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I think you might want to add .change()
$('#cars').change(function() {
carName();
});

jQuery, binding on dynamically loaded elem

lets say I have an option:
<select class="opt">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="d">-it will be overwritten-</div>
and a jQuery binds to in, and add a new option:
$('.opt').change(function() {
alert ('changed!');
$('#d').html ('<select class="opt"><option value="11">12</option><option value="22">22</option></select>');
});
and this stops working. I tried to re-attach the events (not seen in the code) still no work.
http://jsfiddle.net/p9hhue1L/

How to close dropdown on onchange event of selector In iOS6?

I am working on hybrid application with worklight.
When tapping on select control, a native dropdown pops out. Now I have bound onchange event on this select so when I choose any option the event gets fired but the dropdown doesn't fadeout until I tap on the done button.
I have used ('select').blur() to overcome and it is working fine for Android but not for iOS6.
I want to fadeout the dropdown with onchange.
Code:
<select id="myID" onchange="myFun()">;
function myFun(){
$('select').blur();
}
or
function myFun(){
$('#myID').blur();
}
What are the possible soultions for it? Thanks.
It seems that in iOS you cannot use .blur() on a select element, the event will be ignored.
Note: in iOS the user is expected to tap the Done button. Why confuse your end-user by introducing unexpected interaction and behavior (= not provided by the OS to begin with). For example, what if the user selected by mistake? Instead of being able to correct on the spot, s/he will be forced to tap again and select again... I recommend leaving it with the default behavior.
Updated example: instead of removing the select from the DOM and re-introducing it, I've found this.
The below works only in iOS6, though, per the question. It doesn't work in iOS7.
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Selected option: <input type="text" id="selectedOption"/>
JavaScript
function wlCommonInit(){
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
var mySelectedIndex = $("#mySelect option:selected").index();
$("#selectedOption").val($("#mySelect option:selected").text());
if($("#mySelect").is("select")){
var fakeSelect = $("#mySelect").clone();
$("#mySelect").replaceWith(fakeSelect);
$("#mySelect").bind('change', changeValue);
$("#mySelect").prop('selectedIndex', mySelectedIndex);
}
}
While my previous answer will work, only in iOS6, the following works for me in both iOS6 and iOS7 using the iOS7-Select-Element-Auto-Close plug-in by lukewhyte.
Simply place the JS code provided in the plug-in in your project and include it in your index.html,
<script src="js/select.js"></script>
Then:
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
JavaScript
function wlCommonInit(){
$('#mySelect').iOSSelect();
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
$("#selectedOption").val($("#mySelect option:selected").text());
}

Remove items from or add items to a select box?

How to remove items (value="0") from select box?
Below is an example select box.
<select class="form-select" name="column" id="edit-column">
<option value="-1">Search All Columns</option>
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>
my JavaScript is not working
$('#edit-column option[value="0"]').remove();
Your JavaScript is fine -- you're probably just running it before the DOM is fully loaded.
So, as PSL mentioned in the comments, you have to use something like this in jQuery:
$(function(){
$('#edit-column option[value="0"]').remove();
});
Which is really just shorthand for:
$(document).ready(function() {
$('#edit-column option[value="0"]').remove();
});
Here's the updated fiddle.

Javascript Event for Select element Selection

I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.
At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.
Any suggestions?
I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:
$('select option:selected').removeAttr('selected');
Change on select boxes is unreliable anyway. Read:
http://www.quirksmode.org/dom/events/change.html#t05
I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.
This is possible, however it is not fully supported. Here is a sample:
html
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
jquery
$("#selectId>option").click(function(){
alert(this.value);
});
here is a mediocre approach to handle ie:
<div id="dropdownWrapper">
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
js
var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
if(++clickCount_guid324fF % 2 == 0){
alert($("#selectId").val());
clickCount_guid324fF = 0;
}
});
Wouldn't click work? .bind('click',function() { ...})
I once did this using mouseup, and checked where the event originated. If it was an option element, i handled the select. No listening on onchange at all:
<body>
<select id="select0">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<script type="text/javascript">
$('#select0').bind('mouseup', function (e) {
var src = e.target;
if (src.nodeName.toLowerCase()==='option') {
doMagicOnSelect(this);
}
});
function doMagicOnSelect(selectElem) {
console.log('current value:'+selectElem.value);
}
</script>
</body>
There is no reliable event fired when a selected option is re-chosen.
Whilst on some browsers you can catch events originating from an <option> (which you could use to trap click and keyboard events if you had the patience to try to reproduce a browser's select handling), this is unstandardised and doesn't work in IE (as it uses native Windows widgets to implement select boxes, which don't give that kind of granular access).
If you need to be able to re-fire an event when the same option is chosen again, what you have doesn't really sound like a select box to me; it could perhaps be better replaced with a scripted pop-up div full of buttons. (There are plenty of scripts that will substitute a select box for a scripted div to give you greater control on browsers where JavaScript is available.)
bind the change AND click event
$select.bind("change click", function (event) { // do something });

Categories

Resources