How do I pass a an element position to jquery UI dialog

Question

I have a list of elements and when clicking on each one I would like my jQueryUI dialog box to pop up next to the list element that was clicked on.

$( "#selector" ).dialog({ draggable: false,
              width: 250,
              autoOpen: false,
              position: [e.pageX,e.pageY] });

$(".openDialog").click(function(e){
        console.log('I need the cooridnates x:'+e.pageX+' and y:'+e.pageY+'to be passed to the dialog box');
        $( "#selector" ).dialog("open");
});

I can get the coordinates I need, but I'm having trouble passing them to the dialog init.

Would love some insight into this.

Thanks in advance!

Answer 1

Since you want to show the dialog next to the clicked element, you should defer setting the dialog's position until that information becomes available, i.e. in your event handler:

$("#selector").dialog({
    draggable: false,
    width: 250,
    autoOpen: false
});

$(".openDialog").click(function(e) {
    $("#selector").dialog("option", "position", [e.pageX, e.pageY])
                  .dialog("open");
});

Answer 2

Before showing the dialog again, try:

$("#selector").dialog("option", "position", [e.pageX, e.pageY]);