PR #20221 breaks using btn-group in a checkbox group i.e. using code:
<div class="checkbox btn-group "> <label for="cb_wd0" class="checkbox btn active btn-danger"><input type="checkbox" id="cb_wd0" name="weekdays[]" value="0" checked="checked" class="checkbox " style="display: none;"><span class="sunday">S</span></label> <label for="cb_wd1" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd1" name="weekdays[]" value="1" class="checkbox " style="display: none;">M</label> <label for="cb_wd2" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd2" name="weekdays[]" value="2" class="checkbox " style="display: none;">T</label> <label for="cb_wd3" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd3" name="weekdays[]" value="3" class="checkbox " style="display: none;">W</label> <label for="cb_wd4" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd4" name="weekdays[]" value="4" class="checkbox " style="display: none;">T</label> <label for="cb_wd5" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd5" name="weekdays[]" value="5" class="checkbox " style="display: none;">F</label> <label for="cb_wd6" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd6" name="weekdays[]" value="6" class="checkbox " style="display: none;"><span class="saturday">S</span></label> </div>
To allow individual selection.
Resets selection to the last one selected.
This previously provided a neat way to show all select options in a row. Now this no longer works in an incremental release. I could understand for a 3.X release
Labels |
Added:
?
|
Status | New | ⇒ | Discussion |
Category | ⇒ | Administration |
Title |
|
Labels |
Added:
J3 Issue
|
@tonypartridge Could you provide some before and after screenshots and maybe a more complete description of what's expected and what's actually happening? To me, it seems exactly the same with the old code and the new.
Is there some particular context where this works? Is there something I need to do to set it up properly?
The code for the radio label has been changed in the template.js file of Isis. I guess that this change could be related to this issue. I suggest to try to restore the template.js code in 3.8,11, i experimented another issue in my extensions due to this change. In particular now the click event is bound through jQuery document.body
Hello,
As explained before it is the template is causing it. The scenario above is replicatable for me as per the images
On Sep 7, 2018 at 8:45 am, <JoeforJoomla Boy (mailto:notifications@github.com)> wrote:
The code for the radio label has been changed in the template.js file of Isis. I guess that this change could be related to this issue. I suggest to try to restore the template.js code in 3.8,11, i experimented another issue in my extensions due to this change. In particular now the click event is bound through jQuery document.body
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (#21971 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABVglnLmmGKBUmSFE_fUAdeIrVoW4hSfks5uYiQUgaJpZM4WXC4-).
@tonypartridge Sorry but that code you posted doesn't turn out anything like those images when I run it. Does it need to be in a particular component? Is there any non-standard js or css on the page? Can you tell any more about the context where this is running?
Can confirm the issue of @tonypartridge - all our extensions broke because of that ;-)
Checkboxes and Radio buttons are no longer working
For the checkboxes field can you give the XML field definitions that you are using ?
@tonypartridge @yvesh Come on, guys. You gotta give me something to work with. All your extensions broke? Which extensions? What are they doing that broke?
You can try JEvents at present under the repeat options. And then try pre .12 and with .12 you’ll see they are not multi selectable with this change.
On Sep 13, 2018 at 12:51 am, <Elijah Madden (mailto:notifications@github.com)> wrote:
@tonypartridge (https://github.com/tonypartridge) @yvesh (https://github.com/yvesh) Come on, guys. You gotta give me something to work with. All your extensions broke? Which extensions? What are they doing that broke?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (#21971 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABVglnBe9xFX3BMCgDNkryxtzQerKBziks5uaZ4LgaJpZM4WXC4-).
@tonypartridge OK, now we're getting somewhere. Here's what I've found so far.
The previous code that looks like this:
$('.btn-group label:not(.active)').click(function () { ... });
Has no influence on your buttons. This is a bit weird since they are included in $('.btn-group label:not(.active)')
and so must get the click
event handler assigned to them.
The new code which works on the same selector but does it through delegation by the body tag, does affect your buttons.
I'm still looking but I expect that the reason is that you have some code which is first removing the click
event handler from the buttons and then maybe adding a custom one or something. Is this the case?
I think I can solve your issue with a change to the template code which avoids reverting back to the old non-delegated code but there's also a solution on your end which is more elegant than removing event handlers that the template has placed. You can simply catch the event and stop it from propagating up to the body tag like this:
$('#byday').on('click', function (e) { e.stopPropagation(); });
Thinking about this template code now, it's clear that it was only ever meant for radio button groups. The way it's been written makes no sense for checkboxes at all. I will rewrite it to reflect that.
I have a fix. It's a rather significant change but it all makes sense, I assure you.
First of all, the old code was like this:
$('.btn-group label:not(.active)').click(function () { ... });
And the recent changes still used the same selector, but delegated event handling to the body tag. But look at that selector. It makes no sense. It says we're concerned with any label inside a .btn-group
as long as it's not .active
. So then it means we can switch things to .active
but, if they are already .active
, we shouldn't do anything with them. That's fine for radio buttons but not checkboxes. So already this code is not for checkboxes.
Next, it handles the click
event on the label
. I think it would be better to handle the change
event on the input
so I changed that.
The body of that function had more radiobutton-specific code. The clicked item would get a specific class, all others would have classes removed. That's not checkbox behavior.
So I've made several changes. First, it only targets radio buttons now. So it should be impossible to affect things like the day picker in JEvents. Second, it handles the change event on the control, not the click event on the label. In handling that event, it updates any and all related labels. It still uses delegation on the body tag instead of the old way of attaching events to each and every label. This way is better for several reasons which you probably already know.
Although I'm specifically targeting radio buttons now, the changes I've made make this code suitable for checkbox button groups as well. If we would ever want to use such things, the code only needs to be modified slightly.
Status | Discussion | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-09-14 07:34:34 |
Closed_By | ⇒ | franz-wohlkoenig |
Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/21971
@okonomiyaki3000