Get id onclick and send values via Ajax

Question

Get id onclick and send values via Ajax

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

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

I'm trying to get this Approve button when clicked, grab the Task Id and send an update to it to change its status.

But so far I do not know how to do it, I was trying to do via Ajax with onClick , but I have not achieved anything so far.

Can someone give me a way?

Button

<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

asked by anonymous 29.08.2016 / 21:28

2 answers

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);
       }
      });
   });
});

script.php

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

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

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

29.08.2016 / 22:39

Change radio button color Animation at the touch of a button

score 3 · Accepted Answer

Example using ajax:

Can not contain elements with repeated IDs inside an html page then change

from

<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">

At js what you did it will look 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 there will be something like this:

<?php

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

    // o código que atualiza o banco

}

I believe this is it