2 Temmuz 2013 Salı

Richfaces ListShuttle Javascript Manipulation by jQuery

Hi again, for people who are still using Rich Faces with version 3.3.x and having problems in manipulating ShuttleList component via javascript, i have a solution for you. But i have to warn you before that it is not the best solution around. So I have a scenario in which when user selects not interested option then we need to deselect other options from the selected list. You may think that you can do it in server side but what if you have a problem with reRender because it does not works! Then here is my solution for you. Some people who just doesn't want to go to server side for such problem would like it i think.


   function beforeListChange(compId) {
       var srcValues = jQuery(jQuery(document.getElementById(compId))
           .find('.rich-shuttle-body').find('.rich-shuttle-internal-tab')[0]).find('tr');
       var tarValues = jQuery(jQuery(document.getElementById(compId))
           .find('.rich-shuttle-body').find('.rich-shuttle-internal-tab')[1]).find('tr');
       notInterestedWith = false;
       for (var i = 0; i & lt; srcValues.length; i++) {
           if (jQuery(srcValues[i]).find('label').text() == 'Not Interested') {
               notInterestedWith = true;
               break;
           }
       }
   }

   function listChanged(compId) {
       var hasInterestedWith = false;
       var tarValues = jQuery(jQuery(document.getElementById(compId)).find('.rich-shuttle-body').find('.rich-shuttle-internal-tab')[1]).find('tr');

       if (notInterestedWith) {
           for (var i = 0; i & lt; tarValues.length; i++) {
               if (jQuery(tarValues[i]).find('label').text() == 'Not Interested') {
                   hasInterestedWith = true;
                   break;
               }
           }
           if (hasInterestedWith) {
               removing = true;
               for (var i = tarValues.length - 1; i & gt; - 1; i--) {
                   if (jQuery(tarValues[i]).find('label').text() != 'İlgilenmiyor') {
                       jQuery(tarValues[i]).trigger('click');
                       jQuery(jQuery(document.getElementById(compId))).find('.rich-shuttle-control-remove').trigger('click');
                   }
               }
               removing = false;
           }
       } else {
           for (var i = 0; i & lt; tarValues.length; i++) {
               if (jQuery(tarValues[i]).find('label').text() == 'Not Interested') {
                   hasInterestedWith = true;
                   break;
               }
           }
           if (hasInterestedWith & amp; & amp; !removing) {
               for (var i = 0; i & lt; tarValues.length; i++) {
                   if (jQuery(tarValues[i]).find('label').text() == 'İlgilenmiyor') {
                       jQuery(tarValues[i]).trigger('click');
                       jQuery(jQuery(document.getElementById(compId)))
                           .find('.rich-shuttle-control-remove').trigger('click');
                       break;
                   }
               }
           }
       }

   }
                        


HTML

<rich:listShuttle
sourceValue="#{type.values}"
targetRequired="true"
targetValue="#{bean.selectedLikes[type.id]}"
var="items"
sourceCaptionLabel="Options"
onlistchange="beforeListChange(this.id)"
onlistchanged="listChanged(this.id)"
targetCaptionLabel="Selected" >
    <rich:column>
        <h:outputLabel
        value="#{items.description}"></h:outputLabel>
    </rich:column>
</rich:listShuttle>                      
Idea in here is simple with the function beforeListChange i control if there is Not Interested option in Options box if there is one i record this value for using with onlistchanged event. After complation of this method listChanged method is being called and in it again i control if there is Not Interested option in Selected box. If there is one then i need to deselect other options i do it by selecting items via jQuery you can realize how i do it above then i generate an event to move it to the options box by generating a click event on remove button. It looks maybe not the best solution but it works perfect programmatically and it doesn't invalidates component.

Hiç yorum yok:

Yorum Gönder