I already have loading from mysql using dragula to display the contents but I can't for the life of me figure out how to save to mysql when a column is changed in dragula (drop function).. What I would like is to have mysql save upon dropping from dragula the column id number.
Basically what is occuring right now on load is that it takes the leadStatusId and adds it to the column-# to load in the correct column. But saving upon drop isn't something that I understand. If I could use jquery or javascript to receive the new column id upon drop so that I could pass that onto mysql that would be amazing.
<div id="bfl" class="boardflowlead">
<div class="scrolling-wrapper row flex-row flex-nowrap overflow-auto">
<?php
$sql = "SELECT
user.userid AS uuid,
user.name AS uname,
user.avatar AS uavatar,
lead_status.id AS leadStatusId,
lead_status.NAME,
lead_status.sort,
lead_status.active,
lead_profile.id AS leadProfileId,
lead_profile.leadStatus,
lead_profile.firstName,
lead_profile.lastName,
lead_profile.firstAgent,
lead_profile.secondAgent,
lead_profile.scheduledBy
FROM
user,
lead_status,
lead_profile
WHERE
lead_status.active = 1
AND lead_profile.leadStatus = lead_status.id
AND lead_profile.scheduledBy = user.userid
ORDER BY
lead_status.sort ASC";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$leadStatusId = $row['leadStatusId'];
$leadStatusName = $row['NAME'];
$leadProfileId = $row['leadProfileId'];
$leadProfileFirstName = $row['firstName'];
$leadProfileLastName = $row['lastName'];
$leadProfileFirstAgent = $row['firstAgent'];
$leadProfileSecondAgent = $row['secondAgent'];
$bfluserid = $row['uuid'];
$bflusername = $row['uname'];
$bflavatar = $row['uavatar'];
echo '<div class="col-bfl-2 boardflowlead" id="column-' . $leadStatusId . '" style="overflow:auto;white-space: nowrap; width: 220px;min-width: 220px;">';
echo '<h4><center><b>' . $leadStatusName . '</b></center></h4>';
if ($leadStatusId = $leadProfileId) {
echo '<div class="card card-full-color card-full-primary" style="width: min-content;">';
echo '<div class="card-header card-header-contrast"><strong>' . $leadProfileFirstName . ' ' . $leadProfileLastName . '</strong>';
echo '<span class="card-subtitle"><b>Sale Amount: </b>$41,838.35<br /><b>Balance Due: </b> $1,205.44</span>';
echo '</div>';
echo '<div class="card-body" style="padding: 5px;">';
echo '<div class="buttons-group text-center">';
echo '<span class="badge badge-pill badge-primary" style="margin: 2px;"><span class="mdi mdi-time"> 26</span></span> <span class="badge badge-pill badge-primary" style="margin: 2px;"><span class="mdi mdi-check"> 7/26</span></span> <span class="badge badge-pill badge-primary" style="margin: 2px;"><span class="mdi mdi-attachment"> 26</span></span>';
if ($uavatar != null) {
echo '<br><button class="badge badge-pill badge-primary" style="margin: 2px;" type="button" data-toggle="bs-tooltip" title="' . $uname . '"><img src="' . $bflavatar . '" height="32px" width="32px" alt="Avatar"></button>';
} else {
echo '<br><button class="badge badge-pill badge-primary" style="margin: 2px;" type="button" data-toggle="bs-tooltip" title="' . $uname . '"><img src="assets/img/avatar.png" height="32px" width="32px" alt="Avatar"></button>';
}
echo '</div>';
echo '<a href="./viewLead.php?id=' . $leadProfileId . '" class="stretched-link"></a>';
echo '</div>';
echo '</div>';
}
echo '</div>';
}
}
?>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
dragula([$("#column-1")[0], $("#column-2")[0], $("#column-3")[0], $("#column-4")[0], $("#column-5")[0], $("#column-6")[0], $("#column-7")[0],
$("#column-8")[0], $("#column-9")[0], $("#column-10")[0], $("#column-11")[0], $("#column-12")[0], $("#column-13")[0], $("#column-14")[0],
$("#column-15")[0], $("#column-16")[0], $("#column-17")[0], $("#column-18")[0], $("#column-19")[0], $("#column-20")[0], $("#column-21")[0],
$("#column-22")[0], $("#column-23")[0], $("#column-24")[0], $("#column-25")[0], $("#column-26")[0], $("#column-27")[0], $("#column-28")[0],
$("#column-29")[0], $("#column-30")[0], $("#column-31")[0], $("#column-32")[0], $("#column-33")[0], $("#column-34")[0], $("#column-35")[0]]);
});
</script>
source https://stackoverflow.com/questions/70173728/how-to-save-column-position-using-dragula-mysql-javascript-jquery
Comments
Post a Comment