Databases
StackOverflow2013
Postsdbo
POAjax X and Y position update not working correctly with Jquery UI draggables
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax X and Y position update not working correctly with Jquery UI draggables
    primarykey
    data
    text
    <p>Could do with some help I have a simple ajax powered stickies app (with jquery UI and PHP) in development, my code below stores X, Y for dragged items posts it to a database and loops results back to a div. I have successfully built code for a text version (akin to post it notes) but I am trying to do a draggable/scalable version to hold images. But when I do this my positions are being stored in the database looped out into a #projbaord div but not being used to correctly position the HTML elements (i have checked the page source and the style: is showing correct x, y but this is not reflected on screen). </p> <p>I think the problem must be in the loop out of the PHP and style of the position x, y but cannot seem to fathom it out! Any ideas or another way of achieving same result?</p> <p>I thought this maybe a position:relative/absolute problem but that seems to be okay - I am stumped at present! Hope you can genius can help!</p> <p>Javascript to handle behaviour and store values in database:</p> <pre><code>function imageStickyDragXYUpdate(){ $(".imagesticky").each(function(index){ var resizethese = $(this).children(); $(this).draggable({ cursor: 'move', stack: '.imagesticky', opacity: '0.5', containment: '#projboard', scrollspeed: '40', scrollSensitivity: '10', stop:function(){ var coord=$(this).position(); var coordLeft = coord.left; var coordTop = coord.top; var imageStickyid = $(this).attr('imagestickyid'); //alert('x='+ coordTop + 'y=' + coordLeft + 'id=' +imageStickyid); var datastring = 'xupdateimg='+ coordTop + '&amp;y=' + coordLeft + '&amp;imgstickyid=' +imageStickyid + '&amp;projid=' + proj_id + '&amp;uid=' + uid; //alert(datastring); $.ajax({ type: "POST", url: "uploaddata.php", data: datastring, success: function(data){ $("#projboardresults").html(data); textStickyDragXYUpdate();//not important other function for working text stickies imageStickyDragXYUpdate(); } }); } }); }); } </code></pre> <p>PHP to show results</p> <pre><code>&lt;?php $user_id= $_POST['uid']; $proj_id=$_POST['projid'];//to be validated as int $get_imgsticky_query = "SELECT * FROM imagesticky WHERE user_id = $user_id AND project_id=$proj_id"; $get_imgsticky_result=mysql_query($get_imgsticky_query); while($row=mysql_fetch_assoc($get_imgsticky_result)){ $x = $row['imagesticky_x']; $y = $row['imagesticky_y']; $imagesticky_w = $row['imagesticky_w']; $imagesticky_h = $row['imagesticky_h']; $imagesticky_url = $row['imagesticky_url']; $imagesticky_id = $row['imagesticky_id']; echo '&lt;div class="imagesticky" imagestickyid="'.$imagesticky_id.'" style="position: absolute; left:'.$x.'px; top:'.$y.'px;"&gt; &lt;a class = "clickaddimage" href="addimage.php"&gt;&lt;img src="images/clicktoadd.png" alt="add image" title="Click to add image"&lt;/a&gt; &lt;img src="'.$imagesticky_url.'" width="'.$imagesticky_w.'" height="'.$imagesticky_h.'"/&gt; &lt;a href="" class="deleteimagesticky"&gt;&lt;img src="images/closey.png" title="delete" alt="delete"/&gt;&lt;/a&gt; &lt;/div&gt;'; } ?&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChrisSherwood
    1. USChrisSherwood
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COSeems like it should work correctly. Try to apply position: relative; to element that will contain stickies.
      singulars
      1. POAjax X and Y position update not working correctly with Jquery UI draggables
      1. USKane Cohen
    2. COthanks for reply tryed relative and no change, very frustrating! LOL
      singulars
      1. POAjax X and Y position update not working correctly with Jquery UI draggables
      1. USChrisSherwood
    3. COUnfortunately without direct access to the page would be impossible to tell where's a problem. Take a 30 min break, drink a cup of tea and try to find problem again.
      singulars
      1. POAjax X and Y position update not working correctly with Jquery UI draggables
      1. USKane Cohen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload