Javascript add a variable from div id

Question

I have written a page that utilizes jquery draggable. It effectively has about 160 div elements that can be dragged around a page to allocate "stall sites" for an upcoming fete. To deal with so many elements I have a small database table that has 4 columns, those being ID, LEFT, TOP and DETAILS Each Div has id="ID", and the Content="Details" The first 2 of 160+ lines generated by PHP and SQL look like

div class="drag" id="1" style="left: 10px; top: 10px;">FS01<ul><li class="posX"><li class="posY">div>
div class="drag" id="2" style="left: 60px; top: 10px;">FS01<ul><li class="posX"><li class="posY">div>

After the elements have been dragged I find their new positions with the following Javascript

drag: function(){
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    //var zID = " <?php echo $id ?> "; //This is what I want to do
    $('.posX', this).text('x: ' + xPos);
    $('.posY', this).text('y: ' + yPos);
}

What I can't do (and a Javascript person could do this in seconds) is grab the ID and turn it into a Jquery variable (let's call it zID). With a new ID, LEFT and TOP, I can feed them back into an updating PHP File to make the new positions persistent. I've got the database, the PHP, the HTML, the Jquery running draggable and retrieving the "new" positions (xPos & yPos) and the PHP/SQL to return them to the database, but what I cant do is tie the positions to the ID ... HELP PLEASE!!

`this` is the element you want the `id` from. Just use its properties. — Andreas, Mar 16 '19 at 09:31
More specifically, `let zID = $(this).attr('id');` might do the trick for you. — Exfridos, Mar 16 '19 at 09:42
@Exfridos There's abolutely no need for jQuery in this case... Just: `this.id` — Andreas, Mar 16 '19 at 09:46

score 0 · Answer 1 · answered Mar 16 '19 at 10:27

0

this is the line of code you are searching for

$(this).attr('id')

see this link for more info

How can I get the ID of an element using jQuery?

answered Mar 16 '19 at 10:27

scaff

330
1
8

score 0 · Answer 2 · answered Mar 16 '19 at 23:31

0

Thanks Guys, I had already tried $(this).attr('id') but I did what the answer suggested and hadnt included a semi colon at the end. Such a basic mistake. All good... all working gri2a

answered Mar 16 '19 at 23:31

gri2a

59
2

score 0 · Answer 3 · answered Mar 17 '19 at 00:10

For other readers I should include the full answer which is-

   drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        var zId = $(this).attr('id');//my new variable
        $('.posX', this).text('x: ' + xPos);
        $('.posY', this).text('y: ' + yPos);
        $('.Id', this).text('z: ' + zId);//text to display zId
    }

Javascript add a variable from div id

3 Answers3