Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #103688
    Up
    0
    Down

    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

    #103705
    Up
    0
    Down

    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/

    #103718
    Up
    0
    Down
    <span class="Y2IQFc" lang="en">Effectively it seems to fire before the onchange event and then the onfocus doesn't fire.
    Tks</span>
    #103719
    admin
    Keymaster
    Up
    0
    Down

    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/

    #103720
    Up
    0
    Down

    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

    #103721
    Up
    0
    Down

    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

    #103723
    admin
    Keymaster
    Up
    0
    Down

    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/

    #103733
    Up
    0
    Down

    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

    #103739
    george_kostov0
    Participant
    Up
    0
    Down

    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/

    #103742
    Up
    0
    Down

    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>

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.