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.
Related
I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.
You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document
I have a problem with addClass / removeClass methods in change method event handler.
I've registered my handler like this:
$('.someSelector').change(MyHandler);
and in MyHandler I have
function MyHandler(){
var input = $(this);
input.addClass('something'); //not working
}
after page loading I'm getting once again this input via console, I'm executing the same code and everything works correctly. So what's the problem with change method?
after page loading I'm getting once again this input via console, I'm executing the same code and everything works correctly
So it means that you didn't have DOM ready when you attempted to bind event for the first time. Try this:
$(function() {
$('.someSelector').change(MyHandler);
});
You are very close. Try this:
$(document).ready(function () {
$('.someSelector').change(MyHandler);
});
function MyHandler(){
var input = $(this);
input.addClass('something');
}
.something{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="someSelector">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
I have html:
<form id="fileuploadform">
<input type="file" id="fileupload" name="fileupload" />
</form>
and jquery:
$(':file').change(function(){
var file = this.files[0];
...
});
The problem is: the change function fires only when the file selection is different than the selection made previously. That is of course the meaning of the 'change' event.
I want my function to be called with the file dialog closes, no matter what.
I tried using 'select' event -- it never gets called
I also tried:
$(':file').bind('dialogclose', function(event) {
alert('closed');
});
and:
$(':file').live("dialogclose", function(){
alert('closed1');
});
They didn't work either.
I have faced the same issues when I used to work with jQuery dynamic appended HTML.
I would suggest you to use the below solution
$(document).on('input','#fileupload', function () {
console.log('Your Code')
});
try to use this code.
$('#fileupload').on('change', function () {
alert('Hi');
//do your function.
});
this function will call only you select different files otherwise not.
I know this is an old post, but try using 'input' instead of 'change'. Worked for me. :)
$('#fileupload').on('input', function () {
alert('Hi');
});
See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..
Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example
I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/
This problem surprises me because it does not work in Chrome as well. Chrome!!
Anyways, I have 3 select boxes, A, B, C. On a page load, B and C are hidden. (This is fine in all browsers). Currently, I have an event handler attached to specific values in box A, so that if a value is clicked, B shows itself populated with results according to A. Same thing for C: if a value in B is clicked, C will show itself.
However, this "show" effect only occurs in firefox -- Chrome and IE are confused.
Any suggestions? hints?
Here is some code:
$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A option').each(function() {
$(this).click(function() {
$.getJSON(stuff, callback(data));
});
});
});
function callback(data) {
// alert("hi"); // This isn't working for Chrome / IE! so the callback isn't called
$("#B").show(); // This isn't working for Chrome / IE!
};
EDIT: It Turns out, the 'select#A option' -- the 'option' tag was the buggy one. After changing my handler to "change", I was able to debug and debug till I just removed the option tag -- everything seems to work now.
Thanks,
Michael
The actual problem is in the following line:
//...
$.getJSON(stuff, callback(data));
//...
You are not passing the callback function, you are actually executing the function and passing undefined since it doesn't return anything.
You should pass only the reference of the function:
//...
$.getJSON(stuff, callback);
//...
Or use an anonymous function in place:
//...
$.getJSON(stuff, function(data){
$("#B").show();
});
//...
Edit: I haven't noticed about the click handler that you're trying to assign, I recommend you to use the change event on the select element, to ensure that an option has been selected:
$(document).ready(function() {
$("#B,#C").hide();
$('select#A').change(function() {
$.getJSON(stuff, function(data) { $("#B").show();});
});
});
I think that you might have extra closing brackets at the end of the callback function.
UPDATE:
It seems like firefox can pick the click event for the option but not IE. i don't know for chrome but it might be the same problem. Instead of listening to the click event on the option you could just use the change event to track a change in the select.
you could do the following if the change event does correspond to what you are trying to do.
$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A').each(function() {
$(this).change(function() {
$.getJSON(stuff, callback(data));
});
});
});
function callback(data) {
$("#B").show();
};
Notice how i am listening to the change event on the Select itself.
I hope this helps!
If you put an alert in your callback function does it get shown?