changeRequest in Alloy 2.5 and Liferay 6.2 cannot be called

Question

I am trying to migrate a portlet from Liferay 6.1 to 6.2 and forced to adapt the Alloy code to 2.5 version and the aui-pagination part:

        pagination = new A.Pagination({
            circular: false,
            containers: '.pagination',
            on: {
                changeRequest: function(event) {
                    var newState = event.state;
                    this.setState(newState);

                }
            },
            total: 10,
        });

But whenever I call the changeRequest() of the pagination instance from other functions I get errors:

this._pagination.changeRequest();

Is there any solution for this?

1. Liferay 6.2 uses AlloyUI `2.0` not AlloyUI `2.5`. 2. You are setting a function that will execute on the `changeRequest` event, not adding a function to the `pagination` object. `pagination.changeRequest()` cannot be called since it does not exist. It's a function that will be executed every time the user clicks a different pagination option. If you want to execute that function's code programmatically, you can try [simulating the `changeRequest` event](https://yuilibrary.com/yui/docs/event/simulate.html). — stiemannkj1, Mar 10 '17 at 15:26

stiemannkj1 · Answer 1 · 2017-03-13T17:49:45.473

Your question is a little strange. How would you call changeRequest() without passing an event in your example? And why set the state from the event when that's already happening automatically?

To answer the more generic question that you are asking, there are several potential solutions to calling the changeRequest() function programmatically:

Define a named function and set it to be the changeRequest() function:

function changeRequest() {
    console.log('changeRequest function called!');
}

var pagination = new Y.Pagination({ /* ...your code here... */ });
pagination.on('changeRequest', changeRequest);

// OR if you don't need to access the pagination component
// in your changeRequest() method

new Y.Pagination({
    /* ...your code here... */
    on: {
        changeRequest: changeRequest
    }
});

This method will only work if you do not need to use the event parameter, or if you only use the event parameter when the actual event occurs, or if you construct the event parameter yourself.

Runnable example using your code:

    YUI().use('aui-pagination', function(Y) {
        var pagination = new Y.Pagination({
            circular: false,
            containers: '.pagination',
            total: 10,
        });

        function changeRequest(event) {
            if (event) {
                alert('changeRequest called with event');
                var newState = event.state;
                pagination.setState(newState);
            } else {
                alert('changeRequest called without event');
            }
        }

        pagination.after('changeRequest', changeRequest);
        pagination.render();

        Y.one('#button').on('click', function() {
            changeRequest();
        });
    });

    <script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
    <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
    <br />
    <button id="button">call <code>changeRequest()</code></button>

Call pagination.next() or pagination.prev():

YUI().use('aui-pagination', function(Y) {
    // ...your code here...
    pagination.next();
});

Runnable example using your code:

    YUI().use('aui-pagination', function(Y) {
        var pagination = new Y.Pagination({
            circular: false,
            containers: '.pagination',
            total: 10,
            on: {
                changeRequest: function(event) {
                  alert('changeRequest called with event');
                  var newState = event.state;
                  pagination.setState(newState);
                }
            }
        }).render();

        Y.one('#button').on('click', function() {
            pagination.next();
        });
    });

    <script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
    <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
    <br />
    <button id="button">call <code>changeRequest()</code></button>

Simulate a click event on one of the pagination items:

YUI().use('aui-pagination', 'node-event-simulate', function(Y) {
    // ...your code here...
    pagination.getItem(1).simulate('click');
});

Runnable example using your code:

 YUI().use('aui-pagination', 'node-event-simulate', function(Y) {
  var pagination = new Y.Pagination({
   circular: false,
   containers: '.pagination',
   total: 10,
   on: {
    changeRequest: function(event) {
     alert('changeRequest called with event');
     var newState = event.state;
           pagination.setState(newState);
       }
   }
  }).render();

  Y.one('#button').on('click', function() {
   pagination.getItem(1).simulate('click');
  });
 });

 <script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
 <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
 <br />
 <button id="button">call <code>changeRequest()</code></button>

changeRequest in Alloy 2.5 and Liferay 6.2 cannot be called

1 Answers1