Panel with checkboxes not correctly detecting click event on IOS

[Gary5014869]

I have an app that has a panel in it and within the panel I've created a checkbox group via HTML.

I've used the click event on the panel to run custom javascript to get the value of whether or not a particular checkbox is checked and based on that, I set a local variable to True or False. I then use if statements on the variable to show or hide a Radio button group that is hidden at page load.

On my computer's webrowser, which is IE9, it accurately detects the click event within the panel and shows or hides the radio group, but on my iPhone and my iPad if I click on a checkbox, it does not detect the click insomuch as the radiobutton group is never shown.

I put in a test alert on the click event and on the iphone/ipad, if I click just off the edge of the checkboxes, the alert will fire telling me i'm in the panel and the radiobutton group will be shown. however, since i'm off the edge of the checkboxes, the checkboxes won't be checked.

I've shared the app with support...i think

[Maryna Brodina]

Hello! Thank you for sharing! We'll test.

[Gary5014869]

A few of things, now that I'm thinking more clearly after some sleep.

1. To get to the checkboxes in question the quickest, make the following choices on drop downs: Type of Project = VDI and Vendor = Citrix.

2. For support or anyone else wondering why I used panels instead of the native Tiggzi checkbox:

   I couldn't get the native checkbox to correctly detect the click in any platform. Here's the code that works with the HTML generated checkboxes:

   var XDisChecked = $('input[name=VDICitrixProductSelectXDCheckBox]').is(':checked')

   That returns True if the box is checked and False if it is unchecked...but not for the native Tiggzi checkbox. It returns False and then displays the box as checked and it returns True and then displays the box as unchecked. I went with the Panel as my best guess was there was a bug in the way the native Tiggzi checkbox object was getting put together in the underlying HTML.

   The Radio Group buttons that are supposed to be exposed are in a Panel for a similar reason:

   With the native Tiggzi Radio Group, to determine which Radio button was selected, I had to write code for each radio button itself to detect if it had been selected. With the HTML generated Radio Group in the Panel, the following code let's me determine which Radio Button is selected by going at the entire Radio Group.

   var LicenseChosen = $('input[type="radio"][name="VDICitrixXAXDLicensingRadioGroup"]:checked').val();

   Needless to say, this is much, much easier to code and maintain instead of using Click events on 9 different Radio Buttons.

3. The Radio Group that is in the HTML code generated within the Panel that is supposed to be exposed by the checkbox selection...the issue that started this thread...it exhibits the same behavior on the iPhone/iPad that the Checkboxes do...namely, it doesn't expose a slider I have hidden.

[Maryna Brodina]

I reproduced this issue. I will update as soon as we'll figure it out.

[Gary5014869]

Thought I'd update on this issue as I've done some other testing today. This issue happens not just with IOS, but within the Android Emulator as well as the Opera Mobile Browser Emulator.

I could also reproduce the problem by using Chrome's Set User Agent feature in its Developer tools. It did not happen just by overriding the User Agent and setting it to a mobile device such as IOS. I also had to check the box 'Emulate Touch Events'.

After researching the issue, it appears that the Click and Tap event are not correctly being caught for some reason when the device is a touch only device. I messed around with trying to remedy this by trying to set attributes via javascript, but was not able to find the right combination.

Hopefully this might help you guys out if you haven't been able to narrow things down or haven't had a chance to look at this yet.

[Gary5014869]

Thought I would clarify this some...

The behavior outside of the Panel happens when I am trying to register a click on the Checkbox Group or Radio Button Group, or even if either is contained withing a collapsible element and I try getting the click on the collapsible element.

the goal i'm looking for is to keep from needing to write custom javascript for every checkbox and radio button to execute on click, but to get the click at a higher level and write one routine.

Maybe there is a better way to do this?

[Maryna Brodina]

Hello! We're working on this issue, but here is a workaround:

On "VDICitrixProductSelectionPanel" you have two events - "click" and "virualClick". You should delete them. Then go to "VDICitrixProductSelectionPanel" properties, click Edit HTML and enter the next code:

XenDesktop

XenApp

Provisioning Services

XenClient

RemotePC

XenServer

Netscaler

Access Gateway

ShareFile

[Maryna Brodina]

Hello! We're working on this issue, but here is a workaround:

On "VDICitrixProductSelectionPanel" you have two events - "click" and "virualClick". You should delete them. Then go to "VDICitrixProductSelectionPanel" properties, click Edit HTML and enter the next code:

