Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #103688

    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

    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
    <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

    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

    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

    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

    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

    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

    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

    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>

    #103807

    No help ?

    Tks

    #103813

    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/

    #103815

    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>

    #103817

    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/

    #103828

    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>

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