inputliferayalloy-uiliferay-aui

AUI input keyup detection does't work


I have this script:

<aui:script use="aui-node,aui-io-request,aui-base,event">
AUI().use('event', 'aui-node', 'aui-base', function (A) {

    var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost').on('keyup', function (event) {
        alert("Hi you have performed On change Event and Thank You");
    });
})
</aui:script>

Why doesn't the alert ever appear?


Solution

  • Your code has multiple issues:

    1. You do not need to specify an AUI().use(//... if you are using <aui:script> with the use attribute.
    2. You only need to specify the aui-node module as an argument to the use attribute.
    3. You most likely do not want to set inputObject equal to the return value of the on method. Instead it seems that you would want to do var inputObject = A.one('#id');.
    4. A change event is not the same as a keyup event, so either your .on('change', function(event) { //... or your alert message which claims that it is an onchange event is incorrect.
    5. You may have an issue with your A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost') failing to find the element (check the browser logs to find out if this is true). If it is, your element may have a partially generated prefix which can be obtained using <portlet:namespace />.

    If you put all that together:

    <aui:script use="aui-node">
        // possibly change the A.one() argument to '#<portlet:namespace />_Tend_ApplicationMain_WAR_ETenderportlet_vrednost'.
        var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
        inputObject.on('keyup', function (event) {
            alert("Hi you have performed On keyup Event and Thank You");
        });
    </aui:script>
    

    Here's a runnable example:

    YUI().use('aui-node', function(A) {
        var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
        inputObject.on('keyup', function (event) {
            alert("Hi you have performed On keyup Event and Thank You");
        });
    });
    <script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
    <input id="_Tend_ApplicationMain_WAR_ETenderportlet_vrednost" />