liferay-auialloy-ui

AlloyUI selector for multiple ids


I want to call a function on blur of two elements, but I can only get it to work for a single element.

I used the A.one() method to select the elements.

Here is my code:

AUI().use('aui-base','aui-io-request', function(A){
    A.one('#<portlet:namespace/>hospitalName',
        '#<portlet:namespace/>date').on('blur',
        function(){

    });
});

Solution

  • To select multiple elements by id in AlloyUI (and YUI), use the Node.all method and a CSS selector like #id1, #id2, #id3.

    For your example, the solution would look something like this:

    A.all('#<portlet:namespace/>hospitalName, #<portlet:namespace/>date').on('blur',
        function(event){
            // event.target is the blurred element.
            /* your code here... */
        }
    );
    

    See this runnable example for more details:

    YUI().use('node', function(A) {
    
      A.all('#hospitalName, #date').on('blur', function(event) {
        var input = event.target;
        document.getElementById('output').innerHTML = input.get('id') + ' blurred';
      });
    
    });
    <script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
    Hospital Name:
    <input type="text" id='hospitalName' />
    Date:
    <input type="text" id='date' />
    <div id="output"></div>