I'm trying to reorder a list of items, which when clicking a button releases the reordering and when I click again it saves, but if I do more than one reordering it only accepts the first one. Example:
Item 1 = 1st Position
Item 2 = 2nd Position
Item 3 = 3rd Position
First reordering
Item 2 = 1st Position
Item 3 = 2nd Position
Item 1 = 3rd Position
Second reordering
Item 2 = 1st Position
Item 1 = 2 ° Position
Item 3 = 3rd Position
Click Save
Only the first reordering is saved
Item 2 = 1st Position
Item 3 = 2nd Position
Item 1 = 3rd Position
HTML
<div class="panel panel-default">
<div class="panel-heading">
<?php if($userRow['Level'] == 'Admin'):?>
<a href="javascript:void(0);" class="btn btn-danger reorder_task" id="save_reorder">Reordenar</a>
<?php endif; ?>
<div id="reorder-helper" class="alert alert-danger" style="display:none;" role="alert"><h6 class="reorder-unlock">Reordenação Liberada</h6></div>
<a href="#" class="general-chart" data-toggle="tooltip" data-placement="top" title="Relatórios"><i class="fa fa-line-chart fa-lg" aria-hidden="true"></i></a>
<div class="head-alert">
<a href="#" class="due-task" data-toggle="tooltip" data-placement="top" title="Vencendo">1</a>
<a href="#" class="test-task" data-toggle="tooltip" data-placement="top" title="Em Teste">1</a>
<a href="#" class="aproved-task" data-toggle="tooltip" data-placement="top" title="Aprovadas">1</a>
</div>
</div>
<div class="panel-body">
<ul id="sortable" class="list-group reorder-task-list">
<?php
$rows = $auth_task->select();
foreach($rows as $row): ?>
<li class="list-group-item id-task" id="<?php echo $row['TasksId']; ?>">
<span><i class="glyphicon glyphicon-retweet" aria-hidden="true"></i></span>
<h5 class="delivery-line">
<i class="glyphicon glyphicon-time" aria-hidden="true"></i>
<?php echo$row['Delivery'];?>
</h5>
<?php
if($row['Status'] == 'Em Processo'){
echo "<span class=\"badge\" style=\"background-color:#67A6DF\">Em Processo</span>";
}
elseif ($row['Status'] == 'Teste') {
echo "<span class=\"badge\" style=\"background-color:#FCB529\">Em Teste</span>";
}
elseif ($row['Status'] == 'Aprovada'){
echo "<span class=\"badge\" style=\"background-color:#43A995\">Aprovada</span>";
}
?>
<div>
<h4 class="line-center">
<strong><?php echo $row['Project'];?></strong>
</h4>
</div>
<h6 class="line-center" ><?php echo $row['Subject'];?></h6>
<hr>
<h4 class="company-line line-center">
<i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>
<?php echo $row['CompanyFantasy'];?>
</h4>
<?php if($userRow['Level'] == 'Admin'):?>
<div class="footer-li">
<a href="" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Estatística"><i class="fa fa-bar-chart fa-2x" aria-hidden="true"></i></a>
<a href="" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Abrir"><i class="fa fa-folder-open-o fa-2x" aria-hidden="true"></i></a>
<a href="" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Enviar Para Teste"><i class="fa fa-flask fa-2x" aria-hidden="true"></i></a>
<a href="" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="Aprovar"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>
<a href="" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Cancelar"><i class="fa fa-times-circle-o fa-2x" aria-hidden="true"></i></a>
</div><!-- <div class="footer-li"> -->
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div><!-- <div class="panel-body"> -->
<div class="panel-footer"></div>
</div><!-- <div class="panel panel-default"> -->
Script
$(function() {
$('.reorder_task').on('click',function(){
$('.reorder_task').html('Salvar');
$('#reorder-helper').slideDown('slow');
$('#sortable').sortable({
axis: 'y',
opacity: 0.7,
handle: 'span',
update: function(event, ui) {
var list_sortable = $(this).sortable('toArray').toString();
var list_array = [list_sortable];
$("ul.reorder-task-list").each( function(){
list_array.push();
});
$("#save_reorder").click(function( e ){
if( !$("#save_reorder i").length )
{
$(this).html('').prepend('<i class=\"fa fa-spinner fa-spin fa-fw\"></i><span class=\"sr-only\">Loading...</span>').removeClass('btn-danger');
$("#sortable").sortable('destroy');
$("#reorder-helper").html( "<h6 class=\"uping\" >Salvando</h6>");
$.ajax({
url: './task.php',
type: 'POST',
data: {list_order:"" +list_array+ ""},
success: function(data) {
window.location.reload();
}
});//End Ajax
return false;
}//End If
e.preventDefault();
});// End Click
} //End Update
});//End Sortable
});// End Onclick
});
REQUEST
if($_SERVER['REQUEST_METHOD']=='POST'){
if(isset($_POST['list_order'])){
$list_order = strip_tags($_POST['list_order']);
$res=$auth_task->update($list_order);
}
exit();
}
UPDATE
public function update($list_order){
$list = explode(',' , $list_order);
$count = 1 ;
foreach($list as $id) {
try {
$stmt = $this->conn->prepare('UPDATE tasks SET OrderTask = :ordertask WHERE TasksId = :id');
$stmt->bindParam(':ordertask', $count, PDO::PARAM_INT);
$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->execute();
}catch (PDOException $exception){
header("Location: ./error.php?err=Cant-Order");
echo 'Erro: '.$exception->getMessage();
return null;
}
$count++;
}
}
I already posted something similar, but I think it was very confusing my question, so I'm putting it again. Sorry.