Question

How to position the primefaces dialog dynamically at x,y co-ordinates defined by javascript variables ?

My attempt:-

I tried doing that through javascript itself but I failed to set the position through following code:

        var dialog_x=300;
        var dialog_y=500;

        var s = document.getElementById("dialogId"); 
        s.style.position = "relative";
        s.style.left = dialog_x + "px";
        s.style.top = dialog_y + "px";

Note that this dialogId is what I defined in the id attribute of dialog. As I came to know that id of parent container are also appended to this id, I also tried using the resultant id(after append) but it doesnt work.

Edit:

I figured out that dialog container(which contains the header and the content of the dialog) which I expected to be assigned the id that I defined through id attribute on dialog component is not assigned any id which was the reason why I could not access the dialog. I still cannot understand how I should go about retrieving this element when it has not been assigned any id. The id that I defined was infact assigned to the dialog content container inside of the main dialog container.

Answer 1

Using jQuery, you can call a javascript method that will adjust the positionning of the dialog when the dialog will show.

    <h:form prependId="false">
        <p:commandButton value="Select Location" oncomplete="TreeDialog.show()" id="selectLocationButton"></p:commandButton>
    </h:form>
    <p:dialog header="Select the location" id="treeDialog"
            widgetVar="TreeDialog"
            modal="true" onShow="adjustPositionning($('#selectLocationButton'), $('#treeDialog'))" width="450">
        <p:tree value="#{myController.root}" var="node" dynamic="true" cache="true">  
        <p:treeNode>  
            <h:outputText value="#{node.name}" />  
        </p:treeNode>  
        </p:tree>  
    </p:dialog>

<script type="text/javascript">
function adjustPositionning(sourceElement, dialog) {
    var x = sourceElement.offset().left;
    var y = sourceElement.offset().top;
    var width = sourceElement.width();
    var padding = 15;
  dialog.parent().offset({ top: y, left: x + width + padding });
}
</script>