We Keep Coding

Simulate human selection of option item in select menu

I have a bit of script which technically works. It essentially listens to the hashtag on the URL and updates the select menu with the option value which matches the hashtag. It works on page load and doesn't care how the hashtag is updated, only that it is. Perfect
The problem is, I have a lot of other scripts on that page which does something when you select an option item, they all work when you manually select an option item, but nothing is triggered when I use the below script to automatically select the option item. How can I actually simulate a human selection in this setting? Any ideas?
$( document ).ready(function() {
window.addEventListener('hashchange', fn, false);
window.onload = fn; // fire on pageload
function fn() {
document.getElementById('select-two').value =
window.location.hash.replace('#','');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-two" name="colordrop" class="color2" onchange="letsDoThis()">
<option value="Jet" class="jet">Jet</option>
<option value="Cream" class="cream">Cream</option>
<option value="Chocolate" class="chocolate">Chocolate</option>
<option value="Classic Red" class="classic_red">Classic Red</option>
</select>
And here is my JSFiddle, though not sure how to demonstrate hashtags in JSFiddle.
https://jsfiddle.net/liquilife/n9r6af7e/1/
This has been resolved. And I've marked the answer as complete. The final code which works is below:
$( document ).ready(function() {
window.addEventListener('hashchange', fn, false);
window.onload = fn; // fire on pageload
function fn() {
$("#select-two").val(window.location.hash.replace('#','')).trigger("change");
}
});

Since you're using jQuery you can use the .trigger(eventName) method to start a specific event on an element.
For instance you can both set the value and cause the event to fire like so:
$("#select-two").val(window.location.hash.replace('#','')).trigger("change");

You can use jQuery's change function to detect when the selected value of your select element changes and to execute code when that happens.
https://api.jquery.com/change

Jquery on("change") never triggers for select list

I have a form with a select list, and Jquery tying an onChange handler to that select. The handler is never called. On the Jquery side, I've tried these:
$("#dateShortcuts").on("change", function() { ... });
$("#dateShortcuts").change(function() { ... });
$("#dateShortcuts").on("change", myPredefinedFunc());
$(document.body).on("change", "#id", function() { ... });
$("#parentForm").on("change", "#dateShortcuts", function() { ... });
No matter what I try, I can't get the event handler to fire. My function is currently just alerting a string, so I know it when it works, but eventually it'll be adjusting two date pickers. My select list:
<select id="dateShortcuts" name="dateShortcuts">
<option value="-5">Since Sunday (last 5 days)</option>
<option value="0">Today Only</option>
<option value="-20">Days since May 1</option>
<option value="-1">Yesterday and Today</option>
<option value="-30">Last 30 Days</option>
</select>
I really don't know what else to try at this point. Everything I can find online says that one of those should work. I know Jquery itself is working, because it handles a lot of other tasks on the same page and does them all perfectly. I should also say that the samples I've already tried are all inside $(document.ready), where I (successfully) have onChange handlers for some text fields in the same form. Everything else is fine, it's just this select list that isn't working right. I've tested it on IE and Firefox. Thanks for any suggestions.

Try this one
$(document).on("change", "#dateShortcuts", function() {
//your code here
});

Try this one
$(function(){
$(document).on("change", "#dateShortcuts", function() {
//do something here
});
});

I run in the same problem, if the javascript code run not inside the
$(document).ready(function() {
...
});
block or the <select> is maybe created using javascript.
I could solve it using:
$('#dateShortcuts').on('change', document, function() {
// your code here...
...
});

Well, don't know much about JQuery, but this looks like the basic one (taken from w3schools):
$("#select").change(function(){
alert("The text has been changed.");
});
Question, is "dateShortcuts" created before your code? That could be the problem. If not, you could put your function inside a try and catch:
function doSomething(){
try{
alert('IN');
//do something here
}
catch(e){
alert(e.message);
}
}
If it displays an error, voilá. If not, then you might have a syntax error outside the function (notice I put an alert to see if the function was really running).
Hope it helps.

How to call a javascript function using asp.net dropdown list

I need to call a javascript function when the dropdown list is changed.
How can I implement that in asp.net?

Use onchange event to excecute function whenever the dropdown list clicked.
<select id="mylist" onchange = "go()">
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<script>
function go()
{
var x = document.getElementById("mylist").value;
console.log(x);
}
</script>

<asp:DropDownList runat="server" ID="DDList" onclick="alert(1)"></asp:DropDownList>
If you want to get function executed when element clicked, you can use above code to define a function that should be executed 'onclick'.
But it is better to use something like addEventListener, just search for cross-browser function (for instance, like addListener function here):
document.getElementById("<%=DDList.ClientID %>").addEventListener("click", fucntionToExecuteName, false)
Remember, than in this case you must take DDList.ClientID and use it as id of an element, because it will be different from ID you have set in your aspx code
But if you need some function to be executed when actual value is changed, you should use onchange event.

Use Jquery :
$(document).ready(function(){
$("#DropDownID").change(function () {
// Your requirment
});
});
Also it's always better to write it inside the document.ready

Use something like this (uses jQuery):
$(document).ready(function() {
$("#dropdownId").change(function(e)) {
do something...
});
});

Add this script to your mark-up and be sure to also include a script reference to jquery:
$(document).ready(function()
{
$("#yourDropdownId").change(function(){
//Todo: write your javascript code here.
});
});
Make sure that the control with "yourDropdownId" as ID has the property: "ClientIDMode" set to static or the "all-knowing" ASP.NET engine will auto-generate an element name for the resulting html with parent element names appended to the control by default.

Use JQuery
$(document).ready(function(){
$('select[name$=DrpGoingTo]').change(function () {
//Code here
});
});

You can use an onchange event and call it from itself:
<asp:DropDownList ID="DropdownList" runat="server" onchange="javascript:MyFunction();" >
</asp:DropDownList>

jQuery UI Multiselect Events

I'm using this Multiselect jquery component. and I can't figure how to trigger and subscribe to the events of this thing. (I'm new to js).
What I've been trying so far is to trigger a collectionChanged event in the _updateCount function of the ui.multiselect.js file:
_updateCount: function() {
this.selectedContainer.find('span.count').text(this.count + " " + $.ui.multiselect.locale.itemsCount);
//How do I subscribe to the event?
$(this).trigger('collectionChanged');
}
Then I'm trying to subscribe to the 'collectionChanged' event from asp.net:
$('#<%= dropDown.ClientID %>').bind('collectionChanged', function ()
{
alert("Changed!");
});
The generated page markup is this:
<select name="ctl06$dropDown" id="ctl06_dropDown" class="multiselect" multiple="multiple" name="countries[]">
<option value="1134">A</option>
<option value="1980">B</option>
<option value="17789">C</option>
<option value="180367">D</option>
<option value="1990673">E</option>
</select>
<script type="text/javascript">
$(function () { $('.multiselect').multiselect(); });
$('#ctl06_dropDown').bind('collectionChanged', function ()
{
//Not working (never triggerd)
alert("Changed!");
});
</script>
Thanks.

The value of this on the _updateCount function is not a DOM element. For what you are trying to do, if I understand you well, you need to trigger your custom event in a DOM element and then listen to that custom event on the same DOM element. So you have two problems on your code: the first one is that you are trying to trigger an event using $(this) and thisis not what you expect, and the second one is that you are listening to an event on a DOM element that never triggers that event. If you do something like:
_updateCount: function() {
this.selectedContainer.find('span.count').text(this.count + " " + $.ui.multiselect.locale.itemsCount);
$("#ctl06_dropDown").trigger("collectionChanged");
}
Then your line $('#ctl06_dropDown').bind('collectionChanged'... should work fine.

the plugin you are using doesnt support events.
use the next version of it.
http://quasipartikel.at/multiselect_next/
if has events explained with sample code at http://quasipartikel.at/multiselect_next/#optionTabs-3
You need to use both the events called "selected" & "deselected".

jquery .bind prevent running on page load

I have a jquery function that binds a select field on a form to multiple actions. It binds to both change and keyup, so that mouse and keyboard clicks are both captured.
$(document).ready(function(){
$('#user_id').bind('change keyup',function () {
calculateAmounts();
}).change();
});
This works perfectly.
However, in addition to running on the change and keyup functions, the calculateAmounts() function is also called when first loading the page. I'd like to prevent this code from running when the page is first loaded.

You're triggering a change event when you call .change() on the $('#user_id') element, which will call your change/keyup event handler. If you remove the .change() call, then that event won't be triggered when the page loads:
$(document).ready(function(){
$('#user_id').bind('change keyup',function () {
calculateAmounts();
});
});

try this (taking in consederation that #user_id is input field)
$(document).ready(function(){
var yourVAL = $("#user_id").val();
$('#user_id').bind('change keyup',function () {
if($("#user_id").val() != yourVAL){
calculateAmounts();
}
}).change();
});