This question has been asked tons of times, however I don't see any answer for the 'multiple' variety:
http://jsfiddle.net/queZ6/107/
When you tab INTO the box, i want to display an alert and capture the focus event. I'm basically wanting to change the highlighting for an element that surrounds each input, that follows along as you fill out the form. It's basically a signal to the user to easily see what field their on.
I can't for the life of me figure out how to capture the focus event though tabbing into the box (or also clicking on it obviously).
I dont see why this is difficult, considering you're typing INTO an input. Cant javascript see the newly created input (that youre typing into) and bind to that? JS is so confusing to me sometimes :S
Because the element is created dynamically, you will need to use event delegation, using jquery's on. This will allow you to attach a handler before the element exists.
$('.chzn-choices').focus(function(e){
would instead be
$("container").on("focus", '.chzn-choices',function(e){
where container is a selector for some static ancestor element which is not dynamically loaded. If no such container exists, document can be used, though this is to be avoided where possible.
Update:
While the old answer stated that you cannot bind into dynamically created elements(and this is still true to a degree), updates to the plugin in question have made this no longer a problem.
While the plugin in question still has a problem of triggering the handler multiple times, in the case of an alert message being used, it is now possible to bind to those dynamically created elements thanks to the updates.
All one must do in order to do this is bind, via .on(), to the chosen:showing_dropdown event on the original targeted select list.
To solve the problem of the continuously created alert boxes, however, I decided to use underscore.js's .debounce() method, so it is only triggered once immediately every 1 second.
The underscore library is by no means required, however you will need to have some sort of debounce function in order to get around that small quirk.
var debouncedAlert = _.debounce(window.alert, 1000, true);
$('#select').chosen();
$('#select').on('chosen:showing_dropdown', function(e){
e.preventDefault();
e.stopPropagation();
debouncedAlert('focused');
});
Working example:
$(document).ready(function() {
var debouncedAlert = _.debounce(window.alert, 1000, true);
$('#select').chosen();
$('#select').on('chosen:showing_dropdown', function(e){
e.preventDefault();
e.stopPropagation();
debouncedAlert('focused');
});
$('button').click(function() {
$('#select').trigger('chosen:open');
});
});
body {
margin: 10px;
}
select {
width: 200px;
}
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" value="Put your cursor here then Press Tab. Chosen will be focused!" style="width:100%">
<br>
<select id="select" multiple>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen <b>will</b> be focused! :)</button>
Old answer:
No, it can't. Jquery's regular method of binding will not work with dynamically-created elements. In order to bind to those types of elements, you need .on().
$('.chzn-choices').focus(function(e){
e.preventDefault();
alert('focused!');
});
Would be changed to:
$('#select_chzn').on('focus', '.chzn-choices', function(e){
e.preventDefault();
alert('focused!');
});
In this case, you are delegating the event to the container elemen, and then pointing it to your specific element.
Working example
Related
I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.
Here is the example of the input that I am trying to fill:
<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">
As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.
Here is my code:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.evaluate(function(testname){
document.querySelector('#firstname').value = testname;
}, testname);
});
If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.
The events attached to the input are of Blur, Change and Keypress.
Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?
The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.
That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.sendKeys('#firstname', testname);
}).wait(20, function(){
this.capture('screenshot.png');
});
<input> elements without a type attribute default to Text type.
This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.
If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.
You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :
this.evaluate(function(){
$(".discard-answer").click();
})
From there, you can chain jQuery events, like in my case where I had to .blur().change().click();
It is important to know if the event is jQuery or not.
Hope this helps.
I have a mess of js right now and there are too many things across a bunch of different files (inherited) and I'm having trouble with one last piece.
I have a modal containing a form and everything works fine except the selectboxes. Once the user clicks the select box it fires the close function. I've tried everything I can remember but I can't remember the proper terms for what I'm trying to do so I can't google it.
Here's a quick fiddle
Code:
<div class="modal">
<select>
<option>Select an option</option>
<option>1</option>
<option>2</option>
</select>
</div>
And js:
$(document).click(function(){
if(!$(event.target).is(".modal")){
$(".modal").hide();
};
});
This works normally for anything I put in there except selectboxes.
UPDATE: Ok so I was completely wrong with this question and made a few incorrect assumptions in my testing. This is not related to selectboxes but specifically to jQuery datepicker-ui selects. So this question is a duplicate of a few others on Stackoverflow and it can be closed as duplicate. One of the duplicate questions I found was: Implementing jQuery DatePicker in Bootstrap modal
The event.target refers to the element from where the event originated, so when you click on the select element e.target is the select element then the $(event.target).is(".modal") test will fail.
So the solution is to check whether the event's target is inside a .modal element for which you can use .closest() as below
$(document).click(function(){
if(!$(event.target).closest(".modal").length){
$(".modal").hide();
};
});
Demo: Fiddle
$('.my-button').click(function() {
$(".my-textbox").focus()
});
Before Jquery 1.4 this used to be the way to call focus to a textbox, now it doesn't work. When I click the button, I want to call focus to the textbox, what i mean by "focus", is that I want the textbox to act like it was just clicked on, so that the user will not have to click on the textbox.
.focus is supposed to do an auto click onto the textbox i want it to, why isn't it working now? it broke in Jquery 1.4. I just need to know how to do it.
It still works. See here.
reference: jQuery focus docs
As mentioned there, calling 'focus' on one element may trigger 'blur' on another - and so use 'focusin' instead.
Your code works fine for me. However, it looks like you're trying to create a clickable label for an input element. If that's the case, there's an existing element named <label> that will do the job for you, no JavaScript required:
<label for="myTextBox">I'm a label, click me</label>
<input type="text" id="myTextBox" />
Example: http://jsfiddle.net/pkk6y/
Those are class selectors not IDs - not sure if that's relevant, but they're inherently not unique - particularly in the focus function jquery may just plain refuse - try using IDs (and #mybutton, #mytextbox)
Update: The jQuery doc page points out issues with IE:
The focus event does not bubble in
Internet Explorer. Therefore, scripts
that rely on event delegation with the
focus event will not work consistently
across browsers.
I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!
You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.
The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.
I have a form and it has 4 input elements. if the user enters just two entries and clicks anywhere on the screen (out the form)...i would like to save the details..it is like auto-save.
I have id of my form..i want to compare with form id of the current control on the screen..so that i can ssave the data if both form ids are different..
could you please tell me how can i get the form id of current control location on screen (some times the control could be outside the forms..in that case form id of current cotrol location would null)... but how can i determine that in javascript.
please suggest...
Many Thanks in advance,
Jack.
That's an interesting question.
Well, if you didn't think a second (as I admittedly did), you would just hook on the blur event of the HTML <form> element in question.
<form onblur="autosave(this)">
However, the HTML <form> element doesn't support that event. Too bad.
I then thought about jQuery's new 1.4 focusout() event.
$('form').focusout(function() { autosave(this); });
Unfortunately that event get fired as well when you just jump (tab, click) to the next input field inside the same form. Not so nice, it'll probably be too expensive to autosave on every fieldjump. The same effect as with an $(':input').blur(function() { autosave(this.form); });.
I then tried the other way round using focusin():
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').focusin(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
Strangely enough this works in IE only and not in the other browsers. It'll be another IE bug/quirk that focus is supported by all elements other than input elements.
Your best bet will probably be hooking on the click() event instead.
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').click(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
This works fine. You can find here a live demo.
Note that I don't mean to push you jQuery (a JS library which insanely eases HTML DOM traversion and manipulation) through your throat or so, but I don't see nice ways in plain JavaScript to achieve this without writing 10 times as much as code here.