JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Checkbox on focus doesn’t fire

Tagged: 

Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Author
    Posts
  • September 16, 2022 at 2:41 pm #103688
    tbettinazzi@axioma.it
    Participant

    I’m using smart checkbox in this way

    <smart-check-box name=”ce1403907841″ id=”ce1403907841″ onchange=”assegnaCheck(this, ‘e1403907841’); eseguiRefresh(this)” onfocus=”on_focus(this)”></smart-check-box>

    but the onfocus event doesn’t fire.Is it a bug ?

    Any suggestion ?

    Tks

    September 19, 2022 at 1:07 pm #103705
    svetoslav_borislavov
    Participant

    Hi,

    You can set focus event this way: https://codepen.io/svetoslavb04/pen/KKRmGmM?editors=1111

    If you need further help, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    September 21, 2022 at 7:54 am #103718
    tbettinazzi@axioma.it
    Participant
    <span class="Y2IQFc" lang="en">Effectively it seems to fire before the onchange event and then the onfocus doesn't fire.
Tks</span>
    September 21, 2022 at 9:25 am #103719
    admin
    Keymaster

    Hi,

    Yes, and that is exactly how it should work. Focus is raised when you click, after that Change is raised as it changes the state from true->false or false->true. Then when it is on focus, only Change event is raised as only the state is changed, the focus is not. When you click outside and focus a different element and after that click again on the checkbox, the focus and changed will be raised.

    Best Regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    September 21, 2022 at 10:06 am #103720
    tbettinazzi@axioma.it
    Participant

    Sorry but I didn’t understand (may be some comma are missing).

    When a checkbok has not the focus and I click on it it will fire before onfocus and then onchange or viceversa ?

    Tks

    Tullio

    September 21, 2022 at 10:59 am #103721
    tbettinazzi@axioma.it
    Participant

    I investigate deeper and the problem seems to be a little more complex.

    In the onfocus I activate the following code in order to have the sequence number of the element :

    var elementName = getElementName(element);
    for (var i = 0; i < myPage.length; i++) {
    if (getElementName(myPage.elements[i]) == elementName) {
    id = i;
    }
    }

    I found that when the checkbox goes from unchecked to checked the code fails and doesn’t find the sequence number, when it goes from checked to unchecked it works and finds the correct sequence number.

    Could You explain me why ?

    I also listed all elements and, effectively, when the checkbox is non checked it doesn’t esist in list of the element of the pages.

    Tks

    Tks

    September 21, 2022 at 12:04 pm #103723
    admin
    Keymaster

    Hi Tullio,

    onfocus happens before onchange. When an element is already on focus, it will raise only onchange when the value is changed. We did not find any issue on our side.
    In your post, you’re writing about sequence. The tab order for the focus depends on the tabindex property of the HTML Elements – any html elements, not just smart html elements. If you add the smart-check-box tag to your DOM, it will be in the DOM and after the DOM is loaded(use onload event to ensure it), then you will be able to use querySelector, getElementById, etc.

    Best Regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    September 23, 2022 at 7:39 am #103733
    tbettinazzi@axioma.it
    Participant

    Unfortunately this doesn’t solve my problem.

    I need the sequence in order to set the focus on the next item.

    But my question is : why, when a checkbox is not checked, it isn’t in the list of elements in the page ?

    Tks

    September 23, 2022 at 1:06 pm #103739
    george_kostov0
    Participant

    Hi,

     

    Please provide us with a quick demo of the bug, so we can find the error!
    Thanks in advance!

     

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    September 23, 2022 at 2:34 pm #103742
    tbettinazzi@axioma.it
    Participant

    Here the test case.

    On the first checkbox if You change from checked to unchecked You’ll se an alert “C1 0” (correct) but if You goes from unchecked to checked You’ll get “C1 -1″ (wrong, it should be the same as before).

    Tks

    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <title>Checkbox Overview Demo</title>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
    <link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
    <link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” />
    <link rel=”stylesheet” type=”text/css” href=”styles.css” />

    </head>
    <body class=”viewport”>
    <script>
    function applica(element) {
    var myPage = document.forms[0];
    var id = -1;
    var elementName = element.name;
    for (var i = 0; i < myPage.length; i++) {
    if (myPage.elements[i].name == elementName) {
    id = i;
    }
    }
    alert(elementName + ” ” +id);
    }
    </script>
    <section id=”check-box”>
    <div>
    <p>Checkboxes allow the user to select multiple options from a set.</p><br/>
    <p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br/>
    <p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br/>
    </div>
    <br/>
    <form>
    <div>
    <div class=”check-box-container-light”>
    <smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
    <smart-check-box name=”C2″></smart-check-box>
    </div>
    </div>
    </form>
    </section>
    <br/>
    <!– scripts –>
    <script src=”../../../source/modules/smart.checkbox.js”></script>
    <script src=”index.js”></script>

    </body>
    </html>

    October 3, 2022 at 10:18 am #103807
    tbettinazzi@axioma.it
    Participant

    No help ?

    Tks

    October 6, 2022 at 11:50 am #103813
    svetoslav_borislavov
    Participant

    Hi,

    I have worked on your example, look here: https://codepen.io/dkeamcaksoem/pen/RwyYWJW

    The element is there it is not disappearing. The only thing that I have changed is that I am getting the name this way:
    myPage.elements[i].ownerElement.name not myPage.elements[i].name.

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    October 7, 2022 at 3:29 pm #103815
    tbettinazzi@axioma.it
    Participant

    Tks for your help but this doesn’t solve the problem.

    If You add aonther field to the fom (as in the example) it goes into a js error (e.g. adding an input hidden field).

    <section id=”check-box”>
    <div>
    <p>Checkboxes allow the user to select multiple options from a set.</p><br />
    <p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
    <p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
    </div>
    <br />
    <form>
    <div>
    <div class=”check-box-container-light”>
    <input name=”C0″ type=”hidden”/>
    <smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
    <smart-check-box name=”C2″></smart-check-box>
    </div>
    </div>
    </form>
    </section>

    October 10, 2022 at 12:07 pm #103817
    svetoslav_borislavov
    Participant

    Hi,

    You should search the checkbox in the ‘check-box-container-light’ element.
    Loop through the children and search for the checkbox as shown here: https://codepen.io/dkeamcaksoem/pen/QWrJvgz

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    October 12, 2022 at 9:58 am #103828
    tbettinazzi@axioma.it
    Participant

    Tks for you help but this approach doesn’t work in a more complex environment.

    It’s enough to add a div in whithin and it fails (see below) and in my real environment I’ve many divs or other intermediate objects.

    Why we don’t see it in page elements if not checked ?

    Tks

     

    <section id=”check-box”>
    <div>
    <p>Checkboxes allow the user to select multiple options from a set.</p><br />
    <p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
    <p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
    </div>
    <br />
    <form>
    <div>
    <div class=”check-box-container-light”>
    <input name=”C0″ type=”hidden”/>
    <div>
    <smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
    <smart-check-box name=”C2″></smart-check-box>
    </div>
    </div>
    </div>
    </form>
    </section>

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • You must be logged in to reply to this topic.