Tuesday 22 October 2013

ipc inter portlet communication liferay client side using jqery

This is very first time that I am writing my blog.
Here I am writing a simple code of client side ipc.
This code is perfectly working for me and I hope it is also useful for you.

Step 1: Sender side/trigger portlet .

view.jsp

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
This is the <b>Ipc JScript Trigger Portlet</b> portlet in View mode.
<script type="text/javascript" >
     $(function () {
             $('a.update_label').click(
            function(event) {
              Liferay.trigger('updateLabel');      
              return false;
            }
          ); $('a.remove_label').click(
                  function(event) {
                      Liferay.trigger('removeLabel');
                      return false;
                    }
          );  $('input.ppc_button').click(
                          function(event) {
                             var val = $('input.ppc_text').val();
                             Liferay.trigger('retrieveValue', {parameter: val});
                             return false;
                           }
                         );
        }
     );  
</script>

<br/><a class="update_label">Update Label Using PPC</a>
<br/><a class="remove_label">Remove Label Using PPC</a>
<p/>
<form>
<input type="text" class="ppc_text" value="Sample Data" />
<br/><input type="button" class="ppc_button" value="Update Label" />
</form>



Step 2: listener or receiver side

view.jsp






<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
This is the <b>Ipc J Script Listener Portlet</b> portlet in View mode.
<script type="text/javascript">
Liferay.bind(
        'updateLabel',
        function(event) {
          $('label.ppc_label_info').html('The portlet is invoked.......');
        }
     );
     Liferay.bind(
        'removeLabel',
        function(event) {
          $('label.ppc_label_info').html('');
        }
     );
            Liferay.bind(
           'retrieveValue',
           function(event) {
               $('label.ppc_label_info1').html('Input:'+event.parameter);
           }
        );  
</script>
<br/><label class="ppc_label_info" />
<br/><label class="ppc_label_info1" />








here we are using jquery in which we are using function
1: Liferay.trigger
2: Liferay.bind
Liferay.trigger will send to you that event name suppose
Liferay.trigger('<eventName>',{key,value});
If this will not work then please inform me
asif aftab
asifaftab87@gmail.com