michelle michelle - 4 months ago 43
PHP Question

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

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

Example dialogue (draggable + resizable):

<div id="menu" title="menu title"></div>
<script>
$(document).ready(function() {
// if i use $("#menu").draggable({}); I can get the coordinates
$("#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'
}).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 };
$.post("savelayout.php", {
coordtop: coord.top,
coordleft: coord.left
});
});
});
</script>

Answer

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);
    }
  });
});
Comments