code<div data-role="fieldcontain" >
<fieldset data-role="controlgroup">
<label for="VDICitrixProductSelectXDCheckBox">XenDesktop<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectXDCheckBox" id="VDICitrixProductSelectXDCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectXACheckBox">XenApp<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectXACheckBox" id="VDICitrixProductSelectXACheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectPVSCheckBox">Provisioning Services<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectPVSCheckBox" id="VDICitrixProductSelectPVSCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectXCCheckBox">XenClient<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectXCCheckBox" id="VDICitrixProductSelectXCCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectRPCCheckBox">RemotePC<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectRPCCheckBox" id="VDICitrixProductSelectRPCCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectXSCheckBox">XenServer<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectXSCheckBox" id="VDICitrixProductSelectXSCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectNSCheckBox">Netscaler<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectNSCheckBox" id="VDICitrixProductSelectNSCheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectAGEECheckBox">Access Gateway<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectAGEECheckBox" id="VDICitrixProductSelectAGEECheckBox" data-mini=true&#47;>
<label for="VDICitrixProductSelectSFCheckBox">ShareFile<&#47;label>
<input type="checkbox" name="VDICitrixProductSelectSFCheckBox" id="VDICitrixProductSelectSFCheckBox" data-mini=true&#47;>
<&#47;fieldset>
<&#47;div>
<script>
$('[name="VDICitrixProductSelectionPanel"] label')&#46;unbind()&#46;bind(
{
vclick: function()
{ console&#46;log("Yeah!");
var XDisChecked = $('input[name=VDICitrixProductSelectXDCheckBox]')&#46;is(':checked')
var XAisChecked = $('input[name=VDICitrixProductSelectXACheckBox]')&#46;is(':checked')
var PVSisChecked = $('input[name=VDICitrixProductSelectPVSCheckBox]')&#46;is(':checked')
var XCisChecked = $('input[name=VDICitrixProductSelectXCCheckBox]')&#46;is(':checked')
var RPCisChecked = $('input[name=VDICitrixProductSelectRPCCheckBox]')&#46;is(':checked')
var XSisChecked = $('input[name=VDICitrixProductSelectXSCheckBox]')&#46;is(':checked')
var NSisChecked = $('input[name=VDICitrixProductSelectNSCheckBox]')&#46;is(':checked')
var AGEEisChecked = $('input[name=VDICitrixProductSelectAGEECheckBox]')&#46;is(':checked')
var SFisChecked = $('input[name=VDICitrixProductSelectSFCheckBox]')&#46;is(':checked')
var VDICitrixXAXDLicensingRadioGroupLabel = $("[dsid='VDICitrixXAXDLicensingRadioGroupLabel']");
var VDICitrixXAXDLicensingRadioGroupPanel = $("[dsid='VDICitrixXAXDLicensingRadioGroupPanel']");
var VDICitrixXAXDLicensingRadioGroup = $("[dsid='VDICitrixXAXDLicensingRadioGroup']");
var VDICitrixXDtoXASliderLabel = $("[dsid='VDICitrixXDtoXASliderLabel']");
var VDICitrixXDtoXASlider = $("[dsid='VDICitrixXDtoXASlider']");

if(XDisChecked==true PVSisChecked==true XCisChecked==true RPCisChecked==true XAisChecked==true){
VDICitrixXAXDLicensingRadioGroupPanel&#46;show();
VDICitrixXAXDLicensingRadioGroupLabel&#46;show();
VDICitrixXAXDLicensingRadioGroup&#46;show();
} else if (XDisChecked==false && PVSisChecked==false && XCisChecked==false && RPCisChecked==false && XAisChecked==false){
VDICitrixXAXDLicensingRadioGroupPanel&#46;hide();
VDICitrixXAXDLicensingRadioGroupLabel&#46;hide();
VDICitrixXAXDLicensingRadioGroup&#46;hide();
$('input:radio[name=VDICitrixXAXDLicensingRadioGroup]:checked')&#46;prop('checked', false)&#46;checkboxradio("refresh");
VDICitrixXDtoXASlider&#46;val(0)&#46;slider("refresh");
VDICitrixXDtoXASliderLabel&#46;parent()&#46;hide();
VDICitrixXDtoXASlider&#46;parent()&#46;hide();
} else {
}
}
});
<&#47;script>/code

[Maryna Brodina]

It seems like JQuery Mobile bug.
(JQM has similar open issue https://github.com/jquery/jquery-mobi...), but it works with a workaround I suggested above.

[Ryein Goddard]

A 10 month old bug is still an issue. That doesn't sit well with me.