CheckBoxList - onclick() JS function how to detect click outside of the CheckBox(HTML input)

Question

I am showing a loading image onclick of any of the item in the CheckBoxList.I am using javascript onclick method.

CheckBoxList control

<asp:CheckBoxList ID="ckBLBusinessUnits" onclick="loader(this.id);" runat="server" AutoPostBack="True" Visible="false" OnSelectedIndexChanged="ckBLBusinessUnits_SelectedIndexChanged"></asp:CheckBoxList>

I am forced to use JS onclick instead of jQuery event binding, as the control is inside the updatepanel. The jQuery function is not firing after the initial load. If i add an alternative .ie to use Sys.Application.add_load(loader); then the server side code is executed first and later the JS function. Which doesn't help my case.

JS function

function loader(controlID) {
    if (controlID == "ckBLBusinessUnits")
    {
        if (($('#ckBLBusinessUnits :checkbox:checked').length) >= 5)
        {
            alert("Maximum 5 BUs can be selected.");
            modal = document.getElementById('loadingImage');
            modal.style.display = "block";
        }
    }
    if (controlID == "selectSegment") {
        modal = document.getElementById('loadingImage');
        modal.style.display = "block";
    }
}

Now the issue here is, if i click little outside the checkboxes then JS method is triggered which means the loading image will be shown. At the same point there is no postback happening hence the image cannot be hidden(in C# selectSegment_SelectedIndexChanged).

How can I handle the click outside the checkboxes?

Rendered HTML

<table id="ckBLBusinessUnits" onclick="loader(this.id);">
    <tbody><tr>
        <td><input id="ckBLBusinessUnits_0" type="checkbox" name="ckBLBusinessUnits$0" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$0\',\'\')', 0)" value="BU 1"><label for="ckBLBusinessUnits_0">BU 1</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_1" type="checkbox" name="ckBLBusinessUnits$1" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$1\',\'\')', 0)" value="BU 2"><label for="ckBLBusinessUnits_1">BU 2</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_2" type="checkbox" name="ckBLBusinessUnits$2" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$2\',\'\')', 0)" value="BU 3"><label for="ckBLBusinessUnits_2">BU 3</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_3" type="checkbox" name="ckBLBusinessUnits$3" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$3\',\'\')', 0)" value="BU 4"><label for="ckBLBusinessUnits_3">BU 4</label></td>
    </tr>
</tbody></table>

Either unbind your jQuery click event or override it. Please post the rendered HTML of you checkboxes. — Alexander Higgins, Jul 19 '17 at 08:26

Alexander Higgins · Answer 1 · 2017-07-19T09:24:22.890

0

You can trigger JavaScript events to fire after your Ajax Panel refreshes.

Use one of the methods in the referenced link to have JQuery bind or unbind events to any new elements from the refresh. You can also use it as a trigger to either unbind your either unbind the event causing the image to load or override it so that it calls a method to trigger a post back if that is what you would like.

In your code the onclick event is getting set on the parent table of your check boxes:

<table id="ckBLBusinessUnits" onclick="loader(this.id);">

This is why the event is firing when you click outside of the checkbox.

edited Jul 19 '17 at 09:24

answered Jul 19 '17 at 08:31

Alexander Higgins

6,765
1
23
41

Totally agree. Now if i use the trigger then also the event is not getting triggered. As the .net controls are inside updatepanel and there is partial postback happening. Any suggestions? – Ishan Jul 19 '17 at 09:39

CheckBoxList - onclick() JS function how to detect click outside of the CheckBox(HTML input)

1 Answers1