Note: Change the position of a Dialog in Primefaces from javascript

If you are working with primefaces you will figure out that this framework implemented with JQuery library, this a good behaviour for jsf pages, if you try to do something with javascript, you have to keep in mind reading primefaces css to understand how get that component you need.

1. First Step should be declare the libraries in head part of JSF:

	<h:outputScript library="primefaces" name="jquery/jquery.js"/>
	<script language="javascript" type="text/javascript" src="#{request.contextPath}/js/jquery-1.7.1.min.js"/>
	<script language="javascript" type="text/javascript" src="#{request.contextPath}/js/position.js"/>

view raw header.jsp hosted with ❤ by GitHub

2. Second step is to declare a position.js in your WEB-INF folder and write a function like this:

	function showMessageDialog(sourceElement, jqr) {
	var x = getOffset(document.getElementById(sourceElement)).left;
	var y= getOffset(document.getElementById(sourceElement)).top;
	var parentSource = jqr.parent();
	var parent = jqr.parent();
	parent.find('.ui-dialog').each(function() {
	jQuery(this).css('position', 'absolute');
	jQuery(this).css('width', '780px');
	});
	parent.addClass("autoWidthDialog");
	parent.offset({
	top: y-85 //change Y position in pixels
	,left: x-3 //change X position in pixels
	});
	MessageDialog.show();
	}

view raw position.js hosted with ❤ by GitHub

3. Finally declare the above function in your button

	...
	<p:commandLink onmouseover="showMessageDialog('form50:selectLocationButton', PoliticaDialog.jq);">
	<h:outputText id="selectLocationButton" value="Show MessageDialog"/>
	</p:commandLink>
	<p:dialog modal="true" widgetVar="statusDialog" header="Process..." draggable="false"
	closable="false">
	<img src="#{request.contextPath}/images/ajaxloadingbar.gif"/>
	</p:dialog>
	...
	<p:panel id="popup" style="border:0px">
	<p:dialog position="left top" id="MessageDialog" widgetVar="MessageDialog"
	header="Something to describe the conten">
	<h:outputText value="Content of the Message...."/>
	</p:dialog>
	</p:panel>

view raw index.jsp hosted with ❤ by GitHub

And that is it, you can take the control of any primefaces component rendered in the JSF page, using JQuery. 

Best Regards,