All posts tagged widget

• April 2, 2014

  Get widgetVar by Id

  

  I have many cases in my apps where I needed to get the widgetVar object in Javascript by the component Id.
  I have made this helpful function in order to achieve that goal .

  function getWidgetVarById(id) {
      for (var propertyName in PrimeFaces.widgets) {
        if (PrimeFaces.widgets[propertyName].id === id) {
          return PrimeFaces.widgets[propertyName];
        }
      }
  }

  Usage

  getWidgetVarById('form:dialogId');

  This will return the object, in the previous case a dialog widgetVar object is returned, to show it simply call show()  right away.

  getWidgetVarById('form:dialogId').show();

  – Conclusion

  All the widgetVars are stored in the PrimeFaces.widgets. namespace.
  Iterating over that namespace and comparing the given Id with the object’s is the way to find your widgetVar.

  Note: this equals to the expression  #{p:widgetVar(‘form:dialogId’)}  (Server-side evaluation)

   

  5 Comments / JSF, Primefaces / Hatem Alimam

  Like / Tweet

• September 24, 2013

  Primefaces: Close All Lightboxs

  

  I had a datatable which contains in each row a link to a different iFrame p:lighbox, and on the same page I had to repeat the same datatables with different objects modules and they also have iFrame p:lightbox.

  I came to a place where I had to close the p:lightbox from a backing bean according to some logic validation,
  and in the same time I can’t know the widgetvar of the current opened p:lightbox, so I had to write some generic function to close all the Lightboxes inside the page.

  First I had to know how primefaces generate the widget vars, after some search I found a function in primefaces which takes an ID of a component and generate a proper widgetvar for it.

  #{p:widgetVar('componentId')}
  

  Basically it does the following it gets the id of the component, for example formId:componentId and replaces the : with _ and append a widget_ to the beginning of the var so it becomes widget_formId_componentId.

  So I came with the following function of jQuery to close all my lightboxs in the page

  function closeLightBoxes() {	
  	$('.ui-lightbox').each(function() {
  		var widgetVar = 'widget_' + $(this).attr('id').replace(":", "_").replace('_panel','');		
  		window[widgetVar].hide();
  	});
  }
  

  First I select each .ui-lightbox class, which is the div of the iFrame and then I do the simple formation of primefaces widgetvar generation, but primefaces adds _panel to the end of the ID of that div, so I had to remove it.

  Note: do not specify any widgetvar to your lightboxs, not even dynamic ones.

  No Comments / JSF, Primefaces / Hatem Alimam

  Like / Tweet