Develop Reference

How to add event listener to div without tabindex=0?

I have something like this control:
I need to track focus on any element inside this control. If I focus input or If I focus (click) calendar icon, I want to know that focus performed.
My idea is to add click listener on wrapper of input + calendar trigger. It is some div.
Out of the box I can't add focus listener to the div. To achieve this I need to add tabindex=0 to this div. This method will work, but it has one minus.
For example, I have form with many controls. Example code is below:
<div class="container">
<input onfocus="onFocus()" />
<div tabindex="0" onfocus="onFocus()">some div</div>
<div tabindex="0" onfocus="onFocus(event.target)">
<input onfocus="onFocus()" />
</div>
<input onfocus="onFocus()" />
</div>
When I focus first input and start looping through TAB key I want this behavior: focus calendar icon, focus next input, focus next calendar icon etc. But with tabindex=0 I break this behaviour. You can check it in this pen. You can see this broken behaviour after some div block.
Well, I have another option to add listener specifically for input and calendar icon (or any other icon). The problem is I have dynamic amount of icons on each field. And I have to add focus listener for each. Much simpler for me (and another developers) is the way when I have only one focus listener on the top (as I think).
Is it somehow possible to add ability to add focus listener to the div without breaking focus loop (like I shown on the codepen example).

Use element.addEventListener('focusin', handler). focus and blur don't bubble, focusin and focusout do.
document.querySelector('.container')
.addEventListener('focusin', function(event) {
console.log(event.target)
})
<div class="container">
<input name="a" />
<div contenteditable="true">some div</div>
<div>
<input name="b" />
</div>
<input name="c"/>
</div>

How can i create HTML5 like required alert for radio button?

For the input type text, if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field.
For the input type radio, if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked.
If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?

This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.
<form>
<input type="radio" name="one" value="1" required>
<input type="radio" name="one" value="2" required>
<input type="radio" name="one" value="3" required>
<input type="text" name="two" required>
<button>Submit</button>
<form>
Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.

Beside required radio button alerts work "perfectly fine" in Chrome...
jsBin demo
it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:
there's absolutely no need to have only one radio button. → Use checkboxes.
there's absolutely no reason to have all radio buttons unchecked initially.
one must be checked by default - and it's your job to do so
logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.
if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked. If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out. Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).

JQuery acts as if it traverses DOM tree as Capturing

Digest:
Problem using jQuery and jQuery mobile with a radio button inside a tr tag.
A: click event handler of radio, B: click event handler of tr
When using radio button, B->A (tr.click then radio.click)
When using other elements, A (a.click then propagation stopped by
API)
Environment:
jQuery 1.11.3
jQuery Mobile 1.4.5
Running on Firefox 43.0
Details:
Hi,
I've encountered a problem while trying to handle click event in jQuery mobile when using a radio element inisde a table tag. The html code below shows how the DOM element looks like. You could see that the radio is inside the th tag and of course it is inside the table header tag. (#order_title)
<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable" id="order_list" >
<tr class="order_title" order_id="1">
<th>a</th>
<th>b</th>
<th>
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="sumshare_switch1" id="viewsum1" class="button_viewsum" type="radio" checked>
<label for="viewsum1"> summary </label>
<input name="sumshare_switch1" id="calshare1" class="button_calshare" type="radio">
<label for="calshare1"> calculate </label>
</fieldset>
</th>
</tr>
</table>
I've bounded two click events with the order_title as below:
$('.button_calshare').on( "click", function(e){
//do something(A)
e.stopImmediatePropagation();
});
$('.order_title').on("click", function(e){
//do something(B)
});
I anticipated that when the user click on the radio button with class "button_viewsum",
it should first trigger the event from $('.button_calshare'), then stopped by the stopImmediatePropagation function. Expected result is "something(A)" only.
However, when I tested on it, it turns out that result is "something(B) --> something(A)"
I searched for this problem, however, all I found is that in jQuery, event should bubble up as I expected.
My current solution is to use "a" tag to replace radio
<fieldset data-role="controlgroup" data-type="horizontal">
a
<a href="#" data-role="button" data-transition="fade" class="button_calshare" >b</a>
</fieldset>
and the event started to bubble instead of capture!
(Namely, only "Something(A)" happened, B is stopped by the stopPropagation function! )
Though my implementation problem is solved, I would really like to know why does the radio button doesn't work like I expected.
Thanks in advance!

How do I make jQuery radio button labels non-highlightable?

I'm using jQuery successfully and creating radio buttons nicely. However, I am annoyed that the labels on the buttons can be highlighted with a click-drag operation. When I've had too much caffeine or clicking multiple buttons in rapid succession, sometimes I will hold down the mouse button too long while moving the mouse and end up selecting the label text instead of clicking on the button itself. Here's the representative code I'm using:
HTML:
<span id='yesNoSelector'>
<input type='radio' id='yesNoSelector0' name='yesNoSelector' value='Yes'>
<label for='yesNoSelector0'>Yes</label>
<input type='radio' id='yesNoSelector1' name='yesNoSelector' value='No'>
<label for='yesNoSelector1'>No</label>
</span>
JavaScript: (the validate() function is my own to ensure the value is "legal")
<script>
$( #yesNoSelector ).buttonset();
$( input[name='yesNoSelector']).change(function(){ validate(); });
</script>
I have no CSS (beyond what is provided with jQuery). Can anyone tell me if it's possible to not make the label text highlightable (without requiring images), or provide a workaround?
Thanks!

jQuery Mobile click event.preventDefault does not seem to prevent change

I am trying to prevent a radio button from changing when a use clicks, it works when using standard jQuery but when you include jQuery Mobile it does not seem to work, is there something else I have to do in jQuery Mobile?
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="trade-direction" id="buy" value="B" checked="checked" />
<label for="buy">Buy</label>
<input type="radio" name="trade-direction" id="hold" value="H" />
<label for="hold">Hold</label>
<input type="radio" name="trade-direction" id="sell" value="S" />
<label for="sell">Sell</label>
</fieldset>
$('[name="trade-direction"]:radio').click(function(event) {
if(!confirm("Do You Want To Change?")) {
event.preventDefault();
}
});
below is a link to the code in jsFiddle.
http://jsfiddle.net/mikeu/xJaaa/

The problem is that with jQuery.Mobile, the element that is effected by the UI change is not the input element. In fact, the radio element isn't actually clicked at all. The Element that is clicked is <div class="ui-radio">. If you want to bind to the radio input itself, you need to use the change event, but in this case it won't work for you, because the function gets called after the change has already taken place.
What you need is something like this:
// Probably a good idea to give your fieldset an ID or class
$('fieldset').delegate('.ui-radio','click',function(event){
if(!confirm("Do You Want To Change?")) {
event.stopImmediatePropagation();
event.preventDefault();
}
})
The event.stopImmediatePropagation() prevents the the .ui-radio from triggering the click event to the input, and the event.preventDefault prevents the default action. The stopImmediatePropagation may not be necessary, but it gives an added guarantee that may be helpful across different browsers.