Sending AJAX and PHP array

Asked

Viewed 178 times

0

I am trying to reorder a list of items, which when clicking a button releases the reordering and when clicking again it saves, but if I do more than one reordering it only accepts the first one. Example:

Item 1 = 1° Heading

Item 2 = 2° Heading

Item 3 = 3° Heading

First reordering

Item 2 = 1° Heading

Item 3 = 2° Heading

Item 1 = 3° Heading

Second reordering

Item 2 = 1° Heading

Item 1 = 2° Heading

Item 3 = 3° Heading

Click on Save

Saves only the first reordering

Item 2 = 1° Heading

Item 3 = 2° Heading

Item 1 = 3° Heading

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’ve posted something similar, but I think it got very confusing my question, so I’m putting it again. I’m sorry.

1 answer

0


Try it instead of doing it like this:

$("#save_reorder").click(function( e )

Do so:

$(document).on( "click",'#save_reorder', function( event )

I saw that in . reorder_task you have done it in a similar way but test as in the example above.

Test also by placing all the code of the $("#save_reorder").click(function( e ){ on the outside(after) of $('.reorder_task').on('click',function(){

I believe it is something related to these lines since the first ordering always works.

  • Still the same, I think the problem is in . push or php foreach, but I don’t know what...

  • @Wagnervian gives some js error when you try to save a second time?

  • nothing he saves normally, I think he’s not succeeding, let’s say, delete the first reordering and take the last.

  • 1

    @Wagnervian puts list_array = array(); right at the beginning of $('. reorder_task'). on('click'

  • Was that right put $('.reorder_task').on('click',function(){&#xA;var list_array = []; ....

  • And I saw something else. After the first ordering the script puts the <i></i> tag inside the #save_reorder button, and after that I believe that it no longer enters this if( ! $("#save_reorder i"). length )

  • Yes, but with that I can make him see if it’s been altered or not, if nothing’s changed he won’t let me save.

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.