Take id onclick and send values via Ajax

Asked

Viewed 2,998 times

3

I have a list of tasks, it has the status part, which shows for example 'On test' and a button of Approve.

I’m trying with that button Approve when clicked take the task id and send an update to it to change its status.

But so far I don’t know how to do, I was trying to do via Ajax with onClick, but I got nothing so far.

Someone can give me a way?

Knob

<a id="approved" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Aprovar"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>

ID

<li class="list-group-item id-task" id="<?php echo $row['TasksId']; ?>">

Task Code

<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 id="approved" class="flex-icon" 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"> -->
php javascript jquery ajax onclick

  • You can post your Javascript?

  • I find it easier to do this without ajax, in the form of link even passing by parameter the action and the id of the task.

  • @Fabianocacinpinel has some documentation for me to give a read?

  • @Allanandrade That’s all I was;$('#approved').on('click',function(){&#xA; var taskid=$(this).find('li').attr('id');&#xA; &#xA; $.ajax({&#xA; url: './task.php',&#xA; type: 'POST', &#xA; data: {},&#xA; success: function(data) { &#xA; window.location.reload(); &#xA; } &#xA; });&#xA; });

  • Will you have a button just for all tasks? Explain better how you want it to work?

  • @Allanandrade it mounts a button for each task, if I click the approve button it will change the value of the task within the bank, an update, to change its status. I got the ID <a href=?action=approved&TasksId=<?php echo $row['TasksId']; ?> id="approved" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Aprovar"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a> But my problem is that I am using Class and PDO.

  • I only read your previous comment now, so I think it’s like @Fabianocacinpinel said... can only have an ID, changes by class, picks up ID relative to the object that received the click and posted via AJAX.

Show 2 more comments

2 answers

3


Example using the ajax:

Cannot contain elements with repeated Ids within an html page so change

of 

<a id="approved" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Aprovar">

for 

<a class="approved" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Aprovar">

In the js you made will stay like this:

<script>
    $('.approved').on('click',function(){ 

        var taskid = $(this).parent().parent().attr('id');

        $.ajax({ 
            url: './task.php', 
            type: 'POST', 
            data: { action: 'aprovar', ID: taskid },
            success: function(data) { 
                window.location.reload(); 
            } 
        }); 

    });
</script>

In the task.php file you will get something like this:

<?php

if( $_GET['action'] == 'aprovar' and ! empty( $_GET['ID'] ) ){

    // o código que atualiza o banco

}

I believe that’s it

  • Thank you very much, make a mistake.

0

I usually do as in the example below:

<a id="approved" class="flex-icon" data-toggle="tooltip" data-placement="top" title="Aprovar" data-id="<?php echo $row['TasksId'];?>"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>

jQuery

$(document).ready(function(){

   $("a#approved").click(function(){
      var id_task = $(this).attr('data-id');

      $.ajax({
       url: 'http://www.seusite.com.br/script.php',
       type: 'POST',
       data: {id:id_task}

       success: function(callback){
          alert(callback);
       }
      });
   });
});

php script.

<?php
echo 'Retornou: '.$_POST['id'];
?>

What I did was put an attribute on the tag <a> called data-id (could be any name) and inside it I passed the task ID.

Already in jQuery I created a code that when clicking on the link/ button it would take what is in the tag data-idwhich would be the task ID and pass via ajax to a PHP file called php script. (could be any name)

Browser other questions tagged php javascript jquery ajax onclick

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