jquery-ui dialog (save position via php) - only works with .draggable not .dialog

Question

I'm trying to store the user position + size of my jquery-ui dialogs to a mysql db. I tried reading the manual here: https://api.jqueryui.com/1.10/dialog/ and there was no documentation of how to do this. The issue with my code below is $data = json_decode($_POST["data"]); in savelayout.php returns NULL.

Edit: I was able to get the coordinates to store to mysql via PHP post this way, however they're always the same size 3.078125 and 38.453125. alert(JSON.stringify(order)); always outputs the same coordinates as well, despite using var coord = $(this).position();

Edit: Using .draggable works but not .dialog

Edit: Added more broken code. Whatever. Example dialogue (draggable + resizable):

       <script>
    $(document).ready(function() {



        $("#menu").dialog({
        bgiframe: true,
        position: {my: 'left <?php echo $menumy; ?>', at: 'left <?php echo $menuat; ?>', of: window},
        modal: false,
        height: <?php echo $menuheight; ?>,
        width: <?php echo $menuwidth; ?>,
        dialogClass: 'fixed-dialog',
        dragStop: function(e, ui) { saveCoords(ui.offset.top, ui.offset.left); },
                      resize: function( event, ui ) {
                      $( this ).dialog( "option",
                 ui.size.height + " x " + ui.size.width );

                $.post("savelayout.php", { menuheight: ui.size.height, menuwidth: ui.size.width } );
                   }
         }).mousemove(function(){
                var coord = $(this).position();
                $("p:last").text( "left: " + coord.left + ", top: " + coord.top );

         }).mouseup(function(){
                var coords=[];
                var coord = $(this).position();
                var item={ coordTop:  coord.left, coordLeft: coord.top  };
                coords.push(item);
                var order = { coords: coords };

                });

        });


    function saveCoords(top, left) {
      $.post(
        "savelayout.php",
        JSON.stringify({
          coordtop: Math.round(top),
          coordleft: Math.round(left)
        })
      );
    }
        </script>

Answer 1

Ok, so when you move a dialog, you can do this to capture the top (y) and left (x) values.

function saveCoords(top, left) {
  $.post(
    "savelayout.php",
    JSON.stringify({
      coordtop: Math.round(top),
      coordleft: Math.round(left)
    })
  );
}

$("#menu").dialog({
    bgiframe: true,
    position: {
      my: 'left top',
      at: 'left top',
      of: window
    },
    modal: false,
    dialogClass: 'fixed-dialog',
    dragStop: function(e, ui) {
      saveCoords(ui.offset.top, ui.offset.left);
    }
  });

When you go to create the Dialog again, and you want to position it back from your values, use position like so:

<?php
// Collect value from MySQL and enter it into an array
$menu = array("at" => array("top" => 0, "left" => 0));
?>

position: {
  my: 'left top',
  at: 'left+<?php echo $menu['at']['left']; ?> top+<?php echo $menu['at']['top']; ?>',
  of: window
}

You can improve this a little with a check:

position: {
  my: 'left top',
  at: 'left<?php echo isset($menu['at']['left']) ? '+'.$menu['at']['left'] : ''; ?> top<?php echo isset($menu['at']['top']) ? '+'.$menu['at']['top'] : ''; ?>',
  of: window
}

Personally, I would feed it into a globally defined variable.

Here is a working example:

https://jsfiddle.net/Twisty/d9ff1LLu/

HTML

<div id="results" class="ui-widget-content"></div>
<button id="remake">Remake Dialog</button>
<div id="menu" title="menu title"></div>

CSS

#results {
  height: 2em;
}

jQuery

var menu = {
  at: {
    top: 0,
    left: 0
  }
}

function saveCoords(top, left) {
  $.post("/echo/json/", {
    json: JSON.stringify({
      coordtop: Math.round(top),
      coordleft: Math.round(left)
    })
  }, function(results) {
    menu.at.top = results.coordtop;
    menu.at.left = results.coordleft;
    $("#results").html("Recorded { top: " + results.coordtop + ", left: " + results.coordleft + "}");
  });
}

$(document).ready(function() {
  $("#remake").button().click(function() {
    $("#menu").dialog("close");
    $("#menu").remove();
    $("#results").html("Removed Menu. Creating new at position: 'top+" + menu.at.top + " left+" + menu.at.left + "'");
    var menuDialog = $("<div>", {
      id: "menu",
      title: "New Menu Title"
    }).dialog({
      bgiframe: true,
      position: {
        my: 'left top',
        at: 'left' + (menu.at.left > 0 ? "+" + menu.at.left : '') + ' top' + (menu.at.top > 0 ? "+" + menu.at.top : ''),
        of: window
      },
      modal: false,
      dialogClass: 'fixed-dialog'
    });
  });
  $("#menu").dialog({
    bgiframe: true,
    position: {
      my: 'left top',
      at: 'left top',
      of: window
    },
    modal: false,
    dialogClass: 'fixed-dialog',
    dragStop: function(e, ui) {
      saveCoords(ui.offset.top, ui.offset.left);
    }
  });
});