Getting CSS value and updating it into SQL

Question

He guys,

I have a div which I make in css like this:

echo '#'. $pess2['naam'] .' { width: 190px; height: 90px; padding: 0.5em; float: left; left:'. $pess2['left'] .'px; top:'. $pess2['top'] .'px; visibility:'. $view .'; }'

Now when I move that div with:

$( "#3" ).draggable({ containment: "#containment-wrapper", scroll: false });

I want to upload it to my database. My question is; how can I get the new left and top (x and y) values in PhP?

You would need to make a server request. You could use $.post or $.get, or if you prefer, $.ajax. — Alvaro
– Alvaro, Commented Sep 23, 2013 at 11:49
yep, do you have any server-side script with UPDATE table SET... already? — vladkras
– vladkras, Commented Sep 23, 2013 at 11:54
Yes the query is not the problem, the only problem is how I get the new left and top values in my php variable — Sevo
– Sevo, Commented Sep 23, 2013 at 11:57

Gaurav · Accepted Answer · 2013-09-23 12:10:10Z

1

As mentioned by Wietse, use stop event(http://jqueryui.com/draggable/#events) to detect when the drag has stopped. In stop event you can use javascript getBoundingClientRect() to get the location of DOM element on the screen.

When you have exact coordinates extracted, use your preferred language to post data to server and update database.

I created a fiddle to explain how .getBoundingClientRect() works http://jsfiddle.net/B62vM/

answered Sep 23, 2013 at 12:10

Gaurav

1,0882 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sevo Over a year ago

Ok I get all the code, the only problem I have now is that this code doesnt work:

stop: function() { 			 			$.post("upload.php", { left: this.getBoundingClientRect().left, top:this.getBoundingClientRect().top })

It doesnt activate my php file?

Gaurav Over a year ago

Is jsfiddle link working for you, are you getting alert values after drag ends?

Sevo Over a year ago

Yes but I dont need it in a alert I need to send that values to a php file and that is the $.post function right?

Gaurav Over a year ago

use chrome developer tool and see if you are able to make a network request. If yes, then check for the values getting passed to server.

Gaurav Over a year ago

Updated fiddle, now it sends a post request with correct parameters. You can use developer tool and test it and modify your server side code accordingly. jsfiddle.net/sgaurav/B62vM/1

|

Community · Accepted Answer · 2017-05-23 12:25:31Z

0

Use the stop event (http://jqueryui.com/draggable/#events), and post the data using $.post() function (http://api.jquery.com/jQuery.post/)

To get the position, look here: http://jsfiddle.net/davidThomas/DGbT3/:

$('#dragThis').draggable(
{
    drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }
});

(from this question: How to get the position of a draggable object)

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Sep 23, 2013 at 11:51

Wietse

3707 silver badges19 bronze badges

Comments

Yashankit Vyas · Accepted Answer · 2013-09-23 13:15:09Z

0

$("#takeHiddenVariable").val($("#idOfYourDiv").attr("style"));

Use hidden variable in $_POST['takeHiddenVariable'] in your php script.

answered Sep 23, 2013 at 13:15

Yashankit Vyas

1245 bronze badges

Comments

vladkras · Accepted Answer · 2013-09-24 02:35:43Z

actually, you could do it mixing previous answers, but with little corrections:

It's not a good idea to use numeric id's, if your $pess2['naam'] variable is numeric, try something like echo '#drag'. $pess2['naam'] .'..., then your jQuery part will be:

$('#drag3').draggable({
    containment: "#containment-wrapper", 
    scroll: false
    // use stop here instead of drag to send values only when div stops moving
    stop: function(){
        var offset = $(this).offset();
        // send x and y to your script
        $.post("upload.php", {x: offset.left, y: offset.top});
    }
});

On server you will have $_POST['x'] and $_POST['y'] variables, that you can use in you SQL query

mysql_query("UPDATE nvt SET left='".$_POST['x']."', top='".$_POST['y']."'")...

Here is small example: fiddle, that sends data and alerts 'updated!' on success. Note that css selector, jQuery selector and div's name must be the same.

Collectives™ on Stack Overflow

Getting CSS value and updating it into SQL

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related