I have problems testing my JavaScript. A part of my test looks like
$('#activityType').val("33");
$('#favorite').click();
The $('#activityType') is a select field and I want to select the option with value "33". Now I expected, that this would be a change, so that my function in my program like
$('body').on('change', '.item-select', function() {
var itemRow = $(this).parent().parent();
changeBookableItemInputFields(itemRow);
});
will be executed.
The $('#activityType') has got the class-attribute item-select, so I don´t understand, why $('#activityType').val("33"); is no change. I changed the value and the css-attribute is there. The body should be able to find it and the function should be executed.
Can anybody tell me, why it doesn´t work?
Changing a value with JavaScript does not trigger the events, you need to manually fire it. jQuery makes that easy with .trigger(eventName)
$('#activityType').val("33").trigger("change");
Use trigger() for calling any event using program.
change event is for user types into the input.
You can manually call the any event event using after setting the value:
$('#activityType').trigger("change");
Related
I dinamically add an input box in a table cell. The HTML I add is:
cell.html('<input type="text" id="finder" data-type="cittaNascita" value="'+value+'">');
The input is dinamically added so I then added:
$(document).on('change','#finder',function(){
console.log('cerco altra citta');
});
but I never see the message in console.
This code works fine anyway:
$(document).on('keyup','#finder',function(){
console.log('cerco altra citta');
});
so I expect it to be something related to .on('change', but even looking on SO my code should be working fine. What do I miss here?
You can use .on('input' event instead to fire the change event without actually leaving the input, it fires right after the value has changed.
Normally, when a user selects an item in a <select>, the 'change' event gets fired.
However, when you change the value of the same <select> with $('select').val('something'), the event doesn't get fired.
I know I could do:
$('select').val('something').trigger('change');
but that's not the problem I'm trying to solve...
Is there a way to get the change event working, without manually triggering it?
I put together a quick JsFiddle to better explain the problem, check it out:
http://jsfiddle.net/W723K/1/
Cheers
It's not possible, unless you manually trigger the change function. If you don't like typing that code several times, extend the jQuery object. Fiddle: http://jsfiddle.net/W723K/2/
(function($){
$.fn.changeVal = function(value){
return this.each(function(){
$(this).val(value).trigger('change');
});
}
})(jQuery);
//Usage:
$('select').changeVal('something');
I've got a form where I'm trying to do the sort of thing you often see with tags: there's a textfield for the first tag, and, if you put something into it, a new and similar textfield appears to receive another tag. And so on. I've gotten the basics of this working by setting up a jQuery .blur() handler for the textfield: after the value is entered and the user leaves the field, the handler runs and inserts the new field into the form. The handler is pretty vanilla, something like:
$('input.the_field_class').blur(function () { ... });
where .the_field_class identifies the input field(s) that collect the values.
My problem is that, while the new textfield is happily added to the form after the user enters the first value, the blur handler doesn't fire when the user enters something into the newly-added field and then leaves it. The first field continues to work properly, but the second one never works. FWIW, I've watched for and avoided any id and name clashes between the initial and added fields. I had thought that jQuery would pick up the added textfield, which has the same class markings as the first one, and handle it like the original one, but maybe I'm wrong -- do I need to poke the page or some part of it with some sort of jQuery initialization thing? Thanks!
Without seeing your code in more of its context, it's hard to know for sure, but my best guess is that you're attaching a handler to the first field, but there is no code that gets called to attach it to the new field. If that's the case, you have a few options, two of which are:
1) In your blur() handler, include code to attach the blur handler to the newly created field.
2) Use jQuery's event delegation to attach a handler to the field container, and listen for blur events on any field in the container:
<div class="tag-container">
<input class="the_field_class" /> <!-- initial tag field -->
</div>
<script>
var $tagContainer = $('.tag-container');
var createNewField = function() {
$tagContainer.append($('<input class="the_field_class" />');
};
$tagContainer.on('blur', 'input.the_field_class', createNewField());
</script>
Which is better will depend on your use case, but I'd guess that the 2nd option will be better for you, since you're unlikely to be dealing with tons of blur events coming from the container.
I want to know if it's possible to select a textarea's content when it gets modified. In jQuery, I'd do the following:
$("texarea").on("change", function (e) {
$(this).select(); // the content gets selected for copy/cut operations
});
I know it's a bad practice to directly manipulate DOM elements from within an angular controller, so if you know how I can do this cleanly, I'd be happy to learn how!
I think you can do the following, attach an event handler to your textfield element using onblur and onfocus attributes. Write two functions for each as follows:
onfocus get the initial content of the textfield
onblur get the final content and compare to the initial content if there is a difference the run the select function
If you want it to be in real time your could also use onkeyup and onkeydown
Would it be possible for me to dynamically add an event handler to a form field. I need to do this, because in the scope of the work I am doing - the form field to which this is added is chosen dynamically.
So, I want to know if something like this would work:
document.forms['Form1'].elements['chosen_field'].onkeydown = some_function();
EDIT:
Another sub-question here. I want to pass on the event to some_function(), but do not want to return anything back. Is there a way I can do that? Essentially I am using some_function() to update some JS variable - and for that I need to find out what key was pressed.
When you assign event handlers like this
document.forms['Form1'].elements['chosen_field'].onkeydown = some_function();
You are saying assign whatever some_function returns to this keydown event.
You need to drop the () from it so you assign a reference to the function.
document.forms['Form1'].elements['chosen_field'].onkeydown = some_function;