How to update database after drag and drop using javascript/ajax?

Question

For some context, I have have three divs for dragging and dropping items. The first div will be the default div to start things off. Then I want the second two divs to update the database when I drop content in there. These divs will be dynamic and I may have 5 or 6 divs at any give time, but also could only have 2 or 3. I am NOT very experienced with javascript. I have gotten this far, but am struggling with getting further. This is a three part question:

A) How do I provide a sum PER DIV - Right now the sum div sums up no matter which div I drop the element into. I'm also looking to subtract from the sum when an object leaves the div as well as delete the entry from the database (NOT INCLUDING THE ORIGINAL FIRST DIV).

B) How do I send multiple $_POST values to update.php using an ajax request? I've tried data:{data: data, name: name, check: check, amount: amount},, but that makes my sum div stop working. If I run it as is, I'm just getting the "amount" value (which is the div id), but it's not posting as 'amount'. I'm trying to get the div id of the dropped element(amount), the div content of the dropped element (the name) and the div id that the object was dropped into, or the parent div's id (the check). As I said before this javascrip/ajax thing is new to me. I'm not finding what I'm looking for after searching for hours.

C) Is there a way to return the 'total' variable to my script FROM update.php instead of adding things up inside of the script?

javascript

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
var total = 0;
function drop(ev, ui) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
    $.ajax({
    type:'POST',
    url:'../update.php',
    data:{data:data},
    success: function(){
        total += parseFloat(data);
        $('#sum').html(total);
    }
});
}

html

<h2>Drag and Drop</h2>
<div id="center">
<div id="2018-08-01" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="move" draggable="true" ondragstart="drag(event)" id="1056.23">Mortgage</div>
<div class="move" draggable="true" ondragstart="drag(event)" id="10">Fees</div>
</div>

<div id="2018-08-05" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sum">Sum Here</div>

<div id="2018-08-15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sum">Sum Here</div>
</div>

update.php

$name = $_POST['name'];
$check = $_POST['check'];
$amount = $_POST['amount'];
$sql = "INSERT INTO bills (bills_id, bills_name, bills_check, bills_amount) VALUES ('', '$name', '$check', '$amount')";
mysqli_query($connect, $sql);

Jocko · Answer 1 · 2018-08-17T19:03:50.253

My first note is be more specific when naming your variables, this will help you understand where problems are occurring. For example, this code may be valid, but it's very difficult to read:

data:{data:data}

Regarding your issues:

a) You're identifying (<div id="sum">) and referencing the sum HTML objects with a non-unique ID (e.g. you have multiple HTML elements with the ID 'sum'). While you're allowed to assign non-unique values to an HTML tag's ID parameter, it's not the right way to do things. JQuery enforces the uniqueness, so when you request $('#sum') it will only return the first element that has that ID, and will ignore the rest.

b) Regarding sending multiple values to a POST request. I need to rename some things (see my note above) so this will be clear.

Your line that is defined as:

var data = ev.dataTransfer.getData("text");

Should be name something better like this:

var amountData = ev.dataTransfer.getData("text");

Then you want to modify it's structure to be more informative, so we will define it like this:

var amountData = {
  name: "some name",
  check: check,
  amount: ev.dataTransfer.getData("text")
}

Your ajax call should look like this:

$.ajax({
    type:'POST',
    url:'../update.php',
    data:{data: amountData},
    context: amountData,
    success: function(){
        total += parseFloat(this.amount);
        $('#sum').html(total);
    }
});

I'm using the javascript functional context to transfer your data into the success method. This topic is complex, and you can read about it, I'm not going into details here.

Note that I have added the context: amountData configuration. This means that inside of your success method, this is equal to the amountData variable.

Now that this = amountData I can reference it's object structure using dot-notation. So to get the amount out of the context object, I just reference it like so:

total += parseFloat(this.amount);

c) Regarding returning data from PHP. PHP isn't my strong suit, but basically you want to output valid JSON in your PHP page response. So assuming your PHP is returning JSON like this:

{
    "total": "1.00"
}

Read the comments on this question: Returning JSON from PHP to JavaScript?

Specifically comment #2 (as of this edit)

Next you want to modify your AJAX call to look like this:

$.ajax({
    type:'POST',
    url:'../update.php',
    data:{data: amount_data},
    dataType: 'json',
    error: function(xhr, status, error) {
        // Get some feedback in your browser console if something goes wrong.
        console.info(status + ": " + error); 
    },
    success: function(responseData){
        total = parseFloat(responseData.total);

        // You need to better identify your HTML tags.
        $('#sum-more-unique-id').html(total);  
    }
});

Responses and B and C are mutually exclusive depending on your approach.

How to update database after drag and drop using javascript/ajax?

1 Answers1