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`](http://api.jquery.com/jQuery.post/) or [`$.get`](http://api.jquery.com/jQuery.get/), or if you prefer, [`$.ajax`.](http://api.jquery.com/jQuery.ajax/) — Alvaro, Sep 23 '13 at 11:49
yep, do you have any server-side script with `UPDATE table SET...` already? — vladkras, Sep 23 '13 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, Sep 23 '13 at 11:57

score 1 · Accepted Answer · answered Sep 23 '13 at 12:10

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 '13 at 12:10

Gaurav

1,078
2
8
18

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? – Sevo Sep 23 '13 at 12:26
Is jsfiddle link working for you, are you getting alert values after drag ends? – Gaurav Sep 23 '13 at 12:29
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? – Sevo Sep 23 '13 at 12:31
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 Sep 23 '13 at 12:33
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. http://jsfiddle.net/sgaurav/B62vM/1/ – Gaurav Sep 23 '13 at 12:37
Ok, Ill give it a try – Sevo Sep 23 '13 at 12:44
he says he opens my upload.php but it just doesnt react? my upload is: `mysql_query("UPDATE `nvt` SET `left`='". $_POST['left'] ."'")or die(mysql_error()); header("Location: inlogged"); ` – Sevo Sep 23 '13 at 12:53
This is totally a different question. Please post it as a separate question and if my answer solved your problem, consider accepting it as correct answer. – Gaurav Sep 23 '13 at 13:14

score 0 · Answer 2 · edited May 23 '17 at 12:25

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)

score 0 · Answer 3 · answered Sep 23 '13 at 13:15

0

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

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

answered Sep 23 '13 at 13:15

Yashankit Vyas

124
5

score 0 · Answer 4 · answered Sep 24 '13 at 02:35

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.

Getting CSS value and updating it into SQL

4 Answers4